Project: A Landing Page

Time to put the whole course together. In this project you'll style a complete product landing page: a sticky header, a hero section, a feature grid, a pricing table with a highlighted plan, a testimonial, and a footer — responsive, themeable, accessible and animated with restraint.

The finished page

Edit the CSS and watch the page change. Try different values for --hue at the top to re-theme everything at once.

What this page uses

Technique	Where	Lesson
Cascade layers	reset → tokens → base → components → utilities	45
Design tokens, light-dark(), oklch()	tokens layer	10, 13, 46
Fluid type and spacing with clamp()	Headings, --space	14
Sticky header with backdrop blur	.header	24, 39
Nesting	Every component	44
Grid with a breakpoint; auto-fit grids	Hero, features, pricing	29, 32
:has() to highlight a plan	article:has(.badge)	43
aspect-ratio + object-fit	Hero image	41
Gradients, shadows, transitions	Hero, buttons	12, 18, 37
Focus styles, reduced motion, visually hidden text	base, utilities	48

Challenges

1. Re-theme it — change --hue, then switch your system to dark mode.
2. Mobile navigation — below 480px, hide the nav links and show a button that opens them in a popover.
3. Container queries — make each pricing card switch to a horizontal layout when its container is wide (lesson 33).
4. Scroll animation — fade the feature cards in as they scroll into view with animation-timeline: view(), respecting reduced motion (lesson 38).
5. Theme toggle — add a light/dark/system switch using :has() (lesson 46).
6. Audit — run Lighthouse and fix any contrast or accessibility issues it reports.

What next?

• Test yourself with the exercises and the quiz.
• Add behaviour with the JavaScript course.
• Try a framework: Bootstrap or Sass.