How to create Dashboard with HTML and CSS

Hello Reader, In this article you will learn how to make Dashboard using HTML and CSS, Earlier in this website I have shared a lot of HTML and CSS designs. This article will show you how to create your own dashboard with HTML and CSS. The dashboard is the first thing that a visitor sees when they come to your site. It needs to be appealing, informative and easy to navigate.

The attendance dashboard is a HTML and CSS project that was created for a school or organization purpose. The goal of the project was to create a dashboard for teachers or management department to view their students or employee’s attendance records. The HTML and CSS for the dashboard are clean and structural, making it easy for management and teachers to use. The information is laid out in a grid format which makes it easy to see at a glance how many employees or students are absent or present.

Dashboards are one of the most important tools for any business. They are a great way to keep track of all your company's information in a single location. A dashboard is a display, typically in the form of an electronic visual display that presents data about a company's performance, such as its sales or profits. A dashboard can also be physical and can be made up of charts, graphs and other visual representations.

This section is about creating a dashboard for an admin. The admin dashboard is used to track the progress of a company. It also helps in better management of the company. We can use this dashboard to track the progress of marketing campaigns, sales, and other important information. The admin dashboard usually has two types of dashboards: the first type is for monitoring the performance of people and departments, and the second type is for monitoring tasks that need to be done.

Below is the video tutorials. watch and practices

Dashboard is a web application that displays real-time data about the performance of a website. It is usually used for displaying statistical information about the site's traffic, such as the number of visitors and page views over a period of time. With dashboard, it is possible to monitor how many people are visiting your website or blog at any given point in time. This way you can see what parts of your website are popular and which ones are not getting enough attention. A dashboard can be created using HTML and CSS to display data collected from different sources like Google Analytics, Mailchimp and Shopify.

Dashboards are used in a variety of contexts, such as:

• To provide an overview of current performance against key metrics   
• To highlight and prioritize the most important items at a glance  
• To track progress over time

Admin dashboards can be used for a variety of purposes. They can be used to track the progress of projects, document tasks, and monitor performance. The dashboard is usually designed by the company or organization and is customized to their needs. In this section, we will look at how HTML and CSS can help you make your dashboard look more professional.

The HTML and CSS markup languages are used to define the content and layout of web pages

HTML (Hyper Text Markup Language) is a simple language for marking up text documents. It was originally designed as a way to share research papers on the internet, but it is now used for many other purposes.

HTML tags are enclosed in angle brackets, for example the opening tag tells the browser where the document starts, and the closing tag tells it where to end. HTML is the most common language for web pages. It is the building blocks of websites, and it can be used to create interactive content such as forms and menus.

CSS (Cascading Style Sheets) is a style sheet language used to describe how HTML elements should look on screen, on paper, in speech, or on other media. CSS stands for cascading style sheets, which are a set of rules that dictate how HTML elements should be displayed.

Source Code

