Dashboard Project - CSS Practice

Dashboard Layout Project

Create a comprehensive dashboard with sidebar navigation, main content area, and widgets.

Project Overview

This project will guide you through building a modern dashboard layout using CSS Grid and Flexbox. You'll learn to structure a sidebar, main content, and responsive widgets.

Sidebar navigation
Main content area
Responsive widget grid
Modern design and accessibility

Estimated Time

Intermediate: 2-3 hours | Advanced: 1-2 hours

Difficulty Level: Intermediate

Step-by-Step Implementation

1 Create the HTML Structure

HTML Example

<div class="dashboard">
    <aside class="sidebar">
        <h2>Dashboard</h2>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
    </aside>
    <main class="main-content">
        <div class="widget-grid">
            <div class="widget">Widget 1</div>
            <div class="widget">Widget 2</div>
            <div class="widget">Widget 3</div>
            <div class="widget">Widget 4</div>
        </div>
    </main>
</div>

2 Add CSS for Layout & Design

Basic CSS Example

.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}
.sidebar {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 2rem 1rem;
    min-height: 100vh;
}
.sidebar h2 {
    margin-bottom: 2rem;
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: background 0.2s;
}
.sidebar a:hover {
    background: #f093fb;
    color: #333;
}
.main-content {
    padding: 2rem;
    background: #f8f9fa;
}
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.widget {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 2rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
}
@media (max-width: 900px) {
    .dashboard {
        grid-template-columns: 1fr;
    }
    .sidebar {
        min-height: auto;
        padding: 1rem;
        text-align: center;
    }
}

3 Add Widgets & Interactivity

Widget Example

<div class="widget">
    <h3>Sales</h3>
    <p>$12,000</p>
</div>

4 Test Responsiveness & Accessibility

                    Checklist
                    Test on mobile, tablet, and desktop
Check keyboard navigation and focus states
Use semantic HTML for dashboard and widgets
Ensure color contrast is accessible
Validate your HTML and CSS

                