Profile card

Box model, border-radius, box-shadow, flexbox centering

Build the avatar, name, and bio as a single flex column, then center the whole card on the page with a flex or grid parent.

Pricing table (3 tiers)

Flexbox row layout, consistent card heights, :hover states

Use align-items: stretch (the flex default) so all three cards match height even with different content lengths.

Responsive nav bar

Flexbox justify-content, flex-wrap, hamburger toggle at a breakpoint

Style the hamburger with a checkbox-driven :checked sibling selector before reaching for JavaScript — it's a good :has()/sibling-combinator exercise.

Progress bar / skill meter

width transitions, ::before/::after, clamp() for min/max width

Animate width with a transition on load; note the CSS gotcha that transitioning from width: 0 requires the initial value to actually be applied a frame earlier.

Responsive dashboard (sidebar + cards + charts area)

Grid template-areas, container queries, sticky sidebar

Start with a mobile single-column stack, then redefine one grid-template-areas map at a breakpoint rather than repositioning individual elements.

Image gallery with lightbox

aspect-ratio, object-fit, <dialog>, repeat(auto-fit, minmax())

See the dedicated Image Gallery Layouts page for the exact grid + <dialog> recipe if you get stuck.

Animated dropdown/mega menu

Transitions on max-height/grid-template-rows, :focus-within, transform-based reveal

Animating to height: auto doesn't transition in most browsers — animate grid-template-rows: 0fr to 1fr on a wrapper instead, a well-known workaround.

Theme switcher (light/dark/custom accent)

Custom properties, prefers-color-scheme, color-scheme

Define all themeable values as custom properties on :root, then override just those variables per theme class — never redeclare whole rulesets per theme.

Multi-step form wizard

:has() for step indicators, sibling combinators, focus management

Try driving the "current step" highlight purely with :has() and radio inputs before adding JavaScript, to see how far pure CSS state can go.

Full landing page clone (of a real product site)

Fluid typography, responsive images, layered gradients, scroll-driven reveal animations

Pick a real site with a design you admire, screenshot it at three viewport widths first, and match those three snapshots exactly before worrying about in-between states.

CSS-only game (Tic-tac-toe or a memory match)

Radio/checkbox state hacks, :checked, :has(), sibling combinators, @keyframes

Model each cell as a hidden radio/checkbox plus a styled label — the label is what the player actually sees and clicks.

Themeable design system (button/input/card primitives + docs page)

Cascade layers, @property, design tokens as custom properties, BEM or utility naming

Write the components once using only custom properties for every themeable value, then prove the system by skinning it with a second, wildly different theme and touching zero component CSS.

Print-perfect invoice/report template

@page, break-before/after/inside, print color handling

Design it for A4 first, verify with Chrome DevTools' "Emulate CSS media type: print," then check actual Print Preview since some @page behavior only renders there.