Build a Dashboard Layout
Combine everything you've learned to build a complete dashboard with header, sidebar, cards, and hidden panels.
What we're building
In this capstone you will combine every display and layout concept from this module into a single project: a dashboard layout. The dashboard has four parts. A header bar with the logo on the left and navigation links on the right — built with flexbox and justify-content: space-between. A sidebar on the left — a plain block-level element with a fixed width, containing stacked navigation links. A main content area — a CSS Grid of six cards arranged in three columns. And two hidden elements: an admin panel removed entirely with display: none, and a draft card made invisible (but space-preserving) with visibility: hidden.
Real dashboards work exactly this way. Open Notion, Trello, or GitHub's project board and you will see the same structure: a flex header pinning a logo and actions to opposite edges, a block sidebar for navigation, a grid of cards for the main content, and panels that appear and disappear without breaking the layout. Stripe's dashboard uses a flex header, a fixed-width sidebar, and a grid of metric cards. Vercel's deployment page toggles panels in and out with display: none. You are about to build the same thing from scratch.