Creating an Admin Dashboard with HTML and CSS: A Step-by-Step Guide

Admin dashboards are essential for handling and tracking website or application activities. In this lesson, we will look at how to use HTML and CSS to create a professional and responsive admin panel. This step-by-step tutorial will help you construct a magnificent admin panel that suits your exact requirements, whether you're a newbie or an experienced developer.

Understanding the Structure of the Code

We begin by establishing the HTML structure for an effective admin dashboard. The code is divided into sections, such as the navigation menu, the main content area, and the "My Courses" portion. The above structure serves as a robust foundation for our dashboard.

Creating a Navigation Menu

The navigation menu is an essential part of any admin dashboard. We'll delve into the code to learn how to build a dynamic and user-friendly menu. We'll design menu items like Home, Profile, Wallet, Analytics, and more using HTML and components, as well as Font Awesome icons.

Implementing "My Courses" into Action

In admin dashboards, the "My Courses" area is a popular feature. We will learn how to create a course tracker using HTML and CSS. We may display the progress of the courses using a combination of lists and div elements, allowing users to continue their learning journey. We'll also include suitable icons to symbolize certain course topics.

To get started, watch and practice along with the tutorial below. With a bit of effort and dedication, you'll be able to create a beautiful admin dashboard that can help take your business to the next level.

Creating a Responsive Dashboard

Responsive design is critical in today's digital landscape. We'll walk you through making your admin dashboard responsive using HTML, CSS, and JavaScript. This guarantees that your dashboard adapts to different screen sizes and devices fluidly, offering an optimal user experience.

Using JavaScript to Improve the Dashboard

We'll use JavaScript to add interactivity and dynamic capabilities to our admin dashboard. We can incorporate features like progress tracking, interactive buttons, and more by using JavaScript code snippets. These upgrades will improve your admin panel's usability and user engagement.

Designing Administrator Dashboard Themes

When it comes to admin dashboards, customization is essential. We'll look at how to use CSS to build themes for your dashboard. You may personalise the look and feel to match your brand or website aesthetics by adjusting the colours, fonts, and other style variables.

Source code

If you like this admin dashboard 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 CSS after creating these files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Dashboard | By Code Info</title>
  <link rel="stylesheet" href="style.css" />
  <!-- Font Awesome Cdn Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
</head>
<body>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#" class="logo">
          <img src="/logo.jpg" alt="">
          <span class="nav-item">DashBoard</span>
        </a></li>
        <li><a href="#">
          <i class="fas fa-home"></i>
          <span class="nav-item">Home</span>
        </a></li>
        <li><a href="">
          <i class="fas fa-user"></i>
          <span class="nav-item">Profile</span>
        </a></li>
        <li><a href="">
          <i class="fas fa-wallet"></i>
          <span class="nav-item">Wallet</span>
        </a></li>
        <li><a href="">
          <i class="fas fa-chart-bar"></i>
          <span class="nav-item">Analytics</span>
        </a></li>
        <li><a href="">
          <i class="fas fa-tasks"></i>
          <span class="nav-item">Tasks</span>
        </a></li>
        <li><a href="">
          <i class="fas fa-cog"></i>
          <span class="nav-item">Settings</span>
        </a></li>
        <li><a href="">
          <i class="fas fa-question-circle"></i>
          <span class="nav-item">Help</span>
        </a></li>
        <li><a href="" class="logout">
          <i class="fas fa-sign-out-alt"></i>
          <span class="nav-item">Log out</span>
        </a></li>
      </ul>
    </nav>

    <section class="main">
      <div class="main-top">
        <h1>Skills</h1>
        <i class="fas fa-user-cog"></i>
      </div>
      <div class="main-skills">
        <div class="card">
          <i class="fas fa-laptop-code"></i>
          <h3>Web developemt</h3>
          <p>Join Over 1 million Students.</p>
          <button>Get Started</button>
        </div>
        <div class="card">
          <i class="fab fa-wordpress"></i>
          <h3>WordPress</h3>
          <p>Join Over 3 million Students.</p>
          <button>Get Started</button>
        </div>
        <div class="card">
          <i class="fas fa-palette"></i>
          <h3>graphic design</h3>
          <p>Join Over 2 million Students.</p>
          <button>Get Started</button>
        </div>
        <div class="card">
          <i class="fab fa-app-store-ios"></i>
          <h3>IOS dev</h3>
          <p>Join Over 1 million Students.</p>
          <button>Get Started</button>
        </div>
      </div>

      <section class="main-course">
        <h1>My courses</h1>
        <div class="course-box">
          <ul>
            <li class="active">In progress</li>
            <li>explore</li>
            <li>incoming</li>
            <li>finished</li>
          </ul>
          <div class="course">
            <div class="box">
              <h3>HTML</h3>
              <p>80% - progress</p>
              <button>continue</button>
              <i class="fab fa-html5 html"></i>
            </div>
            <div class="box">
              <h3>CSS</h3>
              <p>50% - progress</p>
              <button>continue</button>
              <i class="fab fa-css3-alt css"></i>
            </div>
            <div class="box">
              <h3>JavaScript</h3>
              <p>30% - progress</p>
              <button>continue</button>
              <i class="fab fa-js-square js"></i>
            </div>
          </div>
        </div>
      </section>
    </section>
  </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

