How to Build a Responsive Admin Dashboard Using HTML, CSS & JavaScript 2026

How to Build a Responsive Admin Dashboard Using HTML, CSS & JavaScript

Creating a responsive admin dashboard is one of the best ways to improve your front-end development skills. It combines layout design, interactivity, and responsiveness — all key aspects of modern web development.

In this tutorial, we’ll go step-by-step on how to build a responsive admin dashboard using HTML, CSS, and JavaScript from scratch.

What You’ll Learn

By the end of this guide, you’ll understand how to:

Create a clean HTML structure for your dashboard
Use CSS Flexbox and Grid to design responsive layouts
Add interactivity with JavaScript (toggle sidebar, dark mode, etc.)
Make your dashboard mobile-friendly

Step 1: Set Up the Project Structure

Create a folder for your project and inside it, make the following files:

dashboard/
│
├── index.html
├── style.css
└── script.js

Step 2: HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard - CodingNepal</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- Google Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="dashboard-container">
<!-- Dashboard Sidebar -->
<aside class="dashboard-sidebar" id="dashboardSidebar">
<div class="dashboard-brand">
<button class="dashboard-sidebar-toggle">
<span class="material-symbols-rounded">menu</span>
</button>
<a class="logo">My Dashboard</a>
</div>
<nav class="dashboard-nav">
<div class="dashboard-nav-section">
<a href="#" class="dashboard-nav-item active" data-view="overview">
<span class="nav-icon material-symbols-rounded">dashboard</span>
<span class="nav-label">Overview</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="projects">
<span class="nav-icon material-symbols-rounded">folder</span>
<span class="nav-label">Projects</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="tasks">
<span class="nav-icon material-symbols-rounded">checklist</span>
<span class="nav-label">Tasks</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="reports">
<span class="nav-icon material-symbols-rounded">bar_chart</span>
<span class="nav-label">Reports</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="settings">
<span class="nav-icon material-symbols-rounded">settings</span>
<span class="nav-label">Settings</span>
</a>
</div>
</nav>
<!-- Back to Site Button -->
<div class="sidebar-footer">
<a href="#" class="btn btn-secondary sidebar-back-button">
<span class="material-symbols-rounded">home</span>
<span class="btn-label">Back to Site</span>
</a>
</div>
</aside>
<div class="dashboard-sidebar-overlay" id="dashboardSidebarOverlay"></div>
<!-- Dashboard Main Content -->
<main class="dashboard-main">
<!-- Dashboard Header -->
<header class="dashboard-header">
<!-- Header Content -->
<div class="dashboard-header-content">
<button class="dashboard-sidebar-toggle">
<span class="material-symbols-rounded">menu</span>
</button>
<h1 class="dashboard-header-title" id="dashboardTitle">Overview</h1>
</div>
<!-- Search Container -->
<div class="search-container" id="searchContainer">
<span class="search-icon material-symbols-rounded">search</span>
<input type="search" class="search-input form-input" placeholder="Search projects, tasks, reports..." id="searchInput" />
<button class="search-close btn" id="searchClose">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<!-- Header Actions -->
<div class="dashboard-header-actions">
<!-- Mobile Search Button -->
<button class="mobile-search-btn btn btn-ghost" id="mobileSearchBtn">
<span class="material-symbols-rounded">search</span>
</button>
<!-- Notification Button -->
<div class="notification-button">
<span class="material-symbols-rounded">notifications</span>
<div class="notification-badge">3</div>
</div>
<!-- User Profile -->
<div class="user-menu" id="userMenu">
<div class="user-menu-trigger" id="user-menu-trigger">
<div class="user-avatar-small">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face&auto=format" alt="User Avatar" />
</div>
</div>
<div class="user-menu-dropdown">
<a href="#" class="user-menu-item">
<span class="icon material-symbols-rounded">person</span>
<span>Profile</span>
</a>
<!-- Theme Toggle inside dropdown -->
<div class="user-menu-item theme-item">
<span class="icon material-symbols-rounded">palette</span>
<div class="theme-toggle" id="theme-toggle">
<div class="theme-option active" data-theme="light">Light</div>
<div class="theme-option" data-theme="dark">Dark</div>
</div>
</div>
<a href="#" class="user-menu-item">
<span class="icon material-symbols-rounded">logout</span>
<span>Sign Out</span>
</a>
</div>
</div>
</div>
</header>
<!-- Dashboard Content -->
<div class="dashboard-content">
<!-- Overview View -->
<div class="dashboard-view active" id="overview">
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Total Projects</div>
<div class="stat-card-icon primary">
<span class="material-symbols-rounded">folder</span>
</div>
</div>
<div class="stat-card-value">12</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+2 this week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Completed Tasks</div>
<div class="stat-card-icon success">
<span class="material-symbols-rounded">check_circle</span>
</div>
</div>
<div class="stat-card-value">48</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+15% from last week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Pending Tasks</div>
<div class="stat-card-icon warning">
<span class="material-symbols-rounded">schedule</span>
</div>
</div>
<div class="stat-card-value">23</div>
<div class="stat-card-change negative">
<span class="material-symbols-rounded">trending_down</span>
<span>-3 from last week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Team Members</div>
<div class="stat-card-icon info">
<span class="material-symbols-rounded">group</span>
</div>
</div>
<div class="stat-card-value">8</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+1 new member</span>
</div>
</div>
</div>
<!-- Charts -->
<div class="chart-grid">
<div class="chart-card">
<div class="chart-card-header">
<h3 class="chart-card-title">Project Progress</h3>
<p class="chart-card-subtitle">Completion rate over time</p>
</div>
<div class="chart-container">
<canvas id="progressChart"></canvas>
</div>
</div>
<div class="chart-card">
<div class="chart-card-header">
<h3 class="chart-card-title">Task Distribution</h3>
<p class="chart-card-subtitle">Tasks by category</p>
</div>
<div class="chart-container">
<canvas id="categoryChart"></canvas>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="dashboard-table-container">
<div class="dashboard-table-header">
<h3 class="dashboard-table-title">Recent Projects</h3>
<a href="#" class="btn btn-secondary">View All</a>
</div>
<table class="dashboard-table">
<thead>
<tr>
<th>Project</th>
<th>Progress</th>
<th>Status</th>
<th>Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="project-title-cell">
<div class="project-icon">
<span class="material-symbols-rounded">web</span>
</div>
<div class="project-info">
<div class="project-title-text">Website Redesign</div>
<div class="project-meta-text">Frontend • 5 tasks</div>
</div>
</div>
</td>
<td>85%</td>
<td><span class="status-badge success">In Progress</span></td>
<td>Dec 15, 2024</td>
</tr>
<tr>
<td>
<div class="project-title-cell">
<div class="project-icon">
<span class="material-symbols-rounded">phone_android</span>
</div>
<div class="project-info">
<div class="project-title-text">Mobile App</div>
<div class="project-meta-text">Mobile • 8 tasks</div>
</div>
</div>
</td>
<td>60%</td>
<td><span class="status-badge warning">In Progress</span></td>
<td>Jan 20, 2025</td>
</tr>
<tr>
<td>
<div class="project-title-cell">
<div class="project-icon">
<span class="material-symbols-rounded">database</span>
</div>
<div class="project-info">
<div class="project-title-text">Database Migration</div>
<div class="project-meta-text">Backend • 3 tasks</div>
</div>
</div>
</td>
<td>100%</td>
<td><span class="status-badge success">Completed</span></td>
<td>Nov 30, 2024</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Projects View -->
<div class="dashboard-view" id="projects">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">folder</span>
</div>
<h3 class="empty-state-title">Projects</h3>
<p class="empty-state-description">Manage your projects here. Create new projects, track progress, and collaborate with your team.</p>
</div>
</div>
<!-- Tasks View -->
<div class="dashboard-view" id="tasks">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">checklist</span>
</div>
<h3 class="empty-state-title">Tasks</h3>
<p class="empty-state-description">View and manage all your tasks. Create new tasks, set priorities, and track completion status.</p>
</div>
</div>
<!-- Reports View -->
<div class="dashboard-view" id="reports">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">bar_chart</span>
</div>
<h3 class="empty-state-title">Reports</h3>
<p class="empty-state-description">Generate detailed reports and analytics. View project performance, team productivity, and time tracking data.</p>
</div>
</div>
<!-- Settings View -->
<div class="dashboard-view" id="settings">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">settings</span>
</div>
<h3 class="empty-state-title">Settings</h3>
<p class="empty-state-description">Configure your dashboard preferences, manage team members, and customize your workspace.</p>
</div>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="script.js"></script>
</body>
</html>

