Project 30: Admin Dashboard

CSS Stylist

Builds on these lessons

Ai Generating With Claude Ai Generating With Chatgpt Ai Refactoring Ai Optimization Ai Debugging Ai Design To Css Ai Accessibility Review Ai Performance Review Final Project

Step 1 of 2

Project

Assembling the Dashboard Styles

This is the capstone: combine the whole month's techniques into one real stylesheet. Lay out .admin-shell as a grid with a fixed sidebar column and a fluid main column, style metric cards with the shadow/border patterns from Day 11, and drive every color through the design tokens from Day 26.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

:root {
  --color-brand: #0ea5e9;
  --color-bg: #f9fafb;
  --color-text: #111827;
}

.admin-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
}

.metric-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

← Previous