Intermediate Projects
Prerequisites: Level 2 — Intermediate
Build these using Grid, positioning, responsive design, custom properties, and animation from Level 2.
1. Responsive Landing Page
A landing page with a hero, a feature grid that goes from one to three
columns, a testimonial section, and a footer — built mobile-first with
media queries and fluid type using clamp().
2. Photo Gallery
A responsive gallery with grid-template-columns: repeat(auto-fill, ...),
aspect-ratio and object-fit for uniform thumbnails, a hover zoom with
transforms and transitions, and a caption overlay using positioning.
3. Themeable Dashboard Layout
A dashboard with a sticky header, a sidebar, and a main area laid out with
grid-template-areas; a light and dark theme driven by custom properties
and prefers-color-scheme; and cards that change layout with container
queries.
4. Animated Components
A loading spinner, a toast notification that slides in, and an animated
accordion — all with keyframes or transitions, and all respecting
prefers-reduced-motion.