Hello Developers!, Are you ready to take your data visualization skills to the next level? If so, you’re in for a treat! In this comprehensive tutorial, we’ll guide you step by step in creating a visually stunning and highly responsive admin panel. By harnessing the power of Chart.js, you’ll be able to transform raw data into captivating charts and graphs that provide valuable insights. So, let’s dive in and create a responsive admin panel using HTML CSS JS (Chart.js).
Step 1: Folder and File Setup | HTML CSS JS
To begin with, let’s set up the necessary folder and file structure for your admin panel project. First, create a new folder with a meaningful name that will house all the files related to your admin panel. Inside this folder, you need to create three essential files: “index.html” , “chart.js” and “style.css”. These files will serve as the backbone of your admin panel’s structure and styling.
Step 2: HTML Structure
Now that we have our files ready, let’s start building the HTML structure of our admin panel. Open the “index.html” file in your favorite text editor and add the basic HTML structure. Begin with the <!DOCTYPE html> declaration, followed by the opening <html> tag. Inside the <head> section, include necessary declarations such as the meta tags for character encoding, viewport settings, and compatibility. In the <body> section, we will build the layout and content of our admin panel.
Step 3: Link CSS File
With the HTML structure in place, it’s time to link the CSS file to our HTML document. This will enable us to apply custom styles and layouts to our admin panel, ensuring a visually appealing design. To do this, use the <link> tag within the <head> section of your HTML file and specify the path to your “style.css” file.
Step 4: Design the Top Bar
The top bar section of your admin panel plays a crucial role in providing important navigation and user-related information. Let’s design this section using CSS. Apply styles to elements such as the logo, search functionality, notification bell, and user profile image. Choose appropriate colors, fonts, and layouts that align with your brand’s aesthetics. Remember to make it responsive to ensure a consistent experience across different devices.
Step 5: Design the Sidebar
Next, let’s focus on designing the sidebar, which serves as the primary navigation menu for your admin panel. The sidebar should provide easy access to different sections of your panel, such as Dashboard, Students, Teachers, Employees, Analytics, Earnings, Settings, and Help. Use CSS to create a visually appealing layout for the sidebar, incorporating icons for each section to improve navigation and visual hierarchy.
Step 6: Design the Main Content Area
The main content area is where you’ll display important information and captivating charts to visualize your data. Design this section carefully to ensure a clean and organized layout. Consider using CSS grid or flexbox to create responsive card-based layouts for displaying key metrics, such as the number of students, teachers, employees, and earnings. Use appropriate transition words and animations to create smooth interactions and engage users.
Step 7: Integrate Chart.js
Now, let’s integrate Chart.js into your admin panel to bring your data to life through dynamic and interactive visualizations. Begin by including the Chart.js library in your project. You can either download the library and link it locally or use a CDN link to include it in your HTML file. Make sure to place the script tag that links to Chart.js just before the closing </body> tag. This will ensure that the library is loaded after the HTML content, allowing you to interact with the DOM elements.
Step 8: Populate and Customize Charts
With Chart.js integrated, it’s time to populate and customize our charts. Using JavaScript, we can retrieve data from our data source and populate the charts dynamically. Customize the appearance of the charts to align them with your desired design aesthetic. Modify colors, labels, titles, and tooltips to ensure that the charts effectively convey information to users. Take advantage of Chart.js’s interactive features, such as hover effects, click events, and tooltips, to enhance user engagement and interaction with the charts.
Step 9: Test and Refine | HTML CSS JS
Once you have implemented the charts and completed the design of your admin panel, it’s essential to thoroughly test it across different devices and browsers. Check for any inconsistencies or issues that may arise during testing and make necessary adjustments and refinements to the design and layout. Ensure that the charts are responsive and display correctly on various screen sizes. Test the interactivity features of the charts, such as hover effects and tooltips, to ensure a smooth user experience.
Step 10: Finalize and Deploy | HTML CSS JS
Finally testing and refining your admin panel, it’s time to finalize it for deployment. Review all elements to ensure they are in place and functioning correctly. Optimize the code and assets for performance, aiming to create a seamless and efficient user experience. Double-check the responsiveness of the admin panel across different devices and screen sizes. Once you are satisfied with the final result, deploy your admin panel to a hosting platform to make it accessible to users.
By following these steps, you can create an impressive and functional admin panel using HTML, CSS, and JS, powered by the Chart.js library. Remember to utilize transition words effectively throughout your tutorial to guide readers smoothly from one step to another. Enjoy the process of creating visually stunning data visualizations and providing valuable insights to your users!
So, get ready to elevate your data visualization skills and create an impressive admin panel that will enhance your ability to analyze and present data effectively. Dive into the world of HTML, CSS, and JavaScript, and leverage the power of Chart.js to create stunning visualizations that bring your data to life. Now, let’s start building your responsive admin panel and unlock the potential of data visualization!
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">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css">
<title>Admin panel</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Brand.</h2>
</div>
<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="img/user.png" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main">
<div class="cards">
<div class="card">
<div class="card-content">
<div class="number">1217</div>
<div class="card-name">Students</div>
</div>
<div class="icon-box">
<i class="fas fa-user-graduate"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">42</div>
<div class="card-name">Teachers</div>
</div>
<div class="icon-box">
<i class="fas fa-chalkboard-teacher"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">68</div>
<div class="card-name">Employees</div>
</div>
<div class="icon-box">
<i class="fas fa-users"></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="charts">
<div class="chart">
<h2>Earnings (past 12 months)</h2>
<div>
<canvas id="lineChart"></canvas>
</div>
</div>
<div class="chart doughnut-chart">
<h2>Employees</h2>
<div>
<canvas id="doughnut"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="chart1.js"></script>
<script src="chart2.js"></script>
</body>
</html>
styles.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar {
position: fixed;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
padding: 0 20px;
height: 60px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.logo h2 {
color: #299B63;
}
.search {
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
min-width: 128px;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.fa-bell {
justify-self: right;
}
.user {
position: relative;
width: 50px;
height: 50px;
justify-self: right;
}
/* sidebar */
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #299B63;
overflow-x: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
}
.sidebar ul li:hover {
background: #fff;
}
.sidebar ul li:hover a {
color: #299B63;
}
.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;
}
/* main */
.main {
position: absolute;
top: 60px;
width: calc(100% - 260px);
min-height: calc(100vh - 60px);
left: 260px;
background: #f5f5f5;
}
.cards {
width: 100%;
padding: 35px 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.cards .card {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}
.number {
font-size: 35px;
font-weight: 500;
color: #299B63;
}
.card-name {
color: #888;
font-weight: 600;
}
.icon-box i {
font-size: 45px;
color: #299b63;
}
/* charts */
.charts {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
width: 100%;
padding: 20px;
padding-top: 0;
}
.chart {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
width: 100%;
}
.chart h2 {
margin-bottom: 5px;
font-size: 20px;
color: #666;
text-align: center
}
@media (max-width:1115px) {
.sidebar {
width: 60px;
}
.main {
width: calc(100% - 60px);
left: 60px;
}
}
@media (max-width:880px) {
/* .topbar {
grid-template-columns: 1.6fr 6fr 0.4fr 1fr;
} */
.fa-bell {
justify-self: left;
}
.cards {
width: 100%;
padding: 35px 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.charts {
grid-template-columns: 1fr;
}
.doughnut-chart {
padding: 50px;
}
#doughnut {
padding: 50px;
}
}
@media (max-width:500px) {
.topbar {
grid-template-columns: 1fr 5fr 0.4fr 1fr;
}
.logo h2 {
font-size: 20px;
}
.search {
width: 80%;
}
.search input {
padding: 0 20px;
}
.fa-bell {
margin-right: 5px;
}
.cards {
grid-template-columns: 1fr;
}
.doughnut-chart {
padding: 10px;
}
#doughnut {
padding: 0px;
}
.user {
width: 40px;
height: 40px;
}
}
chart1.js
var ctx = document.getElementById('lineChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Earnings in $',
data: [2050, 1900, 2100, 2800, 1800, 2000, 2500, 2600, 2450, 1950, 2300, 2900],
backgroundColor: [
'rgba(85,85,85, 1)'
],
borderColor: 'rgb(41, 155, 99)',
borderWidth: 1
}]
},
options: {
responsive: true
}
});
chart2.js
var ctx2 = document.getElementById('doughnut').getContext('2d');
var myChart2 = new Chart(ctx2, {
type: 'doughnut',
data: {
labels: ['Academic', 'Non-Academic', 'Administration', 'Others'],
datasets: [{
label: 'Employees',
data: [42, 12, 8, 6],
backgroundColor: [
'rgba(41, 155, 99, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(120, 46, 139,1)'
],
borderColor: [
'rgba(41, 155, 99, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(120, 46, 139,1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
Don’t forget to Subscribe to our YouTube Channel for more
This is a topic close to my heart cheers, where are your contact details though?