Ever wanted to create a good-looking dashboard design for your website dashboard? You’re in the right place! Today, I’ll show you how to build an awesome dashboard using simple web tools. Whether you’re new to web design or just looking for fresh ideas, this guide is for you.
What Makes This Dashboard Design Special?
Think of this dashboard as your website’s control center. It’s like having all your important info on a clean, organized desk. You get:
- A neat sidebar menu that’s easy to use
- Cool-looking charts that show your data
- A space to track what’s happening
- A calendar for upcoming events
- A design that looks good on phones and computers
Let’s Break It Down The Website Dashboard
The Menu Bar
We’ve kept things simple with a sidebar that uses icons. When you hover over an icon, it tells you what it does. It’s like having a set of labeled buttons that are always within reach.
Charts That Tell Stories
We’ve used three different types of charts to show information:
- A line chart that shows how money comes in over time
- A bar chart for daily orders
- A round chart (like a donut) that shows overall earnings
The best part? These charts are interactive – hover over them, and they’ll show you the exact numbers.
Colors That Work Together
We picked colors that are easy on the eyes and work well together. The main color is a nice shade of purple (#6366f1), and we’ve used soft grays for the background. It’s like choosing paint colors for a room – they need to match and feel comfortable to look at.
Works on All Devices
Whether you’re on your phone, tablet, or computer, the dashboard adjusts to fit your screen. It’s like having a rubber band that stretches and shrinks but keeps its shape.
How to Use This Code
- Copy the HTML file (it’s like the skeleton)
- Add the CSS file (this makes it pretty)
- Include Chart.js (this makes the charts work)
- Change the colors and text to match your style
Making It Your Own
Want to customize it? Here are some easy changes you can make:
- Change the colors in the CSS file
- Update the chart data with your numbers
- Add your own icons to the sidebar
- Put in your team’s profile pictures
Source code
If you like this design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML and the other is JS after creating these files, paste the code provided below.
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Enhanced Dashboard</title> <link rel="stylesheet" href="style.css" /> <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" /> </head> <body> <div class="dashboard"> <div class="sidebar"> <div class="sidebar-icon active" data-tooltip="Home"> <i class="bx bx-home"></i> </div> <div class="sidebar-icon" data-tooltip="Dashboard"> <i class="bx bx-grid-alt"></i> </div> <div class="sidebar-icon" data-tooltip="Projects"> <i class="bx bx-briefcase"></i> </div> <div class="sidebar-icon" data-tooltip="Payments"> <i class="bx bx-credit-card"></i> </div> <div class="sidebar-icon" data-tooltip="Analytics"> <i class="bx bx-bar-chart"></i> </div> <div class="sidebar-icon" data-tooltip="Settings"> <i class="bx bx-cog"></i> </div> <div class="sidebar-icon" data-tooltip="Help"> <i class="bx bx-help-circle"></i> </div> <div class="sidebar-icon" data-tooltip="Logout"> <i class="bx bx-log-in-circle"></i> </div> </div> <div class="main-content"> <div class="header"> <h1>Dashboard</h1> <div class="search-bar"> <span>🔍</span> <input type="text" placeholder="Search" /> </div> </div> <div class="stats"> <div class="stat-card"> <h3>Total Income</h3> <div class="stat-value"> $1200 <span>+45%</span> </div> </div> <div class="stat-card"> <h3>Total Expense</h3> <div class="stat-value"> 4.500K <span>+45%</span> </div> </div> <div class="stat-card"> <h3>Total Bonus</h3> <div class="stat-value"> 6.100k <span>+45%</span> </div> </div> </div> <div class="chart-container"> <canvas id="mainChart"></canvas> </div> <div class="bottom-cards"> <div class="card"> <div class="card-header"> <h3>Order Statistics</h3> <div class="more-button">⋮</div> </div> <canvas id="orderChart"></canvas> </div> <div class="card"> <div class="card-header"> <h3>Earnings Overview</h3> <div class="more-button">⋮</div> </div> <canvas id="earningsChart"></canvas> </div> </div> </div> <div class="right-sidebar"> <div class="profile"> <div class="profile-image"> <img src="images/profile.jpg" alt="Profile Image" /> </div> <div class="profile-info"> <h3>Ghulam</h3> <p>Product Designer</p> </div> </div> <div class="activity-list"> <h3>Recent Activities</h3> <div class="activity-item"> <div class="activity-image"> <img src="images/user-1.jpg" alt="Profile Image" /> </div> <div class="activity-info"> <h4>Mike Lake</h4> <p>Backend Developer</p> <p>5 Mins ago</p> </div> </div> <div class="activity-item"> <div class="activity-image"> <img src="images/user-2.jpg" alt="Profile Image" /> </div> <div class="activity-info"> <h4>Sarah Wilson</h4> <p>UI Designer</p> <p>15 Mins ago</p> </div> </div> </div> <div class="upcoming-events"> <h3>Upcoming Events</h3> <div class="event-item"> <div class="event-date"> <div class="day">10</div> <div class="weekday">Wed</div> </div> <div class="event-info"> <h4>Top Management meeting</h4> <p>With team and CEO</p> </div> </div> <div class="event-item"> <div class="event-date"> <div class="day">15</div> <div class="weekday">Mon</div> </div> <div class="event-info"> <h4>Product Review</h4> <p>Monthly review</p> </div> </div> <div class="event-item"> <div class="event-date"> <div class="day">10</div> <div class="weekday">Wed</div> </div> <div class="event-info"> <h4>Top Management meeting</h4> <p>With team and CEO</p> </div> </div> <div class="event-item"> <div class="event-date"> <div class="day">15</div> <div class="weekday">Mon</div> </div> <div class="event-info"> <h4>Product Review</h4> <p>Monthly review</p> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Get chart contexts const mainCtx = document.getElementById("mainChart").getContext("2d"); const orderCtx = document.getElementById("orderChart").getContext("2d"); const earningsCtx = document .getElementById("earningsChart") .getContext("2d"); // Common options const commonOptions = { responsive: true, maintainAspectRatio: false, devicePixelRatio: 2, interaction: { mode: "index", intersect: false, }, plugins: { tooltip: { enabled: true, backgroundColor: "#1e293b", padding: 12, titleFont: { size: 14 }, bodyFont: { size: 13 }, }, legend: { display: false }, }, }; // Main Chart new Chart(mainCtx, { type: "line", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "Revenue", data: [1500, 2200, 1800, 2954, 2600, 3100], borderColor: "#6366f1", backgroundColor: "rgba(99, 102, 241, 0.1)", borderWidth: 2, tension: 0.4, fill: true, pointRadius: 4, pointBackgroundColor: "#ffffff", pointBorderColor: "#6366f1", pointHoverRadius: 6, }, ], }, options: { ...commonOptions, scales: { y: { beginAtZero: true, grid: { display: true, color: "rgba(0, 0, 0, 0.05)", }, }, x: { grid: { display: false, }, }, }, }, }); // Order Chart new Chart(orderCtx, { type: "bar", data: { labels: ["Mon", "Tue", "Wed", "Thu", "Fri"], datasets: [ { data: [4200, 3800, 4800, 4100, 3700], backgroundColor: "#6366f1", borderRadius: 8, hoverBackgroundColor: "#818cf8", }, ], }, options: { ...commonOptions, scales: { y: { beginAtZero: true, grid: { color: "rgba(0, 0, 0, 0.05)", }, }, }, }, }); // Earnings Chart new Chart(earningsCtx, { type: "doughnut", data: { labels: ["Completed", "Remaining"], datasets: [ { data: [68, 32], backgroundColor: ["#6366f1", "#e5e7eb"], borderWidth: 0, hoverOffset: 4, }, ], }, options: { ...commonOptions, cutout: "80%", animations: { animateRotate: true, animateScale: true, }, }, }); </script> </body> </html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", serif; } :root { --primary-color: #6366f1; --primary-light: #818cf8; --success-color: #10b981; --border-color: #e5e7eb; --bg-hover: #f8fafc; --text-primary: #1e293b; --text-secondary: #64748b; --bg-card: #ffffff; --shadow-sm: 0 1px 3px 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); } body { background: #f1f5f9; min-height: 100vh; color: var(--text-primary); line-height: 1.5; } .dashboard { display: grid; grid-template-columns: 80px 1fr 320px; gap: 24px; max-width: 1600px; margin: 24px; padding: 0 24px; } /* Sidebar */ .sidebar { background: var(--bg-card); border-radius: 16px; padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: var(--shadow-md); } .sidebar-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; position: relative; } .sidebar-icon i { font-size: 24px; } .sidebar-icon:hover { background: #f0f0ff; color: var(--primary-color); transform: translateY(-2px); } .sidebar-icon.active { background: var(--primary-color); color: white; } .sidebar-icon:hover::after { content: attr(data-tooltip); position: absolute; left: 120%; background: var(--text-primary); color: white; padding: 6px 12px; border-radius: 6px; font-size: 13px; white-space: nowrap; z-index: 1000; opacity: 0.9; } /* Main Content */ .main-content { display: flex; flex-direction: column; gap: 24px; } .header { background: var(--bg-card); padding: 10px 24px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-md); } .header h1 { font-size: 24px; font-weight: 600; background: linear-gradient( 120deg, var(--primary-color), var(--primary-light) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .search-bar { background: var(--bg-hover); border-radius: 12px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; width: 300px; transition: all 0.3s ease; border: 2px solid transparent; } .search-bar:focus-within { border-color: var(--primary-color); background: white; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); } .search-bar input { border: none; background: none; outline: none; font-size: 14px; width: 100%; color: var(--text-primary); } /* Stats */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .stat-card { background: var(--bg-card); padding: 24px; border-radius: 16px; box-shadow: var(--shadow-md); transition: all 0.3s ease; position: relative; overflow: hidden; } .stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, var(--primary-color), var(--primary-light) ); } .stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .stat-card h3 { color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; font-weight: 500; } .stat-value { font-size: 28px; font-weight: 600; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; } .stat-value span { font-size: 14px; color: var(--success-color); font-weight: 500; padding: 4px 8px; background: rgba(16, 185, 129, 0.1); border-radius: 6px; } /* Charts */ .chart-container, .card { height: 300px; background: var(--bg-card); border-radius: 16px; box-shadow: var(--shadow-md); padding: 24px; } canvas { max-width: 100%; } #mainChart { height: 240px !important; } #orderChart { height: 200px !important; margin-top: 20px; } #earningsChart { height: 180px !important; margin: 0 auto; display: block; } /* Cards */ .bottom-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .card { background: var(--bg-card); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-md); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .card-header h3 { font-size: 18px; font-weight: 600; color: var(--text-primary); } .more-button { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all 0.2s ease; font-size: 20px; } .more-button:hover { background: var(--bg-hover); color: var(--primary-color); } /* Earnings Info */ .earnings-info { margin: 24px 0; } .earnings-info h3 { color: var(--text-secondary); font-size: 14px; margin-bottom: 8px; } .earnings-value { font-size: 32px; font-weight: 600; color: var(--text-primary); margin-bottom: 24px; } /* Right Sidebar */ .right-sidebar { background: var(--bg-card); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 24px; box-shadow: var(--shadow-md); } .profile { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--bg-hover); } .profile-image { width: 48px; height: 48px; border-radius: 12px; background: var(--primary-light); } .profile-image img { width: 100%; height: 100%; padding: 4px; border-radius: 12px; } .profile-info h3 { font-size: 16px; font-weight: 600; } .profile-info p { color: var(--text-secondary); font-size: 14px; } /* Activity List */ .activity-list { display: flex; flex-direction: column; gap: 16px; } .activity-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; transition: all 0.2s ease; } .activity-item:hover { background: var(--bg-hover); } .activity-image { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-light); } .activity-image img { width: 100%; height: 100%; padding: 2px; border-radius: 12px; } .activity-info h4 { font-size: 14px; font-weight: 500; } .activity-info p { font-size: 13px; color: var(--text-secondary); } /* Events */ .upcoming-events .event-item { display: flex; gap: 16px; padding: 16px; border-radius: 12px; transition: all 0.2s ease; margin-top: 12px; } .upcoming-events .event-item:hover { background: var(--bg-hover); } .event-date { text-align: center; min-width: 48px; padding: 8px; background: var(--primary-color); border-radius: 8px; color: white; } .event-date .day { font-size: 20px; font-weight: 600; } .event-date .weekday { font-size: 12px; opacity: 0.8; } .event-info h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; } .event-info p { font-size: 13px; color: var(--text-secondary); } @media (max-width: 1200px) { .dashboard { grid-template-columns: 80px 1fr; } .right-sidebar { display: none; } } @media (max-width: 768px) { .dashboard { grid-template-columns: 1fr; padding: 16px; } .sidebar { display: none; } .stats { grid-template-columns: 1fr; } .bottom-cards { grid-template-columns: 1fr; } }
Tips for Success
- Test it on different devices
- Make sure the charts show real data
- Keep the design clean and simple
- Update the content regularly
Conclusion
Building a dashboard doesn’t have to be complicated. With some basic HTML, CSS, and a bit of JavaScript, you can create something that looks professional and works great. Give it a try, and don’t be afraid to make changes to suit your needs!