Admin Dashboard Panel in HTML CSS & JavaScript | Admin Panel With Source Code

Creating an dashboard is an essential part of web development. It helps manage data, track analytics, and enhance user experiences. In this post, I’ll guide you through building an admin dashboard using HTML, CSS, and JavaScript. Plus, I’ll provide the complete source code to get you started quickly.

Whether you are a beginner or an experienced developer, this tutorial will be easy to follow and understand. Let’s dive right in!


What Is an Admin Dashboard?

An admin dashboard is a user interface that allows website administrators to monitor and manage website activity. It typically includes charts, tables, forms, and other components to provide an overview of critical data.

With the growing demand for clean, responsive, and user-friendly dashboards, learning to build one is an invaluable skill for developers.

Features of Our Admin Dashboard

Before jumping into the code, here are some features of the dashboard we’re going to build:

  • Responsive Design: Optimized for desktop and mobile screens.
  • Interactive Charts: To display real-time data.
  • Navigation Menu: With dropdown support for easy access to pages.
  • User Profile Section: Manage user data effectively.
Related Topics:

Step-by-Step Guide to Build the Admin Dashboard

Let’s break down the process into simple steps:

1. Setting Up the HTML Structure

HTML provides the backbone for your dashboard. Create a file named index.html and include the following structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Procoder09 Dashboard</title>
    <link rel="shortcut icon" href="images/procoder-logo.png" type="image/x-icon">
    <!-- BOX ICONS LINK  -->
    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css">
    
    <!-- CHART JS SCRIPT CDN LINK   -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    </head>
  <body>
    <!-- HEADER  -->
    <div class="header">
      <!-- LOGO  -->
      <div class="logo">
        <img src="images/cropped-procode1-1.png" class="lg-logo" />
        <img src="images/procoder-logo.png" class="sm-logo" />
      </div>
      <!-- SEARCH INPUT  -->
      <div class="search-input">
        <button class="toggle-menu">
          <i class="bx bx-menu"></i>
        </button>
        <div class="input-box">
          <button><i class="bx bx-search"></i></button>
          <input type="text" placeholder="Search" />
        </div>
      </div>
      <!-- SMART ICONS  -->
      <div class="smart-icons">
        <span class="cart">
          <i class="bx bx-cart-alt"></i>
          <span class="cart-badge">5</span>
        </span>
        <span class="notification">
          <i class="bx bx-bell"></i>
          <span class="notification-badge"></span>
        </span>
        <div class="profile">
          <img src="images/profile.jpg" alt="" />
        </div>
        <!-- <span><i class="bx bx-cog"></i></span> -->
      </div>
    </div>
    <!-- SIDEBAR  -->
    <div class="sidebar">
      <div class="align-element">
        <ul>
          <li class="active">
            <span><i class="bx bx-home"></i></span>
            <span>Dashboard</span>
          </li>
          <li>
            <span><i class="bx bx-calendar-week"></i></span>
            <span>UI Elements</span>
          </li>
          <li>
            <span><i class="bx bx-border-radius"></i></span>
            <span>Advanced UI</span>
          </li>
          <li>
            <span><i class="bx bx-lock-alt"></i></span>
            <span>Authentication</span>
          </li>
          <li>
            <span><i class="bx bx-customize"></i></span>
            <span>Apps</span>
          </li>
          <li>
            <span><i class="bx bx-file-find"></i></span>
            <span>Pages</span>
          </li>
          <li>
            <span><i class="bx bx-copy-alt"></i></span>
            <span>Nested Menu</span>
          </li>
          <li>
            <span><i class="bx bx-error"></i></span>
            <span>Error</span>
          </li>
          <li>
            <span><i class="bx bx-calendar-week"></i></span>
            <span>Forms</span>
          </li>
          <li>
            <span><i class="bx bx-dialpad-alt"></i></span>
            <span>Utilities</span>
          </li>
          <li>
            <span><i class="bx bx-baguette"></i></span>
            <span>Widgets</span>
          </li>
          <li>
            <span><i class="bx bx-map-alt"></i></span>
            <span>Maps</span>
          </li>
          <li>
            <span><i class="bx bx-cube"></i></span>
            <span>Icons</span>
          </li>
          <li>
            <span><i class="bx bx-bar-chart-alt-2"></i></span>
            <span>Charts</span>
          </li>
          <li>
            <span><i class="bx bx-table"></i></span>
            <span>Tables</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- MAIN CONTAINER  -->
    <div class="main-container">
      <!-- TITLE  -->
      <div class="title">
        <p>
          <span>Dashboard</span>
          <i class="bx bx-right-arrow-alt"></i>
          Sales
        </p>
        <h3>Sales Dashboard</h3>
      </div>
      <!-- CARDS  -->
      <div class="cards">
        <!-- CARD 1 -->
        <div class="card card-1">
          <div class="card-text">
            <span>Total Products</span>
            <h4 style="background: transparent;">99,809</h4>
            <p>
              Increased By <span>2.56% <i class="bx bx-up-arrow-alt"></i></span>
            </p>
          </div>
          <div class="card-icon">
            <span><i class="bx bx-cart-alt"></i></span>
          </div>
        </div>
        <!-- CARD 2 -->
        <div class="card card-2">
          <div class="card-text">
            <span>Total Users</span>
            <h4 style="background: transparent;">40,167</h4>
            <p>
              Increased By <span>0.34% <i class="bx bx-up-arrow-alt"></i></span>
            </p>
          </div>
          <div class="card-icon">
            <span><i class="bx bx-group"></i></span>
          </div>
        </div>
        <!-- CARD 3 -->
        <div class="card card-3">
          <div class="card-text">
            <span>Total Revenue</span>
            <h4 style="background: transparent;">53,200</h4>
            <p>
              Increased By <span>7.66% <i class="bx bx-up-arrow-alt"></i></span>
            </p>
          </div>
          <div class="card-icon">
            <span><i class="bx bx-dollar"></i></span>
          </div>
        </div>
        <!-- CARD 4 -->
        <div class="card card-4">
          <div class="card-text">
            <span>Total Sales</span>
            <h4 style="background: transparent;">262,040</h4>
            <p>
              Increased By
              <span>0.74% <i class="bx bx-down-arrow-alt"></i></span>
            </p>
          </div>
          <div class="card-icon">
            <span><i class="bx bx-cart-alt"></i></span>
          </div>
        </div>
      </div>
      <!-- CHARTS  -->
      <div class="charts">
        <!-- CHART 1 -->
        <div class="chart">
          <div class="chart-top">
            <h4>Sales Overview</h4>
            <select>
              <option selected>Sort By</option>
              <option>This Week</option>
              <option>Last Week</option>
              <option>This Month</option>
            </select>
          </div>
          <div class="chart-bottom">
            <canvas id="barChart" height="100%" width="100%"></canvas>
          </div>
        </div>
        <!-- CHART 2 -->
        <div class="chart">
          <div class="chart-top">
            <h4>Order Statistics</h4>
            <span> <i class="bx bx-dots-vertical-rounded"></i></span>
          </div>
          <div class="chart-bottom">
            <canvas id="douChart" height="100%" width="100%"></canvas>
          </div>
        </div>
      </div>
    </div>
    <!-- BACKDROP FILTER  -->
    <div class="backdrop-filter"></div>
    <script src="script.js"></script>
  </body>
