CSS
Project final - Dashboard
Combine all parts and finalize the dashboard.
Project final: time to polish
We've reached the final lesson. We'll add two polish touches: transitions and section comments. Transitions make KPI cards lift slightly on hover and let table rows shift color smoothly.
Comments split the stylesheet into sections, so anyone opening the file sees what each part does at a glance. These are the finishing touches that wrap up the project.
Smooth changes with transition
To see a property change smoothly we use the transition declaration. Four pieces are needed: transition-property (which property), transition-duration (how long), transition-timing-function (which curve) and transition-delay (delay).
Instead of writing them one by one, the shorthand works: transition: transform 0.2s ease. Here the property is transform, the duration 0.2s, the curve ease. The transition fires when the card is hovered.
Tidy with section comments
As the stylesheet grows, splitting sections with comments makes it easier to read. A CSS comment is written as /* ... */; the browser ignores it, only the person reading the source sees it.
Put a heading comment before each section: theme variables, layout, KPI cards and data table. The file then makes sense at a glance.
Exercise Final touches: transitions and section comments
Add the following polish to the existing stylesheet. First, add a transition declaration to the .kpi-card block (e.g. transition: transform 0.2s ease). Then open a new .kpi-card:hover block and set transform: translateY(-2px). Also add a transition declaration to the .data-table tbody tr:hover block. Finally, add at least three section comments to the stylesheet (e.g. theme variables, layout, KPI cards, data table).
Show example solution
/* Sales Dashboard stylesheet - final version */
/* Theme variables */
:root {
--bg: #f5f7fa;
--card-bg: #ffffff;
}
/* Layout: grid with sidebar, header and main */
.dashboard {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
/* KPI cards: flex side by side, auto wrap */
.kpi-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.kpi-card {
background: var(--card-bg);
padding: 16px;
transition: transform 0.2s ease;
}
.kpi-card:hover {
transform: translateY(-2px);
}
/* Data table: border collapse, zebra and row hover */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: 10px;
border-bottom: 1px solid #e5e9f0;
text-align: left;
}
.data-table tbody tr:nth-child(even) {
background: #f9fafc;
}
.data-table tbody tr:hover {
background: #eaf2ff;
transition: background 0.2s ease;
}
Test yourself
-
Which timing function is usually best for a smooth UI transition?
- ease
- linear
- step-end
- cubic-bezier(0,1,1,0)
Show answer
ease — Correct. ease slows at the start and end and speeds up in the middle; the classic pick for UI transitions.
-
Transition the card's transform with 0.2s ease
.kpi-card {
background: var(--card-bg);
padding: 16px;
____;
}
.kpi-card:hover {
transform: translateY(-2px);
}
Show answer
.kpi-card {
background: var(--card-bg);
padding: 16px;
transition: transform 0.2s ease;
}
.kpi-card:hover {
transform: translateY(-2px);
}
-
Match each declaration to its purpose
- display: grid
- panel skeleton
- display: flex
- KPI cards
- border-collapse
- data table
- transition
- smooth change
Next lesson: Challenge - Animated hero
