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-childfor a zebra-striped table:hoverand transitions for row highlight
Ready? Let's start.
Project roadmap
We'll build the project step by step:
- Skeleton and theme: define theme with
:rootvariables, set up the panel skeleton. - Sidebar and header: place three regions with
display: gridandgrid-template-areas. - KPI cards: lay cards out with
display: flexand addgapbetween them. - Data table: merge borders with
border-collapseand 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