</html>

2. Adding Styling with CSS

CSS is essential for designing a responsive and visually appealing dashboard. Create a file named styles.css and add the following:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* DEFAULT CSS  */

body{
    overflow: hidden;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #fff;
}

body::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

.align-element {
    padding: 0px 15px 0 10px;
}

/* HEADER STYLES  */
.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .logo {
    width: 18%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #202947;
    transition: 0.3s linear;
}

.logo.activeLogo{
    width: 5%;
    overflow: hidden;
}

.header .logo .sm-logo {
    display: none;
    transition: 0.3s linear;
}

.header .logo img {
    cursor: pointer;
    width: 100%;
    scale: 0.7;
    transition: 0.3s linear;
}

.logo .lg-logo.activeLogoLgImg{
    display: none;
}

.logo .sm-logo.activeLogoSmImg{
    display: block;
    scale: 1.3;
}

.header .search-input {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 30%;
    margin-right: auto;
    padding-left: 15px;
}

.header .search-input .toggle-menu {
    height: 44px;
    width: 44px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background .3s ease-in-out;
}

.header .search-input .toggle-menu i {
    font-size: 30px;
}

.header .search-input .input-box {
    border: 1px solid rgba(0, 0, 0, 0.2);
    height: 40px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .search-input .input-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    width: 90%;
    padding: 10px;
    height: 100%;
}

