Build a Responsive Landing Page
Combine viewport meta, relative units, media queries, responsive images, and fluid typography into one complete page.
What we're building
In this capstone, you'll combine every responsive technique from this module into a single project: a responsive landing page for a fictional product. The page has five sections:
- A full-screen hero section with a fluid heading, subtext, and a call-to-action button.
- A features grid that shows 1 column on mobile, 2 on tablet, and 3 on desktop.
- A testimonial section with a responsive image and quote.
- A pricing section with side-by-side cards on desktop that stack on mobile.
- A footer with responsive navigation links.
This mirrors real landing pages you see everywhere — Stripe's homepage has a hero + features grid + pricing. Notion's landing page has a hero + feature sections + testimonials. Every startup, product, and portfolio site follows this same responsive pattern. The techniques you'll use are: the viewport meta tag (so mobile renders correctly), fluid typography with clamp() (so headings scale smoothly), relative units for spacing and widths (so the layout adapts), media queries for layout breakpoints (so columns reflow), and responsive images (so they scale without overflow).
You'll write the full HTML and CSS using the mobile-first approach: start with the mobile layout, then add media queries for larger screens.