Full dashboard layout — sidebar + KPIs + charts + table

The complete data-science dashboard: sidebar nav, KPI row, 2-column charts, data table.

style.css v3.1

style.css — the CSS rules

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: sans-serif; background: #f5f5f5; }

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: #1a1a1a;
  color: #999;
  padding: 1.5rem 0;
}
.sidebar .logo {
  color: #a0c000;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0 1.5rem 1.5rem;
}
.sidebar a {
  display: block;
  color: #999;
  text-decoration: none;
  padding: 0.7rem 1.5rem;
  transition: all 0.15s;
}
.sidebar a:hover, .sidebar a.active {
  background: rgba(160,192,0,0.15);
  color: #a0c000;
  border-left: 3px solid #a0c000;
}

/* Main content */
.main {
  padding: 2rem;
  overflow: auto;
}

.main h1 { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* KPI row */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kpi {
  background: white;
  border-radius: 10px;
  padding: 1.2rem;
  border: 1px solid #e0e0e0;
}
.kpi .label { font-size: 0.82rem; color: #666; }
.kpi .value { font-size: 1.8rem; font-weight: 700; margin: 0.3rem 0; }
.kpi .change { font-size: 0.78rem; }
.kpi .change.up { color: #3fb950; }
.kpi .change.down { color: #f85149; }

/* Charts grid */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .charts-grid { grid-template-columns: 1fr; }
}
.chart-card {
  background: white;
  border-radius: 10px;
  padding: 1.2rem;
  border: 1px solid #e0e0e0;
}
.chart-card h3 { font-size: 0.95rem; margin-bottom: 1rem; }
.chart-card .chart-area {
  height: 200px;
  background: #fafafa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.85rem;
}

index.html — the HTML structure (what the CSS targets)

<div class="dashboard">
  <aside class="sidebar">
    <div class="logo">&#9889; ML Dash</div>
    <a href="#" class="active">Dashboard</a>
    <a href="#">Models</a>
    <a href="#">Datasets</a>
    <a href="#">Experiments</a>
    <a href="#">Settings</a>
  </aside>
  <main class="main">
    <h1>Dashboard</h1>
    <div class="kpi-row">
      <div class="kpi">
        <div class="label">Total Models</div>
        <div class="value">24</div>
        <div class="change up">&#9650; 3 new this week</div>
      </div>
      <div class="kpi">
        <div class="label">Avg Accuracy</div>
        <div class="value">91.4%</div>
        <div class="change up">&#9650; 2.1%</div>
      </div>
      <div class="kpi">
        <div class="label">Avg Latency</div>
        <div class="value">38ms</div>
        <div class="change down">&#9660; 12ms</div>
      </div>
      <div class="kpi">
        <div class="label">Active Jobs</div>
        <div class="value">3</div>
        <div class="change">2 training, 1 queued</div>
      </div>
    </div>
    <div class="charts-grid">
      <div class="chart-card">
        <h3>Accuracy Over Time</h3>
        <div class="chart-area">[ Line chart ]</div>
      </div>
      <div class="chart-card">
        <h3>Model Comparison</h3>
        <div class="chart-area">[ Bar chart ]</div>
      </div>
    </div>
  </main>
</div>

Live preview updates as you type

🧠 How it works

This is the COMPLETE dashboard pattern a data scientist needs: Grid: 220px sidebar + 1fr main. min-height: 100vh so the sidebar goes full height. Sidebar links: padding-left 1.5rem, border-left appears on active/hover — clear navigation. KPI row: repeat(auto-fit, minmax(180px, 1fr)) — responsive! 4 on desktop, 2 on tablet, 1 on mobile. Each KPI: label (small grey) + value (big bold) + change (green up / red down). Charts grid: 2 columns on desktop, 1 column on mobile (@media query). chart-area has a fixed height (200px) — all charts in the grid are the same size. Every card has the same border + border-radius + padding — visual consistency.

✏️ Try these changes

Change grid-template-columns: 220px 1fr to 280px 1fr
→ wider sidebar
Change the KPI minmax from 180px to 250px
→ fewer KPIs per row
Change the charts-grid from 1fr 1fr to 1fr 1fr 1fr
→ 3 charts per row
Change @media max-width: 768px to 1024px
→ charts stack earlier (on tablets)
Change the sidebar background to #0d1117
→ sidebar becomes darker (GitHub-style)

← Previous lab

Tabs — switch between panels

Next lab →

Responsive form page — centered card, mobile-friendly