</> ConvertAtlas Developer Tools
Level 2 · Intermediate — Layout & Responsive Lesson 27 Intermediate 16 min

Intermediate Final Project: Responsive Dashboard

Combine Grid, Flexbox, variables and responsive design into a full dashboard layout.

This capstone brings the whole Intermediate level together. You will build a responsive dashboard — the app-shell layout behind countless real products — using Grid for the structure, Flexbox for components, variables for theming and media queries for mobile.

What you are building

A dashboard with a top header, a side navigation, a row of stat cards, a main content grid and a small form. On desktop the sidebar sits beside the content; on mobile everything stacks into one scrollable column.

Preview
The dashboard shell: sidebar + header + stat grid.
Responsive Dashboard

Build a responsive admin dashboard layout that works on desktop and mobile, applying every intermediate skill: Grid, Flexbox, variables, positioning and media queries.

Requirements
  • A page-level Grid: fixed sidebar + flexible main area
  • A sticky top header with a title and a user area (Flexbox)
  • A row of 3–4 stat cards using auto-fit grid
  • A main content area with a card grid
  • A small form (e.g. a settings or search form) styled with focus states
  • CSS variables for colours and spacing
  • Mobile layout: sidebar collapses, everything stacks
  • Consistent spacing scale and section rhythm
Steps
  1. Set up variables (--bg, --surface, --text, --space) on :root
  2. Create the page Grid: grid-template-columns: 220px 1fr
  3. Build the sticky header with Flexbox (title left, user right)
  4. Add the stat cards row with repeat(auto-fit, minmax())
  5. Add the main content card grid
  6. Style the form inputs with padding, radius and a focus ring
  7. Add a media query (max-width: 800px) that stacks the layout to one column
  8. Polish spacing, shadows and hover states
Bonus challenges
  • Add a dark mode with a [data-theme] override
  • Make stat cards show a trend colour (green/red)
  • Add a collapsible sidebar toggle

You combined CSS Grid, Flexbox, custom properties, positioning, form styling and responsive media queries into a complete, real application layout.

Best practice

Build the layout structure with Grid first, then fill components with Flexbox. Start mobile-first, theme with variables, and test by resizing from desktop to phone.

Level 2 completeCongratulations — you have completed the Intermediate level! You can now build professional, responsive layouts. The Advanced level takes you into modern CSS: advanced Grid, container queries, architecture, animations and accessibility.
Key takeaways
  • The dashboard combines every intermediate skill into one layout.
  • Grid for the page shell, Flexbox for components.
  • Variables for theming, media queries for the mobile stack.
  • Next: the Advanced level — modern, professional CSS.

Related lessons

Level 2 · Intermediate — Layout & ResponsiveUnderstanding the Cascade and SpecificityLearn exactly which rule wins when several apply — the mechanic behind every CSS surprise. Level 2 · Intermediate — Layout & ResponsiveCSS Units: px, %, rem, em, vh, vw and clampChoose the right unit for every job — fixed, relative, viewport and fluid sizing. Level 2 · Intermediate — Layout & ResponsiveCSS Variables and Reusable ValuesDefine values once and reuse them everywhere — the key to theming and maintainable CSS.
Course overview