Project: Dashboard UI

Overview of the 5-lesson project: a dashboard interface.

Project: Sales Dashboard

In this 5-lesson project you'll style a sales dashboard page from scratch. Each lesson adds one piece, and by the end you'll have a complete panel.

You'll use:

CSS grid for sidebar, header and main layout
Flex for side-by-side KPI cards
Custom properties for theme colors
:nth-child for a zebra-striped table
:hover and transitions for row highlight

Ready? Let's start.

Project roadmap

We'll build the project step by step:

Skeleton and theme: define theme with :root variables, set up the panel skeleton.
Sidebar and header: place three regions with display: grid and grid-template-areas.
KPI cards: lay cards out with display: flex and add gap between them.
Data table: merge borders with border-collapse and stripe with :nth-child(even).
Project final: add transitions and split sections with comments.

Each lesson's starting code contains the previous lesson's solution; you only add the new piece.

Theme variables in :root

A sales dashboard uses the same colors in dozens of places. Instead of repeating them everywhere, we define them once with custom properties.

Variables live in the :root selector; they start with a double dash and are read with var():

:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
}

.dashboard {
  background: var(--bg);
}

This way you can retheme the panel from a single place.

Exercise Start the stylesheet: header comment and :root

Add a comment at the top of the stylesheet; include the words Sales Dashboard. Then open a :root block and define two variables: --bg as #f5f7fa and --card-bg as #ffffff. End each declaration with a semicolon.

Show example solution

/* Sales Dashboard stylesheet */

:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
}

Test yourself

How does a lesson's starting code work in this project?
- Each lesson's starting code contains the previous lesson's solution
- Each lesson starts with an empty file
- There is no starting code; everything is written from scratch
- Starting code appears only in the final lesson
Show answer

Each lesson's starting code contains the previous lesson's solution — Correct. The starting code accumulates each step; you only add the new piece.
Match each variable to its role

:root

theme variables definition
--bg

panel background
--card-bg

card background
var()

call a variable

Next lesson: Sidebar and header

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies