Project 4 — Dashboard

1. Learning Objectives

In this project guide, you will build a complex admin Dashboard Layout. By the end of this project, you will be able to:

• Create a 2-column page layout with a sticky sidebar panel and a scrollable content area.
• Structure a grid of statistical indicator widgets using CSS Grid.
• Design clean, responsive data tables with overflow scroll containers.
• Use CSS calculations (calc()) to set panel dimensions.
• Implement responsive breakpoints to adapt layouts for mobile screens.

2. What We Are Building & Design System

We are building a responsive dashboard for a SaaS platform. The dashboard features:

• Sidebar Menu (Left Column): A fixed navigation panel that remains visible as the user scrolls.
• Header Panel (Top): A header showing page titles and profile icons.
• Main Dashboard Area: A responsive grid containing statistical indicator cards (KPIs), charts, and a recent activities data table.

3. Step-by-Step Implementation Guide

Step 1: HTML Semantic structure

Organize the top-level layout structure. Use an <aside> element for the sidebar menu, and group the header and content panel inside a wrapper container:

Step 2: Flexbox Layout Setup

Align the sidebar and content columns using Flexbox. Set the sidebar width to a fixed 240px and let the content area fill the remaining space using flex: 1:

Step 3: Responsive Data Tables

To prevent wide data tables from breaking layouts on mobile screens, wrap tables in a container with horizontal scroll enabled (overflow-x: auto):

4. Full Working Code

Save this self-contained code block as dashboard.html to test the responsive dashboard layout:

5. Reviewing the Build / Self-Correction Checks

Verify your layout handles common web layout constraints:

• Check for viewport layout shifts: Verify that content area components do not spill out horizontally on mobile views. Wrap wide elements in overflow scroll container cards.
• Test sidebar responsive transitions: Verify that the sidebar wraps horizontally on mobile screens without overlapping header panels or dashboard content panels.
• Test scrolling behaviors: Verify that scrolling the content body leaves the left sidebar menu static in place on large screen resolutions.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this dashboard, you have combined complex Flexbox column layouts, CSS Grid KPI cards, and responsive overflow-x table scroll configurations.

• Next, proceed to **Project 5 — Responsive Website** to build a responsive site using CSS custom variables and media queries.