CSS · Practice

Responsive Website Project

Time to put it all together. You will build a complete, responsive landing page using everything from the CSS track: variables, Flexbox, Grid, media queries and transitions.

Advanced 7 min Lesson 25 of 26 Runnable examples

Before you start:Responsive Design CSS Variables

0/26 in CSS

On this page · 7 min · Advanced

Interview questions

Learning objectives#

Plan a page as sections and components
Build mobile-first with CSS variables
Use Flexbox for the header and Grid for features and pricing
Add hover states, focus styles and a responsive breakpoint
Check the result for accessibility

Explanation#

Step 1 — HTML first: header (logo + nav), main with hero, features and pricing sections, footer. Semantic and valid before any CSS.

Step 2 — Tokens: colours, spacing and radius as CSS variables on :root.

Step 3 — Base: reset, body font, fluid images, a .container with max-width.

Step 4 — Components: header with Flexbox; hero with clamp() heading; features with auto-fit Grid; pricing cards with a featured modifier.

Step 5 — Polish: a breakpoint for the nav, hover transitions, :focus-visible, reduced motion. Then test at 320px, 768px and 1280px.

Code example: Complete responsive landing page#

HTMLComplete responsive landing page Runnable

1<style>
2  :root { --brand:#4f46e5; --text:#0f172a; --muted:#64748b; --bg:#f8fafc; --radius:14px; --space:clamp(1rem, 3vw, 2rem); }
3  *, *::before, *::after { box-sizing: border-box; margin: 0; }
4  body { font-family: system-ui, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
5  .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }
6

7  .header { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1rem; }
8  .logo { font-weight: 800; color: var(--brand); }
9  .nav { display: flex; gap: 1rem; list-style: none; padding: 0; }
10  .nav a { color: var(--text); text-decoration: none; }
11  .nav a:hover { color: var(--brand); }
12

13  .hero { text-align: center; padding-block: var(--space); }
14  .hero h1 { font-size: clamp(1.8rem, 6vw, 3.2rem); line-height: 1.15; margin-bottom: .5rem; }
15  .hero p { color: var(--muted); max-width: 55ch; margin: 0 auto 1.25rem; }
16  .btn { display: inline-block; background: var(--brand); color: white; padding: .75rem 1.5rem; border-radius: 999px; text-decoration: none; transition: transform 150ms, box-shadow 150ms; }
17  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(79 70 229 / 30%); }
18  :focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
19

20  .section-title { text-align: center; margin: var(--space) 0 1rem; }
21  .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
22  .card { background: white; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 1.25rem; }
23  .card--featured { border: 2px solid var(--brand); }
24  .price { font-size: 2rem; font-weight: 800; }
25

26  .footer { margin-top: var(--space); padding-block: 1.5rem; text-align: center; color: var(--muted); }
27

28  @media (max-width: 480px) { .nav { width: 100%; justify-content: space-between; } }
29  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
30</style>
31

32<div class="container">
33  <header class="header">
34    <span class="logo">TaskFlow</span>
35    <nav aria-label="Main"><ul class="nav"><li><a href="#features">Features</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#">Login</a></li></ul></nav>
36  </header>
37

38  <main>
39    <section class="hero">
40      <h1>Organise your work.<br>Finish on time.</h1>
41      <p>TaskFlow keeps your team’s tasks, deadlines and files in one simple place.</p>
42      <a class="btn" href="#pricing">Start free</a>
43    </section>
44

45    <section id="features">
46      <h2 class="section-title">Features</h2>
47      <div class="grid">
48        <article class="card"><h3>📋 Boards</h3><p>Drag tasks between columns.</p></article>
49        <article class="card"><h3>⏰ Reminders</h3><p>Never miss a deadline.</p></article>
50        <article class="card"><h3>👥 Teams</h3><p>Share projects with anyone.</p></article>
51      </div>
52    </section>
53

54    <section id="pricing">
55      <h2 class="section-title">Pricing</h2>
56      <div class="grid">
57        <article class="card"><h3>Free</h3><p class="price">₹0</p><p>Up to 3 projects</p></article>
58        <article class="card card--featured"><h3>Pro</h3><p class="price">₹299</p><p>Unlimited projects</p></article>
59        <article class="card"><h3>Team</h3><p class="price">₹999</p><p>Up to 20 members</p></article>
60      </div>
61    </section>
62  </main>
63

64  <footer class="footer">© 2026 TaskFlow</footer>
65</div>

Expected output

A full landing page: header with logo and links, a centred hero with a call-to-action button, a feature grid and pricing cards that reflow from three columns to one as the screen narrows.

Opens this example in the full playground

Step-by-step explanation#

Design tokens live on :root, so a rebrand is one line.
The reset and .container give consistent spacing and a centred, fluid width.
The header uses Flexbox with space-between and wraps on small screens.
The hero heading scales with clamp(); the paragraph is limited to 55ch.
Features and pricing reuse the same auto-fit Grid and .card component.
.card--featured highlights the recommended plan.
A small media query adjusts the nav on very narrow phones; reduced motion turns off transitions.

Real-world use case#

This is the structure of real SaaS, course and product landing pages. Add it to your portfolio, then extend it with a contact form and a dark theme.

Common mistakes#

Building desktop first

Starting at 1280px and squeezing down leads to many overrides. Start from the narrow layout.

Copying values everywhere

Hard-coding #4f46e5 in 15 places makes changes painful. Use variables.

Skipping testing

Check at 320px, 768px and 1280px, use only the keyboard once, and run Lighthouse.

Best practices#

Write the HTML completely before the CSS
Reuse components (card, btn) with modifiers
Prefer intrinsic layouts, add media queries only when needed
Run Lighthouse and fix accessibility issues
Deploy it (GitHub Pages or Hostinger) and share the link

Remember this#

Order of work: HTML → tokens → base → components → responsive → polish → test.

One .card + modifiers beats three different card styles.

Test small, medium, large — and with the keyboard.

Practice exercise#

Your task: Extend the page: add a dark theme using prefers-color-scheme by redefining only the colour variables.

Need a hint?

Override --text, --muted and --bg, and make .card background a variable too.

Show solution

CSS Illustrative

1@media (prefers-color-scheme: dark) {
2  :root {
3    --text: #e2e8f0;
4    --muted: #94a3b8;
5    --bg: #0f172a;
6  }
7  .card { background: #1e293b; border-color: #334155; }
8  .nav a { color: var(--text); }
9}

Mini quiz#

Responsive Website Project quizMultiple choice Question 1 of 3

Which layout tool suits the header (logo left, links right)?

Score so far: 0/0

Want more? Practise all CSS MCQs · CSS interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.

On this page

Related tutorials

Interview questions

Learning objectives#

Explanation#

Code example: Complete responsive landing page#

Step-by-step explanation#

Real-world use case#

Common mistakes#

Best practices#

Remember this#

Practice exercise#

Mini quiz#

Related topics#

My notes#