TaskBuild the full landing. @layer tokens, base, components. tokens: full color/space/type system. base: body reset + font. components: .nav (header), .hero (gradient + entrance), .pricing (3 cards, Pro featured), .footer (4 cols). One @media (max-width: 640px) hides nav-links. Use container, clamp, OKLCH everywhere. Animations respect reduced-motion. Include: nav (logo CodeMentor + 3 links + CTA), hero (h1 'Learn frontend the modern way' + p + 2 CTAs with gradient bg), pricing (Free/Pro/Team — Pro featured), footer (Brand + 3 columns + copyright bottom).
Capstone 11: Full landing page — combine everything
300 XP20 min
Theory
The final assembly
Build a complete landing page that combines EVERY component from B9 + every concept from B1-B8:
- Nav header (B9-05)
- Hero with entrance animation (B9-08)
- Pricing-card row (B9-07)
- Footer (B9-09)
- All tied together with the token system (B9-01)
- Using @layer architecture (B8)
- OKLCH colors (B5)
- Container queries (B6)
- Fluid type with clamp (B4)
- Polish: hover states, focus rings, reduced-motion (B7)
This is the "ship-ready" landing page that every product needs.
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 10 lessons in each track are free. No card needed for those.