Step 3: CSS Styling

Now open style.css and add styles for layout and responsiveness.

/* ===================================
CSS VARIABLES
=================================== */
:root {
/* Primary Colors */
--color-primary: #8b5cf6;
--color-primary-hover: #7c3aed;
--color-primary-50: rgba(139, 92, 246, 0.05);
--color-primary-100: rgba(139, 92, 246, 0.1);
--color-primary-200: rgba(139, 92, 246, 0.2);
/* Semantic Colors */
--color-success: #10b981;
--color-success-50: rgba(16, 185, 129, 0.05);
--color-success-100: rgba(16, 185, 129, 0.1);
--color-warning: #f59e0b;
--color-warning-50: rgba(245, 158, 11, 0.05);
--color-warning-100: rgba(245, 158, 11, 0.1);
--color-error: #ef4444;
--color-error-50: rgba(239, 68, 68, 0.05);
--color-error-100: rgba(239, 68, 68, 0.1);
--color-info: #3b82f6;
--color-info-50: rgba(59, 130, 246, 0.05);
--color-info-100: rgba(59, 130, 246, 0.1);
/* Text Colors */
--color-text: #1e293b;
--color-text-secondary: #475569;
--color-text-muted: #94a3b8;
/* Background Colors */
--color-background: #ffffff;
--color-surface: #f8fafc;
--color-surface-hover: #f1f5f9;
/* Border Colors */
--color-border: #e2e8f0;
/* Typography */
--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.75rem;
--text-4xl: 2rem;
/* Font Weights */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-base: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
/* Layout */
--sidebar-width: 260px;
--sidebar-collapsed-width: 80px;
--header-height: 64px;
/* Transitions */
--transition: 0.2s ease;
}
/* Dark Theme */
[data-theme="dark"] {
--color-text: #ffffff;
--color-text-secondary: #c0c0c0;
--color-text-muted: #838383;
--color-background: #111214;
--color-surface: #1f1f1f;
--color-surface-hover: #262626;
--color-border: #2d2d2d;
}
/* ===================================
RESET & BASE STYLES
=================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-primary);
background: var(--color-background);
color: var(--color-text);
line-height: 1.6;
font-size: var(--text-base);
font-weight: var(--weight-normal);
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: inherit;
font-size: inherit;
border: none;
background: none;
cursor: pointer;
}
.active > .material-symbols-rounded {
color: var(--color-primary);
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
* {
scrollbar-color: var(--color-text-muted) transparent;
}
/* ===================================
BUTTON COMPONENTS
=================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border: 1px solid transparent;
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: var(--color-primary);
color: white;
}
.btn-primary:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--color-surface-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* ===================================
DASHBOARD LAYOUT
=================================== */
.dashboard-container {
display: flex;
height: 100vh;
overflow: hidden;
}
/* Sidebar */
.dashboard-sidebar {
width: var(--sidebar-width);
background: var(--color-background);
display: flex;
flex-direction: column;
position: sticky;
left: 0;
top: 0;
height: 100vh;
z-index: 1000;
transition: var(--transition);
}
.dashboard-sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}
.dashboard-brand {
padding: var(--space-md) calc(var(--space-lg) - 2px);
display: flex;
align-items: center;
gap: var(--space-md);
height: var(--header-height);
}
.dashboard-sidebar-toggle {
display: flex;
align-items: center;
color: var(--color-text);
padding: var(--space-sm);
border-radius: var(--radius-lg);
transition: var(--transition);
}
.dashboard-sidebar-toggle:hover {
background: var(--color-surface-hover);
}
.dashboard-sidebar .logo {
font-size: var(--text-lg);
white-space: nowrap;
font-weight: var(--weight-semibold);
color: var(--color-text);
transition: var(--transition);
}
.dashboard-sidebar.collapsed .logo {
opacity: 0;
pointer-events: none;
}
.dashboard-nav {
flex: 1;
padding: var(--space-md) var(--space-xs);
}
.dashboard-nav-section {
display: flex;
flex-direction: column;
gap: 2px;
}
.dashboard-nav-item {
display: flex;
align-items: center;
padding: var(--space-sm) var(--space-md);
color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
margin: 2px var(--space-sm);
transition: var(--transition);
cursor: pointer;
}
.dashboard-nav-item .nav-icon {
color: var(--color-text-secondary);
margin-right: var(--space-base);
font-size: var(--text-2xl);
flex-shrink: 0;
}
.dashboard-nav-item:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.dashboard-nav-item.active {
background: var(--color-surface-hover);
color: var(--color-text);
font-weight: var(--weight-medium);
}
.dashboard-sidebar .nav-label {
transition: var(--transition);
}
.dashboard-sidebar.collapsed .nav-label {
opacity: 0;
pointer-events: none;
}
.sidebar-footer {
padding: var(--space-md);
}
.sidebar-back-button {
width: 100%;
justify-content: flex-start;
}
.dashboard-sidebar.collapsed .sidebar-back-button .btn-label {
opacity: 0;
pointer-events: none;
}
.dashboard-sidebar.collapsed .sidebar-back-button {
padding-left: 12px;
}
.dashboard-sidebar-overlay {
opacity: 0;
pointer-events: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
transition: var(--transition);
}
/* Main Content */
.dashboard-main {
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* Header */
.dashboard-header {
height: var(--header-height);
background: var(--color-background);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-lg);
gap: var(--space-md);
}
.dashboard-header-content {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dashboard-header .dashboard-sidebar-toggle {
display: none;
}
.dashboard-header-title {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
/* Search Container */
.search-container {
display: flex;
align-items: center;
max-width: 500px;
width: 100%;
margin: 0 var(--space-2xl);
position: relative;
}
.search-icon {
position: absolute;
left: 16px;
z-index: 10;
pointer-events: none;
color: var(--color-text-secondary);
}
.search-input {
width: 100%;
padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-2xl);
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text);
font-size: var(--text-sm);
transition: var(--transition);
height: 44px;
font-family: var(--font-primary);
}
.search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-100);
}
.search-input::placeholder {
color: var(--color-text-muted);
}
.search-close {
position: absolute;
right: var(--space-sm);
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: var(--radius-lg);
background: transparent;
color: var(--color-text-muted);
display: none;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.search-close:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.search-close.show {
display: flex;
}
.mobile-search-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
background: transparent;
color: var(--color-text-secondary);
transition: var(--transition);
}
.mobile-search-btn:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.dashboard-header-actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* Theme Toggle (inside dropdown) */
.theme-toggle {
display: flex;
gap: var(--space-xs);
margin-left: auto;
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: var(--space-xs);
align-items: center;
justify-content: center;
cursor: pointer;
}
.theme-option {
padding: var(--space-xs) var(--space-base);
border-radius: var(--radius-full);
font-size: var(--text-xs);
cursor: pointer;
transition: var(--transition);
}
.theme-option:not(.active):hover {
background-color: var(--color-primary-200);
}
.theme-option.active {
background: var(--color-primary);
color: white;
}
/* Notification Button */
.notification-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
cursor: pointer;
user-select: none;
transition: var(--transition);
color: var(--color-text-secondary);
}
.notification-button:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.notification-badge {
position: absolute;
top: 3px;
right: 3px;
background: var(--color-error);
color: white;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 2px 6px;
border-radius: var(--radius-full);
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
/* User Menu */
.user-menu {
position: relative;
}
.user-menu-trigger {
display: flex;
align-items: center;
gap: var(--space-sm);
height: 36px;
width: 36px;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
}
.user-menu-trigger:hover {
transform: scale(1.1);
}
.user-avatar-small {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
}
.user-avatar-small img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-full);
}
.user-avatar-small .material-symbols-rounded {
font-size: var(--text-lg);
}
.user-menu-dropdown {
position: absolute;
top: calc(100% + var(--space-sm));
right: 0;
z-index: 1000;
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
min-width: 200px;
padding: var(--space-sm);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
}
.user-menu.active .user-menu-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-menu-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-base);
color: var(--color-text);
text-decoration: none;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
transition: var(--transition);
cursor: pointer;
}
.user-menu-item:not(.theme-item):hover {
background: var(--color-surface-hover);
}
.user-menu-item.theme-item {
gap: 0;
}
.user-menu-item .icon {
font-size: 1.4rem;
}
/* Content Area */
.dashboard-content {
flex: 1;
overflow-y: auto;
padding: var(--space-xl);
border-top-left-radius: var(--radius-xl);
background: var(--color-surface);
}
/* Views */
.dashboard-view {
display: none;
}
.dashboard-view.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Stats Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.stat-card {
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-lg);
transition: var(--transition);
}
.stat-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.stat-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
}
.stat-card-title {
font-size: var(--text-sm);
color: var(--color-text-secondary);
font-weight: var(--weight-medium);
}
.stat-card-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xl);
}
.stat-card-icon.primary {
background: var(--color-primary-100);
color: var(--color-primary);
}
.stat-card-icon.success {
background: var(--color-success-100);
color: var(--color-success);
}
.stat-card-icon.warning {
background: var(--color-warning-100);
color: var(--color-warning);
}
.stat-card-icon.info {
background: var(--color-info-100);
color: var(--color-info);
}
.stat-card-value {
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.stat-card-change {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
}
.stat-card-change.positive {
color: var(--color-success);
}
.stat-card-change.negative {
color: var(--color-error);
}
/* Chart Cards */
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.chart-card {
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-lg);
}
.chart-card-header {
margin-bottom: var(--space-lg);
}
.chart-card-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.chart-card-subtitle {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.chart-container {
position: relative;
height: 300px;
}
/* Table Styles */
.dashboard-table-container {
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
}
.dashboard-table-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.dashboard-table-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.dashboard-table {
width: 100%;
border-collapse: collapse;
}
.dashboard-table thead {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.dashboard-table th {
padding: var(--space-md) var(--space-lg);
text-align: left;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dashboard-table td {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
}
.dashboard-table tbody tr:last-child td {
border-bottom: none;
}
.dashboard-table tbody tr:hover {
background: var(--color-surface-hover);
}
.project-title-cell {
display: flex;
align-items: center;
gap: var(--space-md);
max-width: 300px;
}
.project-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
background: var(--color-primary-100);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.project-info {
flex: 1;
min-width: 0;
}
.project-title-text {
font-weight: var(--weight-medium);
color: var(--color-text);
margin-bottom: 2px;
}
.project-meta-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.status-badge {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
}
.status-badge.success {
background: var(--color-success-100);
color: var(--color-success);
}
.status-badge.warning {
background: var(--color-warning-100);
color: var(--color-warning);
}
/* Empty State */
.empty-state {
text-align: center;
padding: var(--space-2xl) var(--space-md);
}
.empty-state-icon {
width: 80px;
height: 80px;
background: var(--color-primary-50);
color: var(--color-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
}
.empty-state-icon .material-symbols-rounded {
font-size: var(--text-4xl);
}
.empty-state-title {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.empty-state-description {
color: var(--color-text-secondary);
margin-bottom: var(--space-xl);
}
/* ===================================
RESPONSIVE DESIGN
=================================== */
/* Tablet and Mobile */
@media (max-width: 1024px) {
.dashboard-sidebar {
position: fixed;
top: 0;
left: -100%;
height: 100%;
z-index: 1000;
width: var(--sidebar-width);
transition: left 0.3s ease;
}
.dashboard-sidebar.collapsed {
left: 0;
}
.dashboard-sidebar.collapsed :is(.logo, .nav-label, .nav-icon, .dashboard-nav-title, .sidebar-back-button .btn-label) {
opacity: 1;
pointer-events: auto;
}
.dashboard-sidebar.collapsed .sidebar-back-button {
padding-left: var(--space-md);
}
.dashboard-header {
padding: 0 var(--space-md);
}
.dashboard-brand {
gap: var(--space-sm);
}
.dashboard-header .dashboard-sidebar-toggle {
display: flex;
}
/* Search responsive styles */
.search-container {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
height: var(--header-height);
background: var(--color-background);
border-bottom: 1px solid var(--color-border);
z-index: 1001;
margin: 0;
padding: 0 var(--space-md);
display: none;
align-items: center;
gap: var(--space-sm);
}
.search-container.mobile-active {
display: flex;
}
.search-container .search-close {
display: flex;
position: static;
transform: none;
height: 44px;
width: 44px;
background: var(--color-surface-hover);
}
.search-icon {
left: 30px;
}
.mobile-search-btn {
display: flex;
}
/* Sidebar Overlay Mobile Behavior */
.dashboard-sidebar-overlay.active {
opacity: 1;
pointer-events: auto;
}
.dashboard-sidebar {
position: fixed;
top: 0;
left: -100%;
height: 100%;
z-index: 1000;
width: var(--sidebar-width);
transition: left 0.3s ease;
}
.dashboard-sidebar.collapsed {
left: 0;
width: var(--sidebar-width);
}
.dashboard-content {
padding: var(--space-md);
border-top-left-radius: 0;
}
.chart-grid {
grid-template-columns: 1fr;
}
}
/* Mobile */
@media (max-width: 768px) {
.dashboard-header {
padding: 0 var(--space-md);
}
.dashboard-content {
padding: var(--space-base);
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.chart-grid {
grid-template-columns: 1fr;
}
.dashboard-table-container {
overflow-x: auto;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.dashboard-table-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
}
/* Focus Styles */
*:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-primary);
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

Step 4: JavaScript Interactivity

Finally, open script.js to handle sidebar toggling.

// DOM Elements
const dashboardSidebar = document.getElementById("dashboardSidebar");
const userMenu = document.getElementById("userMenu");
const userMenuTrigger = document.getElementById("user-menu-trigger");
const userMenuDropdown = document.querySelector(".user-menu-dropdown");
const themeToggle = document.getElementById("theme-toggle");
const dashboardViews = document.querySelectorAll(".dashboard-view");
const dashboardNavItems = document.querySelectorAll(".dashboard-nav-item");
const dashboardTitle = document.getElementById("dashboardTitle");
const dashboardSidebarOverlay = document.getElementById("dashboardSidebarOverlay");
const searchContainer = document.getElementById("searchContainer");
const searchInput = document.getElementById("searchInput");
const searchClose = document.getElementById("searchClose");
const mobileSearchBtn = document.getElementById("mobileSearchBtn");
// State
let sidebarCollapsed = false;
let currentView = "overview";
// ===================================
// INITIALIZATION
// ===================================
document.addEventListener("DOMContentLoaded", function () {
initTheme();
initThemeToggle();
initSidebar();
initUserMenu();
initNavigation();
initSearch();
initCharts();
});
// ===================================
// SIDEBAR FUNCTIONALITY
// ===================================
function initSidebar() {
// Load saved sidebar state
sidebarCollapsed = localStorage.getItem("dashboard-sidebar-collapsed") === "true";
dashboardSidebar.classList.toggle("collapsed", sidebarCollapsed);
// Sidebar toggle functionality
document.querySelectorAll(".dashboard-sidebar-toggle").forEach((toggle) => {
toggle.addEventListener("click", toggleSidebar);
});
// Sidebar overlay functionality
dashboardSidebarOverlay?.addEventListener("click", closeSidebar);
}
function toggleSidebar() {
sidebarCollapsed = !sidebarCollapsed;
const isMobile = window.innerWidth <= 1024;
if (isMobile) {
// Mobile behavior - toggle sidebar and overlay together
const isOpen = dashboardSidebar.classList.contains("collapsed");
dashboardSidebar.classList.toggle("collapsed", !isOpen);
dashboardSidebarOverlay?.classList.toggle("active", !isOpen);
} else {
// Desktop behavior
dashboardSidebar.classList.toggle("collapsed", sidebarCollapsed);
}
localStorage.setItem("dashboard-sidebar-collapsed", sidebarCollapsed.toString());
}
function closeSidebar() {
if (window.innerWidth <= 1024) {
dashboardSidebar.classList.remove("collapsed");
dashboardSidebarOverlay?.classList.remove("active");
}
}
// ===================================
// USER MENU FUNCTIONALITY
// ===================================
function initUserMenu() {
if (!userMenuTrigger || !userMenu) return;
userMenuTrigger.addEventListener("click", (e) => {
e.stopPropagation();
userMenu.classList.toggle("active");
});
// Close menu when clicking outside or pressing escape
document.addEventListener("click", (e) => {
if (!userMenu.contains(e.target)) {
userMenu.classList.remove("active");
}
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && userMenu.classList.contains("active")) {
userMenu.classList.remove("active");
}
});
}
// ===================================
// NAVIGATION FUNCTIONALITY
// ===================================
function initNavigation() {
dashboardNavItems.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
const viewId = item.getAttribute("data-view");
if (viewId) switchView(viewId);
});
});
}
function switchView(viewId) {
// Update active nav item
dashboardNavItems.forEach((item) => {
item.classList.toggle("active", item.getAttribute("data-view") === viewId);
});
// Hide all views and show selected one
dashboardViews.forEach((view) => view.classList.remove("active"));
const targetView = document.getElementById(viewId);
if (targetView) {
targetView.classList.add("active");
currentView = viewId;
updatePageTitle(viewId);
}
// Close sidebar on mobile after navigation
if (window.innerWidth <= 1024) closeSidebar();
}
function updatePageTitle(viewId) {
const titles = {
overview: "Overview",
projects: "Projects",
tasks: "Tasks",
reports: "Reports",
settings: "Settings",
};
if (dashboardTitle) {
dashboardTitle.textContent = titles[viewId] || "Dashboard";
}
}
// ===================================
// THEME FUNCTIONALITY
// ===================================
function initTheme() {
// Load saved theme
const savedTheme = localStorage.getItem("dashboard-theme") || "light";
document.documentElement.setAttribute("data-theme", savedTheme);
// Update theme toggle UI
updateThemeToggleUI(savedTheme);
}
function initThemeToggle() {
if (!themeToggle) return;
themeToggle.querySelectorAll(".theme-option").forEach((option) => {
option.addEventListener("click", (e) => {
e.stopPropagation();
setTheme(option.getAttribute("data-theme"));
});
});
}
function setTheme(theme) {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("dashboard-theme", theme);
updateThemeToggleUI(theme);
}
function updateThemeToggleUI(theme) {
if (!themeToggle) return;
themeToggle.querySelectorAll(".theme-option").forEach((option) => {
option.classList.toggle("active", option.getAttribute("data-theme") === theme);
});
}
// ===================================
// SEARCH FUNCTIONALITY
// ===================================
function initSearch() {
mobileSearchBtn?.addEventListener("click", () => {
searchContainer.classList.add("mobile-active");
searchInput.focus();
});
searchClose?.addEventListener("click", () => {
searchContainer.classList.remove("mobile-active");
searchInput.value = "";
});
}
// ===================================
// CHART INITIALIZATION
// ===================================
function initCharts() {
initProgressChart();
initCategoryChart();
}
function initProgressChart() {
const ctx = document.getElementById("progressChart");
if (!ctx) return;
new Chart(ctx, {
type: "line",
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "Project Progress",
data: [20, 35, 45, 60, 70, 85],
borderColor: "#8b5cf6",
backgroundColor: "rgba(139, 92, 246, 0.1)",
borderWidth: 2,
fill: true,
tension: 0.4,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
y: {
beginAtZero: true,
max: 100,
ticks: { callback: (value) => value + "%" },
},
},
},
});
}
function initCategoryChart() {
const ctx = document.getElementById("categoryChart");
if (!ctx) return;
new Chart(ctx, {
type: "doughnut",
data: {
labels: ["Frontend", "Backend", "Mobile", "DevOps"],
datasets: [
{
data: [35, 25, 20, 20],
backgroundColor: ["#8b5cf6", "#10b981", "#f59e0b", "#ef4444"],
borderWidth: 0,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "bottom",
labels: {
padding: 20,
usePointStyle: true,
},
},
},
},
});
}

Conclusion

Building a responsive admin dashboard with HTML, CSS, and JavaScript is an excellent way to strengthen your front-end development skills. You’ve learned how to create a clean structure, apply modern CSS layouts using Flexbox and Grid, and add interactivity with JavaScript for mobile responsiveness.

This project serves as a perfect foundation for more advanced features like data visualization, dynamic charts, and real-time analytics. Whether you’re managing a web app, tracking business metrics, or just improving your UI skills, understanding how to build a dashboard from scratch gives you complete control over both design and functionality.

Keep experimenting — customize colors, add animations, integrate APIs, or even convert this into a React or Vue app. Every small improvement will sharpen your ability to create professional, responsive web interfaces.

💡 The more dashboards you build, the better you understand user experience, layout balance, and responsive design principles — key traits of a great front-end developer.
Compiled by Er. Basant Kumar Yadav

Post Views: 141

Table of Contents