Responsive Web Design & Final Project

Responsive web design means one website looks good on phone, tablet, and desktop. You use fluid layouts, flexible images, and media queries instead of building three separate sites.

Responsive Web Design (RWD) Intro

Responsive web design means one website looks good on phone, tablet, and desktop. You use fluid layouts, flexible images, and media queries instead of building three separate sites.

Real-life example: RWD is like one school uniform with adjustable buttons — same clothes, fits different body sizes.

Mobile-first: write small screen CSS first, add wider rules later.
Use relative units (rem, %, fr) more than fixed px for layout.
Test at 320px (small phone), 768px (tablet), and 1200px (desktop).

Viewport Meta Tag

Without the viewport meta tag, mobile browsers zoom out and show a tiny desktop page. This tag tells the browser to use the device width.

Real-life example: Viewport meta is like telling a tailor your actual height — otherwise they guess wrong and the coat does not fit.

Required viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Grid View & Media Queries

Grid view means seeing many columns of content on wide screens and fewer on narrow screens. Media queries switch column counts and spacing at breakpoints.

Real-life example: Grid view is like market stalls — many stalls on a wide street, only one stall line on a narrow lane.

Responsive grid columns

.products {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .products { grid-template-columns: repeat(3, 1fr); }
}

RWD Images & Videos

Images should never overflow the screen. Videos in iframes need a wrapper with aspect-ratio so they scale cleanly.

Real-life example: A responsive image is like a rubber photo frame — shrinks on a small wall, grows on a big wall, never cracks the wall.

Fluid media

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.video-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

CSS Frameworks & Templates (note)

Frameworks like Bootstrap and Tailwind give ready-made classes for grids, buttons, and spacing. Templates are starter HTML/CSS layouts you customize. Learn plain CSS first — then tools speed you up.

Real-life example: Frameworks are like ready-made spice mixes — fast cooking, but you should still know how to cook rice and dal from scratch.

Bootstrap — popular, component classes, good for quick prototypes.
Tailwind CSS — utility classes, very common in modern apps (Rishtaara uses Tailwind).
Templates — download a landing page skeleton, replace text and colors.

SASS Tutorial (intro)

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor. You write .scss with variables, nesting, and mixins. A build tool compiles it into normal .css that browsers understand.

Real-life example: SASS is like writing a neat recipe notebook with shortcuts — then printing a simple cooking sheet (CSS) that anyone in the kitchen can follow.

Learn plain CSS first (this course). Add SASS later when your stylesheets get long. LESS is another preprocessor — similar idea.

SCSS nesting and variables → CSS

/* style.scss (SASS) */
$primary: #0891b2;

.nav {
  background: $primary;

  a {
    color: white;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* Compiles to normal CSS:
.nav { background: #0891b2; }
.nav a { color: white; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
*/

Practice path — quiz, examples & interview

On Rishtaara, practice the same skills with MCQs and interview questions after you finish the project below.

Real-life example: The certificate is like a school report card — useful, but the real skill is cooking the meal (building pages) yourself.

MCQ practice: /mcq/html-mcq and /mcq/css-mcq
Interview prep: /interview/html-interview
Full notes: /knowledge/html-css-zero-to-hero
Next course: JavaScript Fundamentals
Keep MDN and CSS-Tricks Almanac bookmarked for property lookups

Final Project Brief

Build a small product landing page for a fictional chai brand called ChaiConnect. It uses CSS variables, Flexbox navbar, Grid product cards, media queries, and a soft hover animation. Copy both files into one folder and open index.html in your browser.

Real-life example: This project is like your first shop opening — signboard (navbar), welcome banner (hero), product shelf (grid), and contact counter (footer).

Sticky Flexbox header with logo + nav.
Hero with gradient background and CTA button.
Three product cards in a responsive CSS Grid.
Footer with social links.
Works from 320px phone to 1200px desktop.

Complete index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="ChaiConnect — fresh masala chai delivered to your door." />
  <title>ChaiConnect — Fresh Masala Chai</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="site-header">
    <a class="logo" href="#">ChaiConnect</a>
    <nav class="nav" aria-label="Main">
      <a href="#flavors">Flavors</a>
      <a href="#story">Our Story</a>
      <a class="btn btn-small" href="#order">Order now</a>
    </nav>
  </header>

  <main>
    <section class="hero" id="order">
      <div class="hero-inner">
        <p class="eyebrow">Fresh • Local • Masala</p>
        <h1>Chai that tastes like home</h1>
        <p>Order ginger, elaichi, or cutting chai — hot delivery in 30 minutes.</p>
        <a class="btn" href="#flavors">See flavors</a>
      </div>
    </section>

    <section class="flavors" id="flavors" aria-labelledby="flavors-title">
      <h2 id="flavors-title">Pick your cup</h2>
      <div class="product-grid">
        <article class="product-card">
          <h3>Ginger Chai</h3>
          <p>Strong adrak kick for rainy evenings.</p>
          <span class="price">₹40</span>
        </article>
        <article class="product-card">
          <h3>Elaichi Chai</h3>
          <p>Light, sweet cardamom aroma.</p>
          <span class="price">₹45</span>
        </article>
        <article class="product-card">
          <h3>Cutting Chai</h3>
          <p>Small cup, big Mumbai energy.</p>
          <span class="price">₹20</span>
        </article>
      </div>
    </section>

    <section class="story" id="story">
      <h2>Our story</h2>
      <p class="prose">
        We started with one kettle on a street corner. Today we deliver the same slow-brewed masala chai
        to your desk — made with milk, ginger, and love.
      </p>
    </section>
  </main>

  <footer class="site-footer">
    <p>&copy; 2026 ChaiConnect. Made with CSS Grid + Flexbox.</p>
    <div class="footer-links">
      <a href="#">Instagram</a>
      <a href="#">WhatsApp</a>
    </div>
  </footer>
</body>
</html>

Complete style.css

After building ChaiConnect, try changing :root colors and grid breakpoints — you will feel how variables and responsive CSS speed up redesigns.

style.css

:root {
  --primary: #b45309;
  --primary-dark: #92400e;
  --accent: #059669;
  --bg: #fffbeb;
  --surface: #ffffff;
  --text: #292524;
  --muted: #78716c;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(41, 37, 36, 0.1);
  --header-h: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1.25rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #fde68a;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn:hover {
  background: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-small {
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}

.hero {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem;
  background:
    radial-gradient(circle at 15% 20%, #fde68a 0%, transparent 40%),
    radial-gradient(circle at 85% 10%, #bbf7d0 0%, transparent 35%),
    var(--bg);
}

.hero-inner {
  width: min(100%, 38rem);
  text-align: center;
  animation: fadeInUp 0.6s ease-out both;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.hero p {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.flavors,
.story {
  width: min(100%, 1100px);
  margin-inline: auto;
  padding: 3rem 1.25rem;
}

.flavors h2,
.story h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  margin-bottom: 1.25rem;
}

.product-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid #fde68a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(41, 37, 36, 0.14);
}

.product-card h3 {
  margin-bottom: 0.35rem;
}

.product-card p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.price {
  display: inline-block;
  font-weight: 800;
  color: var(--primary-dark);
}

.prose {
  max-width: 60ch;
  color: var(--muted);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  border-top: 1px solid #fde68a;
  background: #fef3c7;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}