Project 10: Complete Landing Page

Project 10: Complete Landing Page

The grand finale: build a full landing page using every tool in the CSS toolkit.

The bag of tools

• display: flex and grid for layout
• gap, padding, margin, border-radius, box-shadow
• CSS variables for a consistent color system
• A @media query to go responsive
• A transition on hovers
• @keyframes for a hero entrance
• Focus visible respects plus prefers-reduced-motion

Use it all

• One hero: a big heading + two buttons.
• One feature row: three cards (flex).
• One grid: your portfolio pieces.
• A sticky header, a fixed CTA.
• One @media breakpoint that collapses the hero and cards.

One heading per page

A landing page is judged by its outline: exactly one <h1>, a clear heirarchy, and everything above the fold works on the first visit.

Finish line checklist

• [ ] Semantic HTML + tidy CSS
• [ ] Everything above the fold works
• [ ] One breakpoint minimum
• [ ] Focus + contrast pass
• [ ] Gradients/shadows are calm

TL;DR

Your capstone ties every CSS concept into a single page. Your first real site is complete - go show it.