/* import google fonts */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700"); *{ margin: 0; padding: 0; outline: none; border: none; text-decoration: none; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ background: #dfe9f5; } .container{ display: flex; } nav{ position: relative; top: 0; bottom: 0; height: 100vh; left: 0; background: #fff; width: 280px; overflow: hidden; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1); } .logo{ text-align: center; display: flex; margin: 10px 0 0 10px; } .logo img{ width: 45px; height: 45px; border-radius: 50%; } .logo span{ font-weight: bold; padding-left: 15px; font-size: 18px; text-transform: uppercase; } a{ position: relative; color: rgb(85, 83, 83); font-size: 14px; display: table; width: 280px; padding: 10px; } nav .fas{ position: relative; width: 70px; height: 40px; top: 14px; font-size: 20px; text-align: center; } .nav-item{ position: relative; top: 12px; margin-left: 10px; } a:hover{ background: #eee; } .logout{ position: absolute; bottom: 0; } /* Main Section */ .main{ position: relative; padding: 20px; width: 100%; } .main-top{ display: flex; width: 100%; } .main-top i{ position: absolute; right: 0; margin: 10px 30px; color: rgb(110, 109, 109); cursor: pointer; } .main-skills{ display: flex; margin-top: 20px; } .main-skills .card{ width: 25%; margin: 10px; background: #fff; text-align: center; border-radius: 20px; padding: 10px; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1); } .main-skills .card h3{ margin: 10px; text-transform: capitalize; } .main-skills .card p{ font-size: 12px; } .main-skills .card button{ background: orangered; color: #fff; padding: 7px 15px; border-radius: 10px; margin-top: 15px; cursor: pointer; } .main-skills .card button:hover{ background: rgba(223, 70, 15, 0.856); } .main-skills .card i{ font-size: 22px; padding: 10px; } /* Courses */ .main-course{ margin-top:20px ; text-transform: capitalize; } .course-box{ width: 100%; height: 300px; padding: 10px 10px 30px 10px; margin-top: 10px; background: #fff; border-radius: 10px; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1); } .course-box ul{ list-style: none; display: flex; } .course-box ul li{ margin: 10px; color: gray; cursor: pointer; } .course-box ul .active{ color: #000; border-bottom: 1px solid #000; } .course-box .course{ display: flex; } .box{ width: 33%; padding: 10px; margin: 10px; border-radius: 10px; background: rgb(235, 233, 233); box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1); } .box p{ font-size: 12px; margin-top: 5px; } .box button{ background: #000; color: #fff; padding: 7px 10px; border-radius: 10px; margin-top: 3rem; cursor: pointer; } .box button:hover{ background: rgba(0, 0, 0, 0.842); } .box i{ font-size: 7rem; float: right; margin: -20px 20px 20px 0; } .html{ color: rgb(25, 94, 54); } .css{ color: rgb(104, 179, 35); } .js{ color: rgb(28, 98, 179); }

Conclusion

Building an admin dashboard is a necessary step for website or application management. You have learned how to design an admin dashboard from scratch using HTML and CSS by following this extensive guide. We went over everything from the fundamentals of code structure to responsive design, JavaScript upgrades, and custom theming. You may confidently construct a robust and visually appealing admin panel adapted to your individual needs with your newfound knowledge.

Remember that an admin dashboard is more than just a useful tool; it is also an opportunity to leave a lasting impression on users. So, let your imagination go wild and design an admin dashboard that not only handles your website or application quickly but also highlights your brand's unique charm.

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.