, learn the steps in creating a portfolio website and key features to note.png)
Description
A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.
How to create a responsive dashboard using HTML and CSS (Includes Free Source Code)
Published in: 2024-01-12 15:49:56 Author: SunshineIHCTS Section: HTML and CSS
.png)
In the field of web development, creating a responsive dashboard is an important feature to implement. Whether you are a system administrator, a data analyst, or a business owner, having a user-friendly and adaptable dashboard is essential for managing and analyzing data effectively so front-end developers should take note. In this tutorial, I will guide you through the process of creating a responsive admin dashboard using HTML and CSS. I will also provide you with the complete source code for free.
Prerequisites
Before I walk you through the tutorial, make sure you have a basic understanding of HTML and CSS. Additionally, you will need a code editor to follow along. If you do not have one, you can download popular editors like Visual Studio Code, Sublime Text, or Atom.
Setting Up the HTML Structure
Let us start by understanding the HTML structure of our responsive dashboard. I have developed a simple layout consisting of a sidebar and a main content area. The sidebar includes a logo, user profile, and navigation menu, while the main content area displays the dashboard analytics and records.
HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Responsive Admin Dashboard</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
</head>
<body>
<input type="checkbox" id="menu-toggle">
<div class="sidebar">
<div class="side-header">
<h3>L<span>ogo</span></h3>
</div>
<div class="side-content">
<div class="profile">
<div class="profile-img bg-img" style="background-image: url(img/admin.png)"></div>
<h4>Nwuna Emelda</h4>
<small>System Admin</small>
</div>
<div class="side-menu">
<ul>
<li>
<a href="" class="active">
<span class="las la-home"></span>
<small>Dashboard</small>
</a>
</li>
<li>
Note: I have provided the full HTML code in the source code below this article, you can download it.
Styling the Dashboard with CSS
Now, let us add some style to our dashboard using CSS. We will define the colors, fonts, and layout for our components. Feel free to customize the styles based on your preferences.
CSS styling:
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600&display=swap');
:root {
--main-color: #025854;
--color-dark: #025854;
--text-grey: #585e10;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
box-sizing: border-box;
font-family: 'Merriweather', sans-serif;
}
#menu-toggle {
display: none;
}
.sidebar {
position: fixed;
height: 100%;
width: 165px;
left: 0;
bottom: 0;
top: 0;
z-index: 100;
background: var(--color-dark);
transition: left 300ms;
}
.side-menu ul li:hover {
background: #2b384e;
}
.side-header {
box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
background: var(--main-color);
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.side-header h3, side-head span {
color: #fff;
font-weight: 400;
}
.side-content {
height: calc(100vh - 60px);
overflow: auto;
}
/* width */
.side-content::-webkit-scrollbar {
width: 5px;
}
/* Track */
.side-content::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
.side-content::-webkit-scrollbar-thumb {
background: #b0b0b0;
border-radius: 10px;
}
/* Handle on hover */
.side-content::-webkit-scrollbar-thumb:hover {
background: #585e10;
}
.profile {
text-align: center;
padding: 2rem 0rem;
}
.bg-img {
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
background-size: cover;
}
.profile-img {
height: 80px;
width: 80px;
display: inline-block;
margin: 0 auto .5rem auto;
border: 3px solid #899DC1;
}
.profile h4 {
color: #fff;
font-weight: 500;
}
.profile small {
color: #899DC1;
font-weight: 600;
}
.sidebar {
/*overflow-y: auto;*/
}
.side-menu ul {
text-align: center;
}
.side-menu a {
display: block;
padding: 1.2rem 0rem;
}
.side-menu a.active {
background: #2B384E;
}
.side-menu a.active span, .side-menu a.active small {
color: #fff;
}
.side-menu a span {
display: block;
text-align: center;
font-size: 1.7rem;
}
.side-menu a span, .side-menu a small {
color: #899DC1;
}
#menu-toggle:checked ~ .sidebar {
width: 60px;}
#menu-toggle:checked ~ .sidebar .side-header span {
display: none;
}
#menu-toggle:checked ~ .main-content {
margin-left: 60px;
width: calc(100% - 60px);
}
#menu-toggle:checked ~ .main-content header {
left: 60px;
}
#menu-toggle:checked ~ .sidebar .profile,
#menu-toggle:checked ~ .sidebar .side-menu a small {
display: none;
}
#menu-toggle:checked ~ .sidebar .side-menu a span {
font-size: 1.3rem;
}
.main-content {
margin-left: 165px;
width: calc(100% - 165px);
transition: margin-left 300ms;
}
header {
position: fixed;
right: 0;
top: 0;
left: 165px;
z-index: 100;
height: 60px;
box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
background: #fff;
transition: left 300ms;
}
.header-content, .header-menu {
display: flex;
align-items: center;
}
.header-content {
justify-content: space-between;
padding: 0rem 1rem;
}
.header-content label:first-child span {
font-size: 1.3rem;
}
.header-content label {
cursor: pointer;
}
.header-menu {
justify-content: flex-end;
padding-top: .5rem;
}
.header-menu label,
.header-menu .notify-icon {
margin-right: 2rem;
position: relative;
}
.header-menu label span,
.notify-icon span:first-child {
font-size: 1.3rem;
}
.notify-icon span:last-child {
position: absolute;
background: var(--main-color);
height: 16px;
width: 16px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right: -5px;
top: -5px;
color: #fff;
font-size: .8rem;
font-weight: 500;
}
.user {
display: flex;
align-items: center;
}
.user div, .client-img {
height: 40px;
width: 40px;
margin-right: 1rem;
}
.user span:last-child {
display: inline-block;
margin-left: .3rem;
font-size: .8rem;
}
main {
margin-top: 60px;
}
.page-header {
padding: 1.3rem 1rem;
background: #E9edf2;
border-bottom: 1px solid #dee2e8;
}
.page-header h1, .page-header small {
color: #74767d;
}
.page-content {
padding: 1.3rem 1rem;
background: #f1f4f9;
}
.analytics {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2rem;
margin-top: .5rem;
margin-bottom: 2rem;
}
.card {
box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 10%);
background: #fff;
padding: 1rem;
border-radius: 3px;
}
.card-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-head h2 {
color: #333;
font-size: 1.8rem;
font-weight: 500;
}
.card-head span {
font-size: 3.2rem;
color: var(--text-grey);
}
.card-progress small {
color: #777;
font-size: .8rem;
font-weight: 600;
}
.card-indicator {
margin: .7rem 0rem;
height: 10px;
border-radius: 4px;
background: #e9edf2;
overflow: hidden;
}
.indicator {
height: 10px;
border-radius: 4px;
}
.indicator.one {
background: #5f1366;
}
.indicator.two {
background: #059b32;
}
.indicator.three {
background: #c45003;
}
.indicator.four {
background: #10415e;
}
.records {
box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 10%);
background: #fff;
border-radius: 3px;
}
.record-header {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.add, .browse {
display: flex;
align-items: center;
}
.add span {
display: inline-block;
margin-right: .6rem;
font-size: .9rem;
color: #666;
}
input, button, select {
outline: none;
}
.add select, .browse input, .browse select {
height: 35px;
border: 1px solid #b0b0b0;
border-radius: 3px;
display: inline-block;
width: 75px;
padding: 0rem .5rem;
margin-right: .8rem;
color: #666;
}
.add button {
background: var(--main-color);
color: #fff;
height: 37px;
border-radius: 4px;
padding: 0rem 1rem;
border: none;
font-weight: 600;
}
.browse input {
width: 150px;
}
.browse select {
width: 100px;
}
.table-responsive {
width: 100%;
overflow: auto;
}
table {
border-collapse: collapse;
}
table thead tr {
background: #e9edf2;
}
table thead th {
padding: 1rem 0rem;
text-align: left;
color: #444;
font-size: .9rem;
}
table thead th:first-child {
padding-left: 1rem;
}
table tbody td {
padding: 1rem 0rem;
color: #444;
}
table tbody td:first-child {
padding-left: 1rem;
color: var(--main-color);
font-weight: 600;
font-size: .9rem;
}
table tbody tr {
border-bottom: 1px solid #dee2e8;
}
.client {
display: flex;
align-items: center;
}
.client-img {
margin-right: .5rem;
border: 2px solid #b0b0b0;
height: 45px;
width: 45px;
}
.client-info h4 {
color: #555;
font-size: .95rem;
}
.client-info small {
color: #777;
}
.actions span {
display: inline-block;
font-size: 1.5rem;
margin-right: .5rem;
}
.paid {
display: inline-block;
text-align: center;
font-weight: 600;
color: var(--main-color);
background: #e5f8ed;
padding: .5rem 1rem;
border-radius: 20px;
font-size: .8rem;
}
Making the Dashboard Responsive
One of the key features of a good dashboard is its responsiveness. Users should have a seamless experience, whether they are accessing the dashboard on a desktop, tablet, or mobile device. We will use media queries to adapt our layout for different screen sizes as have illustrated below.
@media only screen and (max-width: 1200px) {
.analytics {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 768px) {
.analytics {
grid-template-columns: 100%;
}
.sidebar {
left: -165px;
z-index: 90;
}
header {
left: 0;
width: 100%;
}
.main-content {
margin-left: 0;
width: 100%;
}
#menu-toggle:checked ~ .sidebar {
left: 0;
}
#menu-toggle:checked ~ .sidebar {
width: 165px;
}
#menu-toggle:checked ~ .sidebar .side-header span {
display: inline-block;
}
#menu-toggle:checked ~ .sidebar .profile,
#menu-toggle:checked ~ .sidebar .side-menu a small {
display: block;
}
#menu-toggle:checked ~ .sidebar .side-menu a span {
font-size: 1.7rem;
}
#menu-toggle:checked ~ .main-content header {
left: 0px
}
table {
width: 900px;
}
.add, .browse {
margin-left: 10px;
}
}
In this tutorial, I have walked you through the process of creating a responsive dashboard using HTML and CSS. We have covered the HTML structure, styling, and enhanced responsiveness with media queries. By following these steps and using the provided source code, you can create your own customizable and user-friendly dashboard for various applications.
You may like:
Copyright © 2018 - 2026 SunshineIHCTS | All rights reserved. Powered by 
Comments section
You need to be logged in to comment, Login or Register.Approved comments:
No comments yet! be the first to comment