Lesson 50 of 50 · css
Capstone Project – Build a Complete Responsive Site
Duration: 30 mins
Putting everything together. Build a three‑page site (Home, Blog, Contact) that includes:
- Modern layout using Grid for page skeleton and Flexbox for cards.
- Responsive images (
srcset,loading="lazy"). - Dark‑mode toggle via CSS variables.
- Accessible navigation with focus‑visible styles.
- Animation on hero section using
@keyframes. - Performance – critical CSS inline, preload, and
containwhere appropriate. - SEO – meta tags, Open Graph, JSON‑LD article markup.
- Testing – run
stylelint,Lighthouseaudit, and visual regression on a component.
Deliver a zip of the final project.