📝 Project
LESSON 13 OF 32
Project 2 — Responsive Landing Page
Project: Responsive Landing Page
Build a complete landing page using Flexbox, Grid, Variables and Media Queries. Must work on mobile, tablet and desktop.
📝 Project 2 Checklist — Responsive Landing Page
Combines everything from Lessons 7–12 into one real page.
- Nav bar using Flexbox (logo left, links right)
- Hero section with a heading, subtext, and a call-to-action button
- A features/cards section using CSS Grid (at least 3 cards)
- A footer
- Must use CSS variables for at least your colour palette
- At least one hover animation/transition (e.g. on the CTA button)
- Responsive at three breakpoints: mobile (under 600px), tablet, and desktop
- Cards section: 1 column (mobile) → 2 (tablet) → 3 (desktop)
Test it: Resize your browser window from full width down to phone width — nothing should overlap or overflow.