Hello Developers! Are you looking to sharpen your HTML & CSS skills by creating a responsive admin dashboard? In this tutorial, we’ll guide you through the process of building a visually appealing and fully functional admin dashboard using popular web development technologies.
I. Setting Up the Project
To begin, let’s set up the project by creating a new folder on your computer and adding the necessary files. This step ensures a clean and organized structure for your admin dashboard.
II. Creating the HTML Structure
- Basic HTML Structure:
Inside the “index.html” file, start by adding the basic HTML structure, including the <html>, <head>, and <body> tags. These tags provide the foundation for your admin dashboard. - Linking CSS:
Within the tag, create a tag to connect your “style.css” file. This allows you to apply custom styles to your dashboard elements.
III. Designing the Admin Dashboard
- Creating the Navigation Bar:
Design and implement a navigation bar using HTML and CSS. The navigation bar should contain links to different sections of the admin dashboard, providing easy navigation for users. - Building the Main Content Area:
Design the main content area of the dashboard, where important data and widgets will be displayed. Use HTML and CSS to structure and style this section. - Styling Sidebars or Widgets:
Add sidebars or widgets to the admin dashboard layout. These components can display additional information or functionality. Use CSS to style them accordingly.
IV. Implementing Responsive Design
- Ensuring Responsiveness:
Add meta tags to the section of your HTML file to ensure your admin dashboard is responsive on different devices. These tags define the viewport and set the initial scale for the page. - Testing on Different Devices:
To ensure responsiveness, test your admin dashboard on various devices and screen sizes. Check for any layout issues or inconsistencies and make necessary adjustments to your CSS. - Optimizing Media Queries:
Use CSS media queries to make your admin dashboard adapt to different screen sizes. Adjust the layout, font sizes, and other design elements to provide an optimal user experience across devices.
V. Finalizing and Publishing the Admin Dashboard
- Polishing the Design:
Review your admin dashboard’s overall design, making any necessary refinements. Ensure that elements are aligned, colors are consistent, and the user interface is intuitive and visually appealing. - Testing and Quality Assurance:
Thoroughly test your admin dashboard on different browsers and devices to identify any potential issues or bugs. Fix any discovered problems to ensure a smooth user experience. - Publishing and Sharing:
Once you’re satisfied with your admin dashboard, consider publishing it online. Share it with colleagues or showcase it as part of your portfolio to demonstrate your HTML and CSS skills.
Conclusion:
Congratulations on building your responsive admin dashboard using HTML and CSS! By following the step-by-step instructions in this tutorial, you’ve learned how to create a visually appealing and fully functional admin dashboard. Remember to test and optimize your design for responsiveness, and don’t forget to share your finished dashboard with others!
Video Tutorial:
For a more comprehensive visual guide and code examples, we’ve also created a video tutorial to accompany this blog. Watch the video tutorial to gain additional insights and enhance your understanding of creating a responsive admin dashboard.
So, what are you waiting for? Start building your own responsive admin dashboard today and elevate your HTML and CSS skills. Happy coding!
Source Codes
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>Admin panel</title>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-clinic-medical"></i>
<div class="title">Brand Name</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div class="title">Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-stethoscope"></i>
<div class="title">Appointments</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-md"></i>
<div class="title">Doctors</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-puzzle-piece"></i>
<div class="title">Departments</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div class="title">Payments</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div class="title">Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div class="title">Help</div>
</a>
</li>
</ul>
</div>
<div class="main">
<div class="top-bar">
<div class="search">
<input type="text" name="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="doctor1.png" alt="">
</div>
</div>
<div class="cards">
<div class="card">
<div class="card-content">
<div class="number">67</div>
<div class="card-name">Appointments</div>
</div>
<div class="icon-box">
<i class="fas fa-briefcase-medical"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">105</div>
<div class="card-name">New Patients</div>
</div>
<div class="icon-box">
<i class="fas fa-wheelchair"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">8</div>
<div class="card-name">Operations</div>
</div>
<div class="icon-box">
<i class="fas fa-bed"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">$4500</div>
<div class="card-name">Earnings</div>
</div>
<div class="icon-box">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="tables">
<div class="last-appointments">
<div class="heading">
<h2>Last Appointments</h2>
<a href="#" class="btn">View All</a>
</div>
<table class="appointments">
<thead>
<td>Name</td>
<td>Doctor</td>
<td>Condition</td>
<td>Actions</td>
</thead>
<tbody>
<tr>
<td>Liam Smith Doe</td>
<td>Dr. Benjamin</td>
<td>fracture</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Emma</td>
<td>Dr. Noah</td>
<td>depression</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Olivia Smith </td>
<td>Dr. Liam</td>
<td>arthritis</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Isabella Doe</td>
<td>Dr. Noah</td>
<td>flu</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Sophia Smith </td>
<td>Dr. Olivia</td>
<td>fracture</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Liam Smith Doe</td>
<td>Dr. Benjamin</td>
<td>fracture</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="doctor-visiting">
<div class="heading">
<h2>Doctor Visiting</h2>
<a href="#" class="btn">View All</a>
</div>
<table class="visiting">
<thead>
<td>Photo</td>
<td>Name</td>
<td>Visit time</td>
<td>Detail</td>
</thead>
<tbody>
<tr>
<td>
<div class="img-box-small">
<img src="doctor1.png" alt="">
</div>
</td>
<td>Benjamin</td>
<td>14:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
<tr>
<td>
<div class="img-box-small">
<img src="doctor3.jpg" alt="">
</div>
</td>
<td>Liam</td>
<td>15:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
<tr>
<td>
<div class="img-box-small">
<img src="doctor2.png" alt="">
</div>
</td>
<td>Noah</td>
<td>16:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
<tr>
<td>
<div class="img-box-small">
<img src="doctor4.png" alt="">
</div>
</td>
<td>Sophia</td>
<td>17:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
styles.css
styles.c* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
overflow-x: hidden;
}
.container {
position: relative;
width: 100%;
}
.sidebar {
position: fixed;
width: 300px;
height: 100%;
background: linear-gradient(45deg, #47cebe, #ef4a82);
overflow-x: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
}
.sidebar ul li {
width: 100%;
list-style: none;
}
.sidebar ul li:hover {
background: #444;
}
.sidebar ul li:first-child {
line-height: 60px;
margin-bottom: 20px;
font-weight: 600;
border-bottom: 1px solid #fff;
}
.sidebar ul li:first-child:hover {
background: none;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: #fff;
height: 60px;
display: flex;
align-items: center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
.sidebar .title {
padding: 0 10px;
font-size: 20px;
}
.main {
position: absolute;
width: calc(100% - 300px);
min-height: 100vh;
left: 300px;
background: #f5f5f5;
}
.top-bar {
position: fixed;
height: 60px;
width: calc(100% - 300px);
background: #fff;
display: grid;
grid-template-columns: 10fr 0.4fr 1fr;
grid-gap: 5px;
align-items: center;
color: #444;
padding: 0 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
.top-bar .search {
position: relative;
max-width: 400px;
}
.search input {
width: 100%;
min-width: 128px;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
background: #f5f5f5;
}
.search i {
position: absolute;
right: 15px;
top: 10px;
cursor: pointer;
}
.user {
position: relative;
width: 50px;
height: 50px;
}
img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
.cards {
margin-top: 60px;
width: 100%;
padding: 35px 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.cards .card {
background: linear-gradient(45deg, #47cebe, #ef4a82);
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}
.number {
font-size: 35px;
font-weight: 500;
color: #fff;
}
.card-name {
color: #444;
font-weight: 600;
}
.icon-box i {
font-size: 45px;
color: #444;
}
.tables {
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
align-items: self-start;
padding: 0 20px 20px 20px;
}
.img-box-small {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.last-appointments,
.doctor-visiting {
min-height: 350px;
background: #fff;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.heading {
display: flex;
align-items: center;
justify-content: space-between;
color: #444;
}
.btn {
padding: 5px 10px;
background: linear-gradient(45deg, #47cebe, #ef4a82);
color: #fff;
text-decoration: none;
text-align: center;
}
table {
margin-top: 10px;
width: 100%;
border-collapse: collapse;
}
thead td {
font-weight: 600;
color: #333;
}
table tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
tbody tr:hover {
background: #444;
color: #fff;
}
table tbody tr:last-child {
border-bottom: none;
}
td {
padding: 9px 5px;
}
td i {
padding: 7px;
color: #fff;
border-radius: 50px;
}
.last-appointments table tbody td:last-child {
white-space: nowrap;
}
.fa-eye {
background: #32bea6;
}
.fa-edit {
background: #63b4f4;
}
.fa-trash-alt {
background: #ed5564;
}
@media(max-width:1090px) {
.sidebar {
width: 60px;
}
.main {
width: calc(100% - 60px);
left: 60px;
}
.top-bar {
width: calc(100% - 60px);
}
}
@media(max-width:860px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
.tables {
grid-template-columns: 1fr;
}
}
@media(max-width:530px) {
.cards {
grid-template-columns: 1fr;
}
.last-appointments td:nth-child(3) {
display: none;
}
}
@media(max-width:420px) {
.last-appointments,
.doctor-visiting {
font-size: 70%;
padding: 10px;
min-height: 200px;
}
.cards,
.tables {
padding: 10px;
}
.search input {
padding: 0 10px;
}
.user {
width: 40px;
height: 40px;
}
}ss
Don’t forget to Subscribe to our YouTube Channel for more.
