Welcome, web developers! Are you eager to enhance your skills in HTML, CSS, and JS (JavaScript) by creating a dynamic and responsive admin dashboard? Look no further! In this comprehensive tutorial, we will guide you through the step-by-step process of building an impressive and adaptable admin dashboard using these popular web development technologies.
Setting up the Project Structure | HTML, CSS and JS
To kickstart our journey, let’s begin by setting up the project structure. It’s important to establish an organized file structure for your project. Create a new folder on your computer to store all the necessary project files related to the admin dashboard. Inside this folder, we’ll create two crucial files: “index.html” and “style.css.” These files will serve as the foundation for our admin dashboard.
Constructing the HTML Structure
Now, let’s dive into the HTML file, where we’ll build the fundamental structure of our admin dashboard. It’s crucial to define the necessary HTML tags, such as <html>, <head>, <body>, and more. Additionally, we’ll establish the link between our HTML, CSS and JS files using the <link> tag within the <head> section. This connection will allow us to apply styles and customize our dashboard using CSS.
Designing the Layout
With the foundation in place, it’s time to design the layout of our admin dashboard. Using HTML elements, we’ll create various sections such as a header, sidebar, and main content area. We’ll also incorporate icons, search boxes, and other components to enhance the overall user experience and make our dashboard visually appealing.
Styling and Customizing with CSS
To bring our admin dashboard to life, we’ll utilize CSS to style and customize each element. Through CSS selectors and properties, we’ll adjust colors, fonts, margins, and padding to ensure a visually appealing and cohesive design. This step is crucial in creating an attractive and user-friendly interface for our admin dashboard.
Implementing Interactivity with JS (JavaScript)
Next, let’s introduce interactivity to our dashboard using JavaScript. JavaScript empowers us to add dynamic functionality and make our dashboard more user-friendly. We’ll implement features such as toggling between light and dark themes, expanding and collapsing the sidebar menu, and handling user interactions. You’ll learn how to attach event listeners, manipulate the Document Object Model (DOM), and make your dashboard come alive with interactive elements.
Integrating Interactive Charts with Chart.js
No admin dashboard is complete without data visualization. In this tutorial, we’ll explore the integration of interactive charts using the powerful Chart.js library. You’ll learn how to create line charts that showcase important data such as sales, orders, products, and customer information. We’ll guide you through providing data to the charts and customizing their appearance to match the overall design of your admin dashboard. Data visualization adds depth and insight to your dashboard, allowing users to grasp information quickly.
Ensuring Responsiveness
Throughout the tutorial, we’ll emphasize the importance of responsiveness. We’ll demonstrate how to make the admin dashboard adapt seamlessly to different screen sizes and devices. You’ll learn about responsive design principles, media queries, and viewport settings to ensure a consistent user experience across various platforms.
Completing the Admin Dashboard
By the end of this tutorial, you’ll have a comprehensive understanding of how to create a responsive admin dashboard using HTML, CSS, and JavaScript. You’ll have built an aesthetically pleasing interface with interactive charts and functional features, all wrapped in a mobile-friendly design. Feel free to refer to the provided source code to compare and identify any potential errors or issues. Customize and modify the dashboard further to suit your specific needs and preferences.
Source Code and Further Customization
Whether you’re a beginner seeking to enhance your HTML and CSS skills or an experienced developer looking to expand your repertoire, this tutorial provides an excellent opportunity to sharpen your web development abilities. By following along with the tutorial and actively engaging in the coding process, you’ll gain hands-on experience and reinforce your understanding of HTML, CSS, and JavaScript concepts.
Watch the Accompanying Video Tutorial
For a more visual guide and real-time demonstrations of the code examples, we’ve also created an accompanying video tutorial. The video tutorial will provide additional insights and explanations, enhancing your learning experience. Make sure to watch it alongside the written tutorial to reinforce your understanding and make the most of this learning opportunity.
A Journey to Enhance Your Web Development Abilities in HTML, CSS and JS
Whether you’re a beginner seeking to enhance your HTML and CSS skills or an experienced developer looking to expand your repertoire, this tutorial is an excellent opportunity to sharpen your web development abilities. Watch the accompanying video tutorial for a more visual guide and real-time demonstrations of the code examples.
Ready to Embark on Your Admin Dashboard Journey with HTML, CSS and JS ?
Now that you’re equipped with the knowledge and skills to create a dynamic and responsive admin dashboard, it’s time to start building your very own. Remember to approach the process with patience and perseverance, as web development often involves trial and error. Don’t hesitate to refer back to the tutorial and seek help from online resources and communities if you encounter any challenges along the way.
Embark on this exciting journey of building a dynamic and responsive admin dashboard using HTML, CSS, and JS. Enjoy the process of bringing your ideas to life, creating visually appealing designs, and adding interactive features to enhance the user experience. With your newfound skills, you’ll be well-prepared to tackle more advanced web development projects and take your abilities to new heights. Happy coding!
Video Tutorial
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="assets/css/styles.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<title>VM store.</title>
</head>
<body class="body">
<section class="header">
<div class="logo">
<i class="ri-menu-line menu"></i>
<h2><span>VM</span> Store.</h2>
</div>
<div class="header--items">
<i class="ri-search-2-line"></i>
<div class="dark--theme--btn">
<i class="ri-moon-line moon"></i>
<i class="ri-sun-line sun"></i>
</div>
<i class="ri-notification-2-line"></i>
<i class="ri-wechat-2-line chat"></i>
<div class="profile">
<img src="assets/images/profile.jpg" alt="">
</div>
</div>
</section>
<section class="main">
<div class="sidebar">
<ul class="sidebar--items">
<li>
<a href="#" class="active">
<span class="icon"><i class="ri-bar-chart-line"></i></span>
<div class="sidebar--item">Overview</div>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="ri-handbag-line"></i></span>
<div class="sidebar--item">Product</div>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="ri-user-line"></i></span>
<div class="sidebar--item">Customers</div>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="ri-booklet-line"></i></span>
<div class="sidebar--item">Orders</div>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="ri-shopping-cart-2-line"></i></span>
<div class="sidebar--item">Checkout</div>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="ri-settings-3-line"></i></span>
<div class="sidebar--item">Settings</div>
</a>
</li>
</ul>
<ul class="sidebar--bottom--items">
<li>
<a href="#">
<span class="icon"><i class="ri-question-line"></i></span>
<div class="sidebar--item">Help</div>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="ri-logout-box-r-line"></i></span>
<div class="sidebar--item">Logout</div>
</a>
</li>
</ul>
</div>
<div class="main--container">
<div class="section--title">
<h3 class="title">Welcome back, Jenny</h3>
<select name="date" id="date">
<option value="last7">Last 7 days</option>
<option value="lastmonth">Last month</option>
<option value="lastyear">Last year</option>
<option value="alltime">All time</option>
</select>
</div>
<div class="cards">
<div class="card card-1">
<div class="card--title">
<span class="card--icon icon"><i class="ri-shopping-bag-2-line"></i></span>
<span>Sales</span>
</div>
<h3 class="card--value">$432,576.34 <i class="ri-arrow-up-circle-fill up"></i></h3>
<h5 class="more">4,234 more than usual</h5>
<div class="chart">
<canvas id="sales"></canvas>
</div>
</div>
<div class="card card-2">
<div class="card--title">
<span class="card--icon icon"><i class="ri-gift-line"></i></span>
<span>Orders</span>
</div>
<h3 class="card--value">2,567 <i class="ri-arrow-down-circle-fill down"></i></h3>
<h5 class="less">234 less than usual</h5>
<div class="chart">
<canvas id="orders"></canvas>
</div>
</div>
<div class="card card-3">
<div class="card--title">
<span class="card--icon icon"><i class="ri-handbag-line"></i></span>
<span>Products</span>
</div>
<h3 class="card--value">587 <i class="ri-arrow-up-circle-fill up"></i></h3>
<h5 class="more">23 more than usual</h5>
<div class="chart">
<canvas id="products"></canvas>
</div>
</div>
<div class="card card-4">
<div class="card--title">
<span class="card--icon icon"><i class="ri-user-line"></i></span>
<span>Customers</span>
</div>
<h3 class="card--value">4,300 <i class="ri-arrow-down-circle-fill down"></i></h3>
<h5 class="less">34 less than usual</h5>
<div class="chart">
<canvas id="customers"></canvas>
</div>
</div>
</div>
<div class="target-vs-sales--container">
<div class="section--title">
<h3 class="title">Sales difference</h3>
<div class="sales--value">
<div class="target">
<i class="ri-checkbox-blank-circle-fill circle"></i>
Target <span> sales</span>
</div>
<div class="current">
<i class="ri-checkbox-blank-circle-fill circle"></i>
Current <span> sales</span>
</div>
</div>
</div>
<div class="target--vs--sales">
<canvas id="tarsale"></canvas>
</div>
</div>
<div class="table">
<div class="section--title">
<h3 class="title">Top products</h3>
<div></div>
</div>
<table>
<thead>
<tr>
<th>Product name</th>
<th>Order ID</th>
<th>Price</th>
<th>Sold</th>
<th>Returned</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
<tr>
<td>MacBook Air AAPL</td>
<td>#231234</td>
<td>$1846</td>
<td>331</td>
<td>12</td>
<td>$337,218.54</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
<script src="assets/js/sales.js"></script>
<script src="assets/js/orders.js"></script>
<script src="assets/js/products.js"></script>
<script src="assets/js/customers.js"></script>
<script src="assets/js/tarsale.js"></script>
</body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&family=Roboto:wght@400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
:root{
--bg-color-first:#fff;
--bg-color-second:#e9edf1;
--bg-color-third:#3bc59a;
--text-color-first:#000;
--text-color-second:#3d3c3c;
--text-color-third:#3bc59a;
--hover-text-color:#fff;
--bg-card-1:#ecd765;
--bg-card-2:#7f91f9;
--bg-card-3:#eec79c;
--bg-card-4:#cb84f9;
--more-and-less:#555;
}
/* variables dark mode */
.body.dark--mode{
--bg-color-first:linear-gradient(to bottom right, #242424,#3d3d3d);
--bg-color-second:#202020;
--text-color-first:#fff;
--text-color-second:#9b9a9a;
--hover-text-color:#000;
--bg-card-1:linear-gradient(to bottom right, #242424, #3d381a);
--bg-card-2:linear-gradient(to bottom right, #242424, #2d3353);
--bg-card-3:linear-gradient(to bottom right, #242424, #4d3720);
--bg-card-4:linear-gradient(to bottom right, #242424, #4c325e);
--more-and-less:#3bc59a;
}
/* header */
.header{
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
padding: 0 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
background: var(--bg-color-first);
color: var(--text-color-first);
}
.logo{
display: flex;
align-items: center;
}
.logo i{
font-size: 1.5rem;
margin-right: 15px;
}
.logo h2{
font-family: 'Oswald', sans-serif;
}
.logo span{
color: var(--text-color-third);
font-family: 'Oswald', sans-serif;
}
.header--items{
display: flex;
align-items: center;
}
.header--items i{
font-size: 1.3rem;
margin-right: 25px;
cursor: pointer;
color: var(--text-color-first);
}
.header--items i:hover{
color: var(--text-color-third);
}
.dark--theme--btn{
display: flex;
align-items: center;
}
i.moon{
display: block;
color: var(--text-color-third);
}
.body.dark--mode .moon{
display: none;
}
i.sun{
color: #ecd765;
display: none;
}
.body.dark--mode .sun{
display: block;
}
.profile{
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
}
img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
/* main */
.main{
position: relative;
height: calc(100vh - 70px);
}
/* sidebar */
.sidebar{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 300px;
padding: 20px;
background: var(--bg-color-first);
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 10;
transition: .3s;
}
.sidebar--items li , .sidebar--bottom--items li{
list-style: none;
}
a{
text-decoration: none;
}
.sidebar--items a, .sidebar--bottom--items a{
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 1.1rem;
padding: 10px;
border-radius: 10px;
color: var(--text-color-first);
}
.sidebar--items a:hover,
.sidebar--bottom--items a:hover{
background: var(--bg-color-third);
color: var(--hover-text-color);
}
a.active{
background: var(--bg-color-third);
color: var(--hover-text-color);
}
.icon{
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.sidebar .icon{
margin-right: 20px;
font-size: 1.3rem;
}
/* main--container */
.main--container{
position: absolute;
top: 0;
right: 0;
height: 100%;
width: calc(100% - 300px);
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
background-color: var(--bg-color-second);
z-index: 2;
}
.section--title{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
color: var(--text-color-second);
}
select{
border: none;
outline: none;
padding: 5px 10px;
background-color: transparent;
font-weight: 500;
font-size: 1rem;
color: var(--text-color-second);
}
/* cards */
.cards{
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.card{
position: relative;
background-color: var(--bg-color-first);
padding: 15px;
cursor: pointer;
border-radius: 10px;
}
.card-1{
background: var(--bg-card-1);
}
.card-2{
background: var(--bg-card-2);
}
.card-3{
background: var(--bg-card-3);
}
.card-4{
background: var(--bg-card-4);
}
.card--title{
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 500;
color: var(--text-color-second);
}
.card--icon{
padding: 4px;
background-color: var(--bg-color-third);
color: var(--hover-text-color);
border-radius: 50%;
margin-right: 10px;
}
.card--value{
display: flex;
align-items: center;
margin: 8px 0 2px;
font-size: 1.1rem;
color: var(--text-color-first);
}
.up{
color: green;
}
.down{
color: red;
}
.more, .less{
color: var(--more-and-less);
}
.chart{
margin-top: 8px;
width: 200px;
height: auto;
}
.chart canvas{
max-height: 70px;
}
h3 i{
font-weight: 400;
margin-left: 5px;
}
h5{
font-weight: 400;
}
/* target vs sales */
.target-vs-sales--container{
width: auto;
background: var(--bg-color-first);
margin-bottom: 20px;
border-radius: 10px;
padding: 15px;
}
.sales--value{
display: flex;
align-items: center;
gap: 20px;
}
.target , .current{
display: flex;
align-items: center;
font-size: .9rem;
}
.target .circle{
margin-right: 5px;
color: #3bc59a;
}
.current .circle{
margin-right: 5px;
color: #9966ff;
}
.target--vs--sales{
width: auto;
}
.target--vs--sales canvas{
max-height: 200px;
}
/* table */
.table{
padding: 15px;
background: var(--bg-color-first);
border-radius: 10px;
height: 200px;
overflow-y: scroll;
}
table{
width: 100%;
text-align: left;
border-collapse: collapse;
}
tbody{
padding: 0 10px;
color: var(--text-color-first);
}
tr{
border-bottom: 1px solid var(--bg-color-second);
}
td,th{
padding-block: 10px;
}
tbody tr:hover{
background-color: var(--bg-color-third);
color: var(--hover-text-color);
}
td:first-child{
padding-left: 10px;
}
th{
color: var(--text-color-second);
}
/* responsive starts here */
@media screen and (max-width:1325px){
.cards{
overflow-x: scroll;
}
.sidebar{
width: fit-content;
}
.sidebar .icon{
margin-right: 0;
}
.sidebar--item{
display: none;
}
.main--container{
width: calc(100% - 80px);
}
}
@media screen and (max-width:775px){
.sidebar{
z-index: 10;
width: 300px;
transform: translateX(-100%);
}
.sidebar.activemenu{
transform: translateX(0);
}
.sidebar .icon{
margin-right: 20px;
}
.sidebar--item{
display: block;
}
.main--container{
width:100%;
}
table{
min-width: 600px;
}
}
@media screen and (max-width:640px){
.sidebar{
padding: 10px;
}
.main--container{
padding: 10px;
}
.cards{
gap: 10px;
margin-bottom: 10px;
}
.target-vs-sales--container{
margin-bottom: 10px;
}
.header--items i{
margin-right: 10px;
}
.chat{
display: none;
}
.sales--value span{
display: none;
}
}
customer.js
const customersChart = document.getElementById('customers').getContext('2d')
const customers = new Chart(customersChart,{
type:'line',
data:{
labels:['mon','tue','wed','thu','fri','sat','sun'],
datasets:[{
data:[12,4,8,15,2,3,7],
borderColor:['rgb(59,197,154,1)'],
borderWidth:2
}]
},
options:{
elements:{
point:{
radius:0
}
},
scales:{
x:{
display:false
},
y:{
display:false
}
},
plugins:{
legend:{
display:false
}
}
}
})
main.js
let body = document.querySelector(".body")
let sun = document.querySelector(".sun")
let moon = document.querySelector(".moon")
moon.onclick = function(){
body.classList.add("dark--mode")
}
sun.onclick = function(){
body.classList.remove("dark--mode")
}
let menu = document.querySelector(".menu")
let sidebar = document.querySelector(".sidebar")
let mainContainer = document.querySelector(".main--container")
menu.onclick = function(){
sidebar.classList.toggle("activemenu")
}
mainContainer.onclick = function(){
sidebar.classList.remove("activemenu")
}
orders.js
let body = document.querySelector(".body")
let sun = document.querySelector(".sun")
let moon = document.querySelector(".moon")
moon.onclick = function(){
body.classList.add("dark--mode")
}
sun.onclick = function(){
body.classList.remove("dark--mode")
}
let menu = document.querySelector(".menu")
let sidebar = document.querySelector(".sidebar")
let mainContainer = document.querySelector(".main--container")
menu.onclick = function(){
sidebar.classList.toggle("activemenu")
}
mainContainer.onclick = function(){
sidebar.classList.remove("activemenu")
}
product.js
const productsChart = document.getElementById('products').getContext('2d')
const products = new Chart(productsChart,{
type:'line',
data:{
labels:['mon','tue','wed','thu','fri','sat','sun'],
datasets:[{
data:[5,7,4,15,9,5,23],
borderColor:['rgb(59,197,154,1)'],
borderWidth:2
}]
},
options:{
elements:{
point:{
radius:0
}
},
scales:{
x:{
display:false
},
y:{
display:false
}
},
plugins:{
legend:{
display:false
}
}
}
})
sales.js
const salesChart = document.getElementById('sales').getContext('2d')
const sales = new Chart(salesChart,{
type:'line',
data:{
labels:['mon','tue','wed','thu','fri','sat','sun'],
datasets:[{
data:[12,19,3,5,2,3,8],
borderColor:['rgb(59,197,154,1)'],
borderWidth:2
}]
},
options:{
elements:{
point:{
radius:0
}
},
scales:{
x:{
display:false
},
y:{
display:false
}
},
plugins:{
legend:{
display:false
}
}
}
})
tarsale.js
const tarsaleChart = document.getElementById('tarsale').getContext('2d');
const tarsale = new Chart(tarsaleChart,{
type:'line',
data:{
labels:['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'],
datasets:[{
data:[1200,1990,387,598,276,376,654,764,2546,454,776,543],
borderColor:[
'rgb(59,197,154)'
],
borderWidth:1
},{
data:[1100,1390,1387,798,376,776,254,464,1146,654,476,894],
borderColor:[
'rgb(153,102,255)'
],
borderWidth:1
}]
},
options:{
respnsive:true,
plugins:{
legend:{
display:false
}
}
}
})
Don’t forget to Subscribe to our YouTube Channel for more
hey brother your work is great !! i have no words to explain your works……….. really great
i just want to ask you a question :- can i use your tamplets in my project
if yes than please add donation button so we can pay for your great work
yes you can use it.
Do donations in the followinfg link
buy me a coffee
https://bmc.link/imecreative