If you like this Attendance Dashboard Design, then feel free to use it in your project. 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 the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Attendance 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="./pic/logo.jpg"> <span class="nav-item">Admin</span> </a></li> <li><a href="#"> <i class="fas fa-menorah"></i> <span class="nav-item">Dashboard</span> </a></li> <li><a href="#"> <i class="fas fa-comment"></i> <span class="nav-item">Message</span> </a></li> <li><a href="#"> <i class="fas fa-database"></i> <span class="nav-item">Report</span> </a></li> <li><a href="#"> <i class="fas fa-chart-bar"></i> <span class="nav-item">Attendance</span> </a></li> <li><a href="#"> <i class="fas fa-cog"></i> <span class="nav-item">Setting</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>Attendance</h1> <i class="fas fa-user-cog"></i> </div> <div class="users"> <div class="card"> <img src="./pic/img1.jpg"> <h4>Sam David</h4> <p>Ui designer</p> <div class="per"> <table> <tr> <td><span>85%</span></td> <td><span>87%</span></td> </tr> <tr> <td>Month</td> <td>Year</td> </tr> </table> </div> <button>Profile</button> </div> <div class="card"> <img src="./pic/img2.jpg"> <h4>Balbina kherr</h4> <p>Progammer</p> <div class="per"> <table> <tr> <td><span>82%</span></td> <td><span>85%</span></td> </tr> <tr> <td>Month</td> <td>Year</td> </tr> </table> </div> <button>Profile</button> </div> <div class="card"> <img src="./pic/img3.jpg"> <h4>Badan John</h4> <p>tester</p> <div class="per"> <table> <tr> <td><span>94%</span></td> <td><span>92%</span></td> </tr> <tr> <td>Month</td> <td>Year</td> </tr> </table> </div> <button>Profile</button> </div> <div class="card"> <img src="./pic/img4.jpg"> <h4>Salina micheal</h4> <p>Ui designer</p> <div class="per"> <table> <tr> <td><span>85%</span></td> <td><span>82%</span></td> </tr> <tr> <td>Month</td> <td>Year</td> </tr> </table> </div> <button>Profile</button> </div> </div> <section class="attendance"> <div class="attendance-list"> <h1>Attendance List</h1> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Depart</th> <th>Date</th> <th>Join Time</th> <th>Logout Time</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>Sam David</td> <td>Design</td> <td>03-24-22</td> <td>8:00AM</td> <td>3:00PM</td> <td><button>View</button></td> </tr> <tr class="active"> <td>02</td> <td>Balbina Kherr</td> <td>Coding</td> <td>03-24-22</td> <td>9:00AM</td> <td>4:00PM</td> <td><button>View</button></td> </tr> <tr> <td>03</td> <td>Badan John</td> <td>testing</td> <td>03-24-22</td> <td>8:00AM</td> <td>3:00PM</td> <td><button>View</button></td> </tr> <tr> <td>04</td> <td>Sara David</td> <td>Design</td> <td>03-24-22</td> <td>8:00AM</td> <td>3:00PM</td> <td><button>View</button></td> </tr> <!-- <tr > <td>05</td> <td>Salina</td> <td>Coding</td> <td>03-24-22</td> <td>9:00AM</td> <td>4:00PM</td> <td><button>View</button></td> </tr> <tr > <td>06</td> <td>Tara Smith</td> <td>Testing</td> <td>03-24-22</td> <td>9:00AM</td> <td>4:00PM</td> <td><button>View</button></td> </tr> --> </tbody> </table> </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&display=swap"); *{ margin: 0; padding: 0; outline: none; border: none; text-decoration: none; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ background: rgb(226, 226, 226); } nav{ position: sticky; top: 0; bottom: 0; height: 100vh; left: 0; width: 90px; /* width: 280px; */ background: #fff; overflow: hidden; transition: 1s; } nav:hover{ width: 280px; transition: 1s; } .logo{ text-align: center; display: flex; margin: 10px 0 0 10px; padding-bottom: 3rem; } .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; width: 280px; font-size: 14px; color: rgb(85, 83, 83); display: table; padding: 10px; } nav .fas{ position: relative; width: 70px; height: 40px; top: 20px; font-size: 20px; text-align: center; } .nav-item{ position: relative; top: 12px; margin-left: 10px; } a:hover{ background: #eee; } a:hover i{ color: #34AF6D; transition: 0.5s; } .logout{ position: absolute; bottom: 0; } .container{ display: flex; } /* 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 .users{ display: flex; width: 100%; } .users .card{ width: 25%; margin: 10px; background: #fff; text-align: center; border-radius: 10px; padding: 10px; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1); } .users .card img{ width: 70px; height: 70px; border-radius: 50%; } .users .card h4{ text-transform: uppercase; } .users .card p{ font-size: 12px; margin-bottom: 15px; text-transform: uppercase; } .users table{ margin: auto; } .users .per span{ padding: 5px; border-radius: 10px; background: rgb(223, 223, 223); } .users td{ font-size: 14px; padding-right: 15px; } .users .card button{ width: 100%; margin-top: 8px; padding: 7px; cursor: pointer; border-radius: 10px; background: transparent; border: 1px solid #4AD489; } .users .card button:hover{ background: #4AD489; color: #fff; transition: 0.5s; } /*Attendance List serction */ .attendance{ margin-top: 20px; text-transform: capitalize; } .attendance-list{ width: 100%; padding: 10px; margin-top: 10px; background: #fff; border-radius: 10px; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1); } .table{ border-collapse: collapse; margin: 25px 0; font-size: 15px; min-width: 100%; overflow: hidden; border-radius: 5px 5px 0 0; } table thead tr{ color: #fff; background: #34AF6D; text-align: left; font-weight: bold; } .table th, .table td{ padding: 12px 15px; } .table tbody tr{ border-bottom: 1px solid #ddd; } .table tbody tr:nth-of-type(odd){ background: #f3f3f3; } .table tbody tr.active{ font-weight: bold; color: #4AD489; } .table tbody tr:last-of-type{ border-bottom: 2px solid #4AD489; } .table button{ padding: 6px 20px; border-radius: 10px; cursor: pointer; background: transparent; border: 1px solid #4AD489; } .table button:hover{ background: #4AD489; color: #fff; transition: 0.5rem; }

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.