.header .search-input .input-box button {
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 10%;
    cursor: pointer;
}

.header .search-input .input-box button i {
    font-size: 18px;
}

.header .smart-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-right: 15px;
}

.header .smart-icons span {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.header .smart-icons span i {
    font-size: 20px;
}

.header .smart-icons .notification,
.header .smart-icons .cart {
    position: relative;
}

.header .smart-icons .cart .cart-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: rgb(158, 92, 247);
    font-size: 12px;
    color: #fff;
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

.header .smart-icons .notification .notification-badge {
    position: absolute;
    top: 5px;
    right: 11px;
    background: red;
    height: 8px;
    width: 8px;
    border-radius: 50%;
}

.header .smart-icons .profile {
    display: flex;
    align-items: center;
}

.header .smart-icons .profile img {
    height: 35px;
    width: 35px;
    border-radius: 5px;
    object-fit: cover;
    cursor: pointer;
}

/* HEADER RESPONSIVE  */
@media (max-width:900px) {
    .header .search-input .input-box {
        display: none;
    }

    body{
        overflow-y: visible;
    }
    .header .logo {
        width: 8%;
    }

    .header .logo .lg-logo {
        display: none;
    }

    .header .logo .sm-logo {
        display: block;
    }
}

@media (max-width:768px) {


    .header .smart-icons span {
        height: 35px;
        width: 35px;
    }

    .header .smart-icons span i {
        font-size: 20px;
    }


    .header .smart-icons .profile img {
        height: 30px;
        width: 30px;
    }
}

@media (max-width:690px) {
    .header .logo {
        display: none;
    }
}

/* SIDEBAR STYLES  */
.sidebar {
    position: fixed;
    left: 0;
    top: 70px;
    width: 18%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 100px;
    background: #202947;
    transition: all .3s ease-in-out;
}

.sidebar.active {
    width: 5%;
}

.backdrop-filter {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 70px;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
}

.sidebar ul {
    padding: 20px 0;
}

.sidebar ul li {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 7px 10px;
    gap: 10px;
    cursor: pointer;
}

.sidebar ul li:hover span,
.sidebar ul li:hover span i,
.sidebar ul li.active span,
.sidebar ul li.active span i {
    color: #fff;
}

.sidebar ul li span {
    font-size: 15px;
    color: #b2b8c7;
    text-wrap: nowrap;
}

.sidebar.active ul li span:last-child {
    opacity: 0;
}

.sidebar ul li span i {
    font-size: 20px;
    color: #b2b8c7;
    transition: color .3s ease-in-out;
}

/* SIDEBAR RESPONSIVE  */
@media (max-width:900px) {
    .sidebar {
        width: 8%;
    }

    .sidebar.active {
        width: 40%;
        z-index: 2;
    }

    .backdrop-filter.active {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar.active ul li span:last-child {
        opacity: 1;
    }

    .sidebar ul li span:last-child {
        opacity: 0;
    }
}

@media (max-width:690px) {
    .sidebar {
        width: 60% !important;
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
    }
}

/* MAIN CONTAINER STYLES  */
.main-container {
    position: absolute;
    left: 18%;
    width: 82%;
    right: 0;
    top: 70px;
    min-height: auto;
    background: #f9fafc;
    transition: all .3s ease-in-out;
    padding: 0 15px;
}

.main-container.active {
    width: 95%;
    left: 5%;
}

.main-container .title {
    margin: 15px 0;
    padding: 0 10px;
}

.main-container .title p {
    font-size: 14px;
    color: #000;
}

.main-container .title p span {
    color: rgb(92, 103, 247);
    cursor: pointer;
}

.main-container .title h3 {
    font-weight: 400;
}

.main-container .cards {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 0 10px;
    row-gap: 20px;
    transition: 0.2s linear;
}

.main-container .cards .card {
    flex-basis: 24%;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 6px 16px 2px rgba(0, 0, 0, 0.05);
    padding: 15px;
    border-radius: 6px;
    transition: 0.2s linear;
}

.main-container .cards .card:nth-child(1):hover,
.main-container .cards .card:nth-child(1):hover h4{
    background:linear-gradient(to right, rgb(33 40 127), rgb(70 83 255)); ;
    color: white;
}

.main-container .cards .card:nth-child(2):hover,
.main-container .cards .card:nth-child(2):hover h4{
    background:linear-gradient(to right, rgb(170 10 174), rgb(255 19 230));
    color: white;
}

.main-container .cards .card:nth-child(3):hover,
.main-container .cards .card:nth-child(3):hover h4{
    background:linear-gradient(to right, rgb(149 0 61), rgb(244 59 135));
    color: white;
}

.main-container .cards .card:nth-child(4):hover,
.main-container .cards .card:nth-child(4):hover h4{
    background:linear-gradient(to right, rgb(199 43 0), rgb(252 97 54));

    color: white;
}


.main-container .cards .card .card-text span,
.main-container .cards .card .card-text p {
    font-size: 14px;
    color: #6e829f;
    font-weight: 400;
}

.main-container .cards .card .card-text h4 {
    font-size: 24px;
    color: #000;
    font-weight: 400;
    margin-bottom: 5px;
}

.main-container .cards .card .card-text p span {
    color: rgb(33, 206, 158);
    cursor: pointer;
}

.main-container .cards .card.card-4 .card-text p span {
    color: rgb(251, 66, 66);
}

.main-container .cards .card .card-icon span {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.main-container .cards .card.card-1 .card-icon span {
    background: rgb(92, 103, 247);
}


.main-container .cards .card.card-2 .card-icon span {
    background: rgb(227, 84, 212);
}

.main-container .cards .card.card-3 .card-icon span {
    background: rgb(255, 93, 159);
}

.main-container .cards .card.card-4 .card-icon span {
    background: rgb(255, 142, 111);
}

.main-container .cards .card .card-icon span i {
    font-size: 20px;
    color: #fff;
}

.main-container .charts {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
    gap: 20px;
    padding: 0 10px;
}

.main-container .charts .chart {
    flex-basis: 45%;
    box-shadow: 0px 6px 16px 2px rgba(0, 0, 0, 0.05);
    padding: 15px;
    border-radius: 6px;
    background: #fff;
}

.main-container .charts .chart .chart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-container .charts .chart .chart-top h4 {
    font-weight: 400;
    font-size: 18px;
    color: #000;
}

.main-container .charts .chart .chart-top select {
    outline: none;
    border: none;
    background: #b2b8c720;
    padding: 5px;
    cursor: pointer;
    transition: background .3s ease-in-out;
}

.main-container .charts .chart .chart-top select:hover {
    background: #b2b8c74e;
}

.main-container .charts .chart .chart-top select option {
    background: #fff;
}

.main-container .charts .chart .chart-top span {
    height: 30px;
    width: 30px;
    background: #b2b8c720;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .3s ease-in-out;
}

.main-container .charts .chart .chart-top span:hover {
    background: #b2b8c74e;
}

.main-container .charts .chart .chart-top span i {
    font-size: 20px;
}

.main-container .charts .chart .chart-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container .charts .chart .chart-bottom canvas {
    height: 440px !important;
    width: auto !important;
}

.main-container footer {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 20px;
    margin-top: 22px;
}

.main-container footer p {
    color: #6e829f;
    font-size: 14px;
}

.main-container footer p span {
    color: rgb(251, 66, 66);
}

.main-container footer p strong {
    cursor: pointer;
}

.main-container footer p strong:last-child {
    color: rgb(92, 103, 247);
}

/* MAIN CONTAINER RESPONSIVE  */
@media (max-width:900px) {
    .main-container {
        width: 92%;
        left: 8%;
    }

    .main-container .s .card {
        flex-basis: 49%;
    }

    .main-container .charts {
        flex-wrap: wrap;
    }

    .main-container .charts .chart {
        flex-basis: 100%;
    }

    .main-container .charts .chart .chart-bottom canvas {
        width: 100% !important;
        height: 100% !important;
    }
}

@media (max-width:690px) {

    .main-container,
    .main-container.active {
        width: 100%;
        left: 0%;
    }

    .main-container .cards .card {
        flex-basis: 100%;
    }
}

3. Adding Interactivity with JavaScript

JavaScript brings your dashboard to life. Create a file named script.js and include the following code:

const toggleMenu = document.querySelector(".toggle-menu");
const sidebar = document.querySelector(".sidebar");
const mainContainer = document.querySelector(".main-container");
const backdropFilter = document.querySelector(".backdrop-filter");
const logo = document.querySelector(".logo")
const logoImgLg = document.querySelector(".logo .lg-logo")
const logoImgSm = document.querySelector(".logo .sm-logo")

var barXValues = ["Growth", "Profit", "Sales", "Loss"];
var barYValues = [160000, 140890, 129790, 50000];
var barColors = [
  "rgb(92, 103, 247)",
  "#08fa81",
  "rgb(227, 84, 212)",
  "#fa0828",
];

new Chart("barChart", {
  type: "bar",
  data: {
    labels: barXValues,
    datasets: [
      {
        backgroundColor: barColors,
        data: barYValues,
      },
    ],
  },
  options: {
    legend: { display: false },
    title: {
      display: true,
      text: "World Wine Production 2018",
    },
  },
});

var douXValues = ["Delivered", "Canceled", "Pending", "Returned"];
var douYValues = [1754, 656, 889, 480];
var douColors = [
  "rgb(92, 103, 247)",
  "rgb(227, 84, 212)",
  "rgb(255, 93, 159)",
  "rgb(255, 142, 111)",
];

new Chart("douChart", {
  type: "doughnut",
  data: {
    labels: douXValues,
    datasets: [
      {
        backgroundColor: douColors,
        data: douYValues,
      },
    ],
  },
  options: {
    title: {
      display: true,
      text: "Total 30,000",
    },
  },
});

// TOGGLE ITEMS FUNCTION
const toggleItems = () => {
  logo.classList.toggle("activeLogo")
  logoImgLg.classList.toggle("activeLogoLgImg")
  logoImgSm.classList.toggle("activeLogoSmImg")
  sidebar.classList.toggle("active");
  mainContainer.classList.toggle("active");
  backdropFilter.classList.toggle("active");
};

// TOGGLE MENU EVENT CLICK
toggleMenu.addEventListener("click", toggleItems);
// BACKDROP FILTER EVENT CLICK
backdropFilter.addEventListener("click", toggleItems);

Download Source Code

Click Below Download button to get the source code of this admin dashboard with images

Download Now
Admin Dashboard.zip

Don’t refresh the page or switch tabs until the download completes.


Conclusion

Creating an admin dashboard using HTML, CSS, and JavaScript is both a fun and rewarding experience. By following this guide, you’ve learned to build a responsive dashboard with a modern UI. With practice, you can enhance its features and customize it further.

If you found this guide helpful, don’t forget to share it with your fellow developers. Also, leave a comment below if you have any questions or suggestions.

Happy coding! 🚀

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *