CSS Dojo道場 · practice
All levels

Boss: build the page

Level 10 of 10

Your goal

In the 480 × 300 grid, using named areas: header across the top (60px tall); footer across the bottom (60px tall); sidebar on the left of the middle row (120px wide); main filling the rest of that row (348px wide). The middle row is at least 120px tall and fills the leftover height (156px). Use 12px gaps everywhere.

Must usegrid-template-areasgrid-template-columnsgrid-template-rowsgapgrid-area
Elements

Hover one to find it on the stage. Click it, or put your cursor inside its CSS rule, to focus on just that element.

target content boxtarget outer edge (green = matched, red = not yet)your element (hovered or focused)
Feedback updates as you type, and your CSS is saved in this browser. Exact target numbers are in the Target panel.