Build a dashboard shell: sidebar, top bar, metric cards, and a data table. This is the experienced-level capstone—combine grid, tokens, sticky regions, and accessible tables.
Requirements
- CSS grid for the shell (sidebar + main).
- At least three metric cards with consistent spacing tokens.
- One responsive breakpoint where sidebar stacks above content.
- Table with
captionand scoped headers. - Visible keyboard focus on interactive controls.
Extension ideas
- Dark theme via
data-themeonhtml. - Sticky table header inside a scroll region.
- Dropdown menu using positioning lesson patterns.
Challenge
Ship the dashboard
- Fork the starter: rename metrics for your portfolio.
- Add one more table row and a zebra style.
- Breakpoint at
48rem: single-column shell.
Done when: layout works at 320px and 1200px without horizontal page scroll.
Interview prep
- How would you make this dashboard production-ready?
External CSS, caching, image optimization, automated a11y checks, loading states, error boundaries in JS layer, and responsive QA on real devices.