The dashboard is an interface or page that displays real-time data as charts and reports.
This is a basic tutorial, you will learn how to create a dashboard using HTML and CSS.
I designed it with the very basics of HTML and CSS. so it is best suitable for beginners in the web development field.
It is mobile responsive. So once you develop it, you can view it on mobile phone screens as well.
You may also like
Check the video tutorial
Don't forget to Subscribe to our Youtube Channel for more.
Recommended Videos
HTML CODES
<!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">
<!-- Remix icons -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/styles.css">
<title>Dashboard</title>
</head>
<body>
<div class="dashboard">
<div class="sidebar place-items-center">
<div class="logo"><i class="ri-english-input"></i></div>
<div class="sidebar-items">
<div class="sidebar-item s-item-1 place-items-center">
<i class="ri-layout-grid-line"></i>
</div>
<div class="sidebar-item s-item-2 place-items-center">
<i class="ri-sound-module-line"></i>
</div>
<div class="sidebar-item s-item-3 place-items-center">
<i class="ri-user-line"></i>
</div>
<div class="sidebar-item s-item-4 place-items-center">
<i class="ri-line-chart-line"></i>
</div>
</div>
</div>
<div class="container d-grid">
<section class="main-container">
<div class="top-bar margin-b">
<h1 class="title">Dashboard</h1>
<button class="btn place-items-center">
<i class="ri-menu-3-line open-menu-icon"></i>
</button>
</div>
<div class="task-container d-grid margin-b">
<div class="exam card-1">
<p class="deadline">deadline 12:00</p>
<h2 class="exam-title">Exam - Unit 5</h2>
<p>English for beginners</p>
<div class="start-testing-container d-flex">
<p>Are you ready</p>
<a href="#">Start testing</a>
</div>
</div>
<div class="task-container-2 d-grid">
<div class="homework card-1">
<i class="ri-checkbox-circle-line check-mark"></i>
<h4>Homework</h4>
<p>For today's lesson</p>
</div>
<div class="reading card-1">
<i class="ri-checkbox-circle-line check-mark"></i>
<h4>Reading</h4>
<p>250 words per week</p>
</div>
</div>
</div>
<div class="group-task-container d-grid margin-b">
<div class="language-progress card-2">
<i class="ri-notification-3-fill bell-icon"></i>
<h2 class="margin-b">English for beginners</h2>
<p>75%</p>
<div class="progress-cover">
<div class="progress"></div>
</div>
</div>
<div class="group-info card-2">
<h3>Group Info</h3>
<p>24 students in the group</p>
<div class="group-homework card-1 d-flex">
<div>
<h4 class="group-homework-title">Group homework</h4>
<p>6 students from your group online now</p>
</div>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="today-lesson d-flex">
<div>
<h3>Today's lesson</h3>
<p>Unit 6 - Articles</p>
</div>
<h3>12:00</h3>
</div>
</div>
</div>
<div class="grammer-course d-grid">
<div class="course card-1 d-flex">
<div class="grammer d-flex">
<i class="ri-pencil-fill grammer-icon"></i>
<div>
<h3>Grammer</h3>
<p>+ 20 grammer rules</p>
</div>
</div>
<i class="ri-arrow-right-s-line"></i>
</div>
<div class="course card-1 d-flex">
<div class="dictionary d-flex">
<i class="ri-book-2-line dictionary-icon"></i>
<div>
<h3>Dictionary</h3>
<p>+ 10 new words</p>
</div>
</div>
<i class="ri-arrow-right-s-line"></i>
</div>
</div>
</section>
<section class="secondary-container">
<div class="profile d-flex">
<div class="profile-img-box">
<img src="assets/images/pexels-ali-pazani-2613260.jpg" alt="">
</div>
<h2 class="name">Madonna Miks</h2>
<p>Software Developer</p>
<div class="course discount card-1 d-flex">
<div>
<h4>Get -10% sell price</h4>
<p>for English A2 course</p>
</div>
<i class="ri-arrow-right-s-line"></i>
</div>
</div>
<div class="courses-progress">
<h2 class="progress-title">Courses Progress</h2>
<div class="course card-1 d-flex">
<p class="progress-text-1">63%</p>
<div class="progress-icon progress-bg-1 place-items-center">
<i class="ri-pencil-fill"></i>
</div>
<div>
<h3>Grammer</h3>
<p>Learn new rules</p>
</div>
</div>
<div class="course card-1 d-flex">
<p class="progress-text-2">75%</p>
<div class="progress-icon progress-bg-2 place-items-center">
<i class="ri-pencil-fill"></i>
</div>
<div>
<h3>Dictionary</h3>
<p>Learn 5 new words</p>
</div>
</div>
<div class="course card-1 d-flex">
<p class="progress-text-3">84%</p>
<div class="progress-icon progress-bg-3 place-items-center">
<i class="ri-pencil-fill"></i>
</div>
<div>
<h3>Reading</h3>
<p>Train your skill</p>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
CSS CODES
/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
/* Custom properties */
:root {
/* colors */
--primary-background-color: #ffffff;
--secondary-background-color: #F0F1F4;
--tertiary-background-color: #F8F8F8;
--dark-purple-color: #6334BA;
--normal-purple-color: #B3A1DE;
--light-purple-color: #F5F2FD;
--dark-orange-color: #ED5E31;
--normal-orange-color: #F39E6B;
--light-orange-color: #FBEBE4;
--red-color: #F26C69;
/* fonts */
--font-family: 'Poppins', sans-serif;
--font-size-xsm: 1.2rem;
--font-size-sm: 1.4rem;
--font-size-md: 1.8rem;
--font-size-lg: 2.8rem;
--font-size-xl: 4rem;
--gap: 2rem;
/* margins */
--margin-sm: 2rem;
--margin-md: 3rem;
--margin-xsm: 1.2rem;
/* paddings */
--padding-lg: 4rem;
--padding-md: 3rem;
--padding-sm: 2rem;
--padding-xsm: 1rem;
}
/* scrollbar style */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 5px;
}
.main-container:hover::-webkit-scrollbar-thumb {
background: var(--normal-purple-color);
}
.secondary-container:hover::-webkit-scrollbar-thumb {
background: var(--normal-orange-color);
}
/* Base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
color: #555;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-sm);
letter-spacing: 1px;
}
h1 {
font-size: var(--font-size-xl);
color: #333;
}
h2 {
font-size: var(--font-size-lg);
color: #444;
}
h3 {
font-size: var(--font-size-md);
color: #444;
}
h4 {
font-size: var(--font-size-sm);
color: #333;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
button {
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
}
i {
font-size: var(--font-size-md);
}
/* Reusable classes */
.place-items-center {
display: flex;
align-items: center;
justify-content: center;
}
.d-grid {
display: grid;
}
.d-flex {
display: flex;
}
.margin-b {
margin-bottom: var(--margin-md);
}
.card-1 {
padding: var(--padding-sm);
border-radius: 1rem;
transition: .3s;
}
.card-2 {
padding: var(--padding-md);
border-radius: 1rem;
transition: .3s;
}
.card-1:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
}
/*sidebar */
.dashboard {
display: flex;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100vw;
}
.sidebar {
flex-direction: column;
background-color: var(--secondary-background-color);
height: 100%;
padding: 0 2rem;
}
.sidebar-item {
padding: 1rem;
margin: 4rem 0;
border-radius: 50%;
transition: .3s;
}
.s-item-1 {
background-color: var(--normal-orange-color);
color: #fff;
}
.s-item-2:hover {
background-color: var(--dark-purple-color);
color: #fff;
}
.s-item-3:hover {
background-color: var(--red-color);
color: #fff;
}
.s-item-4:hover {
background-color: var(--normal-orange-color);
color: #fff;
}
.logo {
position: absolute;
top: 4rem;
color: var(--dark-purple-color);
}
.ri-english-input {
font-size: var(--font-size-lg);
font-weight: 700;
}
/* container */
.container {
grid-template-columns: 5fr 2.3fr;
width: 100%;
overflow: hidden;
}
section {
padding: var(--padding-lg);
}
/* main container*/
.main-container {
overflow-y: scroll;
}
.top-bar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.open-menu-icon {
font-size: var(--font-size-lg);
}
.task-container,
.task-container-2 {
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}
.exam {
background-color: var(--dark-purple-color);
}
.exam p {
color: var(--normal-purple-color);
}
.deadline {
text-transform: uppercase;
}
.exam-title {
color: #fff;
}
.start-testing-container {
align-items: center;
justify-content: space-between;
}
.start-testing-container a {
color: #fff;
}
.check-mark {
font-size: var(--font-size-lg);
display: inline-block;
margin-bottom: var(--margin-sm);
}
.homework {
background-color: var(--light-orange-color);
}
.homework .check-mark {
color: var(--dark-orange-color);
}
.homework h4 {
color: var(--dark-orange-color);
}
.homework p {
color: var(--normal-orange-color);
}
.reading {
background-color: var(--light-purple-color);
}
.reading .check-mark {
color: var(--dark-purple-color);
}
.reading h4 {
color: var(--dark-purple-color);
}
.reading p {
color: var(--normal-purple-color);
}
.group-task-container {
grid-template-columns: 2fr 3fr;
gap: var(--gap);
}
.bell-icon {
color: var(--dark-orange-color);
background-color: var(--light-orange-color);
padding: var(--padding-xsm);
border-radius: 1rem;
display: inline-block;
margin-bottom: var(--margin-sm);
}
.progress-cover {
position: relative;
height: 1rem;
width: 80%;
background-color: #f4f5f7;
border-radius: 5px;
overflow: hidden;
}
.progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 75%;
background-color: var(--normal-orange-color);
}
.group-info {
box-shadow: 0 2px 38px 0 rgba(0, 0, 0, .1);
}
.group-homework {
background-color: var(--normal-orange-color);
align-items: center;
justify-content: space-between;
margin-block: var(--margin-sm);
color: #fff;
}
.group-homework-title {
color: #fff;
}
.today-lesson {
justify-content: space-between;
}
.grammer-course {
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}
.course {
align-items: center;
justify-content: space-between;
border: 1px solid rgba(0, 0, 0, .1);
margin-bottom: 2rem;
width: 100%;
}
.grammer,
.dictionary {
align-items: center;
gap: var(--gap);
}
.grammer-icon {
color: var(--dark-purple-color);
background-color: var(--light-purple-color);
padding: var(--padding-xsm);
border-radius: 1rem;
}
.dictionary-icon {
color: var(--dark-orange-color);
background-color: var(--light-orange-color);
padding: var(--padding-xsm);
border-radius: 1rem;
}
/* secondary container*/
.secondary-container {
background-color: var(--tertiary-background-color);
overflow-y: scroll;
}
.profile {
flex-direction: column;
align-items: center;
}
.profile-img-box {
position: relative;
height: 10rem;
width: 10rem;
overflow: hidden;
border-radius: 50%;
}
.profile-img-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.discount {
margin: 2rem 0;
}
.progress-title {
margin-bottom: 2rem;
}
.progress-text-1 {
color: var(--dark-purple-color);
font-weight: 600;
}
.progress-text-2 {
color: var(--normal-orange-color);
font-weight: 600;
}
.progress-text-3 {
color: var(--red-color);
font-weight: 600;
}
.progress-icon {
padding: 1.2rem;
border-radius: 1rem;
color: #fff;
}
.progress-bg-1 {
background-color: var(--dark-purple-color);
}
.progress-bg-2 {
background-color: var(--normal-orange-color);
}
.progress-bg-3 {
background-color: var(--red-color);
}
.courses-progress .course {
justify-content: left;
gap: var(--gap);
}
/* responsive */
@media screen and (max-width:1220px) {
.secondary-container h2 {
font-size: 2rem;
}
.secondary-container h3 {
font-size: var(--font-size-sm);
}
}
@media screen and (max-width:1160px) {
.container {
display: block;
overflow: auto;
}
}
@media screen and (max-width:830px) {
::-webkit-scrollbar {
width: 0px;
}
.task-container {
grid-template-columns: 1fr;
}
}
@media screen and (max-width:700px) {
section {
padding: var(--padding-md);
}
.group-task-container {
grid-template-columns: 1fr;
}
.grammer-course {
grid-template-columns: 1fr;
}
}
@media screen and (max-width:550px) {
.sidebar {
padding: 0 1rem;
}
.logo {
top: 2rem;
}
h1 {
font-size: var(--font-size-lg);
}
section {
padding: var(--padding-sm);
}
.task-container-2 {
grid-template-columns: 1fr;
}
.card-2 {
padding: var(--padding-sm);
}
.check-mark {
margin-bottom: var(--margin-xsm);
}
}
Don't forget to Subscribe to our Youtube Channel for more.
.jpg)
0 Comments