Building a Complete Responsive Website

What you'll build

Time to put it all together. In this module we build a real, responsive landing page from scratch — semantic HTML, design tokens, Flexbox and Grid layout, and responsive polish. Every technique here comes from an earlier module; this is where they combine into something you'd actually ship.

We'll build a product landing page called "Nimbus" in four steps.

1 · Semantic structure

Always start with the HTML — structure before style. Notice the semantic landmarks (Module 7): <header>, <nav>, <main>, <section>, <article>, and <footer>. The page is meaningful and accessible before a single line of CSS:

<body>
  <header class="site-header">
    <a class="logo" href="/">Nimbus</a>
    <nav>
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Ship faster with Nimbus</h1>
      <p>The toolkit that gets your ideas online in minutes.</p>
      <a class="btn" href="#">Get started</a>
    </section>

    <section id="features" class="features">
      <article class="card"><h3>Fast</h3><p>Blazing performance.</p></article>
      <article class="card"><h3>Simple</h3><p>No config needed.</p></article>
      <article class="card"><h3>Secure</h3><p>Safe by default.</p></article>
    </section>
  </main>

  <footer class="site-footer">&copy; 2025 Nimbus</footer>
</body>

2 · Base styles & tokens

Next, the foundation: a box-sizing reset, design tokens as custom properties (Module 21), readable typography, and a reusable button with a hover transition. Setting these first means the rest of the CSS stays consistent:

:root {
  --brand: #6366f1;
  --ink: #1f2937;
  --space: 1rem;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.6;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

3 · Layout

Now arrange things. Flexbox handles the header (logo left, nav right), and Grid handles the feature cards with that responsive auto-fit pattern that reflows on its own — no media query needed yet:

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space) 2rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space);
  padding: 2rem;
}

4 · Responsive & polish

The auto-fit grid already adapts, and clamp() makes the headline fluid. Add a media query only where the design still needs one (like stacking the header nav on very small screens), check colour contrast, confirm keyboard focus is visible, and you're done. Here's the finished page, rendered live:

Recap & quick check

You just built a complete, professional page. The final module hands you a set of capstone projects to build your portfolio and make everything stick. 🚀