Hello Coders, In this article we are going to learn how to create Responsive Task Management Dashboard using HTML and CSS.
What is Dashboard?
A dashboard is something where users can manage all of their things in one place. for example an admin dashboard panel of an website can manage all of their website related stuff in one place. Dashboard can be used in companies like where they keep track of all the work.
What is Responsive?
In simple words we can say is, no matter in what screen sizes (mobile, tablet, laptop, desktop) we open a website, It always looks good on all those screen sizes, meaning it responds accordingly. We will use css media queries to make our build responsive.
What are CSS Variables?
You might have heard about variables in a programming language. They are used to store some data or value. Similarly, we can use variables in css to store color values, css property if it is being used repeatedly.
In this article we are going to be building a dashboard where users can manage their all the tasks in one place. I have also provided necessary video tutorial as well as complete step by step guide and all the resources, images, complete source code which you can get by clicking on the download button at the end of this article.
Task Management Admin Dashboard using HTML and CSS | Video Tutorial
Consider watching the video tutorial, if you find it hard to understand this article. In the video I have also provided step by step tutorial to help you. I would really suggest you to follow along with this article to practice better.
Task Management Dashboard in HTML and CSS | Free Source Code
Below I have provided step by step tutorial, follow the steps to build it. All the resources used in this project can be downloaded from the button at the bottom of this article.
How do I create task management dashboard in HTML? HTML source code
Create an index.html file and add basic structure of the html document. After that create a div tag with class ‘task-manager’. Then start following the below steps.
<!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" />
<title>Task Management Dashboard UI</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="task-manager"></div>
</body>
</html>
Step 1 : Inside the task manager div we are going to have another div tag with class ‘left-bar’. Inside the left bar div we will create three main divs i.e upper part, left content, category list. Follow the below code and start coding.
<!-- left bar starts -->
<div class="left-bar">
<div class="upper-part">
<div class="actions">
<div class="circle"></div>
<div class="circle-2"></div>
</div>
</div>
<!-- left content starts -->
<div class="left-content">
<ul class="action-list">
<li class="item">
<img class="feather feather-inbox" src="svg/inbox.svg" alt="" />
<span>Inbox</span>
</li>
<li class="item">
<img class="feather feather-star" src="svg/star.svg" alt="" />
<span> Today</span>
</li>
<li class="item">
<img class="feather feather-calendar" src="svg/calender.svg" alt="" />
<span>Upcoming</span>
</li>
<li class="item">
<img class="feather feather-hash" src="svg/hash.svg" alt="" />
<span>Important</span>
</li>
<li class="item">
<img class="feather feather-users" src="svg/users.svg" alt="" />
<span>Meetings</span>
</li>
<li class="item">
<img class="feather feather-trash" src="svg/trash.svg" alt="" />
<span>Trash</span>
</li>
</ul>
<ul class="category-list">
<li class="item">
<img class="feather feather-users" src="svg/users.svg" alt="" />
<span>Family</span>
</li>
<li class="item">
<img class="feather feather-sun" src="svg/sun.svg" alt="" />
<span>Vacation</span>
</li>
<li class="item">
<img class="feather feather-trending-up" src="svg/trending.svg" alt="" />
<span>Festival</span>
</li>
<li class="item">
<img class="feather feather-zap" src="svg/zap.svg" alt="" />
<span>Concerts</span>
</li>
</ul>
</div>
<!-- left content ends -->
</div>
<!-- left bar ends -->
Output after step 1 :
How do I design task management dashboard in CSS? CSS source code
Create an styles.css file and link the file to our html document. Now we are going to style the left bar. Before that, we will need a custom font from google fonts and we are going to create CSS variables so that we can use them throughout our project.
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
Step 2 : Now lets start styling the left bar. Below is the css code which you can follow. Start typing the below css code from top to bottom and start observing the results.
body,
.item,
.top-part,
.top-part .count {
display: flex;
align-items: center;
}
body {
margin: 0;
justify-content: center;
flex-direction: column;
overflow: auto;
width: 100%;
height: 100vh;
padding: 20px;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
background-image: linear-gradient(
21deg,
rgba(64, 83, 206, 0.3697003234675773) 68%,
rgba(255, 206, 196, 0.5) 163%
),
linear-gradient(
163deg,
rgba(49, 146, 170, 0.07944489965716128) 86%,
rgba(239, 112, 138, 0.5) 40%
),
linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),
linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
background-blend-mode: overlay, multiply, color, normal;
}
ul {
list-style-type: none;
padding: 0;
}
.task-manager {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1200px;
height: 90vh;
max-height: 900px;
background: #fff;
border-radius: 4px;
box-shadow: 0 0.3px 2.2px rgba(0, 0, 0, 0.011), 0 0.7px 5.3px rgba(0, 0, 0, 0.016),
0 1.3px 10px rgba(0, 0, 0, 0.02), 0 2.2px 17.9px rgba(0, 0, 0, 0.024),
0 4.2px 33.4px rgba(0, 0, 0, 0.029), 0 10px 80px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.left-bar {
background-color: var(--bg-color);
width: 230px;
border-right: 1px solid #e3e7f7;
position: relative;
}
.left-content {
padding: 40px;
}
.item {
color: var(--main-color);
margin-bottom: 14px;
font-weight: 500;
}
.item img {
width: 14px;
height: 14px;
color: currentcolor;
margin-right: 10px;
}
.category-list {
margin-top: 50px;
}
.category-list .item {
color: var(--secondary-color);
}
.actions {
padding: 12px;
display: flex;
justify-content: space-between;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
background-color: #fe4d46;
box-shadow: 14px 0 0 0 #fbc023, 28px 0 0 0 #7dd21f;
}
.circle-2 {
border-radius: 50%;
width: 4px;
height: 4px;
background-color: #d5d7e3;
box-shadow: -6px 0 0 0 #d5d7e3, 6px 0 0 0 #d5d7e3;
}
Output after step 2 :
Step 3 : Lets get back to our index.html file. We will be building the middle part now. Go ahead and create a div inside the task-manager div with class ‘page-content’.
Inside this we will have two more divs i.e ‘content-categories’ and ‘tasks-wrapper’. Follow the below code.
<!-- page content starts -->
<div class="page-content">
<div class="header">Today Tasks</div>
<!-- contnet categories starts -->
<div class="content-categories">
<div class="label-wrapper">
<input class="nav-item" name="nav" type="radio" id="opt-1" />
<label class="category" for="opt-1">All</label>
</div>
<div class="label-wrapper">
<input class="nav-item" name="nav" type="radio" id="opt-2" checked />
<label class="category" for="opt-2">Important</label>
</div>
<div class="label-wrapper">
<input class="nav-item" name="nav" type="radio" id="opt-3" />
<label class="category" for="opt-3">Notes</label>
</div>
<div class="label-wrapper">
<input class="nav-item" name="nav" type="radio" id="opt-4" />
<label class="category" for="opt-4">Links</label>
</div>
</div>
<!-- -->
<!-- contemt categories ends -->
<!-- tasks wrapper starts -->
<div class="tasks-wrapper">
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-1" checked />
<label for="item-1">
<span class="label-text">Dashboard Design Implementation</span>
</label>
<span class="tag approved">Approved</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-2" checked />
<label for="item-2">
<span class="label-text">Create a userflow</span>
</label>
<span class="tag progress">In Progress</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-3" />
<label for="item-3">
<span class="label-text">Application Implementation</span>
</label>
<span class="tag review">In Review</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-4" />
<label for="item-4">
<span class="label-text">Create a Dashboard Design</span>
</label>
<span class="tag progress">In Progress</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-5" />
<label for="item-5">
<span class="label-text">Create a Web Application Design</span>
</label>
<span class="tag approved">Approved</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-6" />
<label for="item-6">
<span class="label-text">Interactive Design</span>
</label>
<span class="tag review">In Review</span>
</div>
<div class="header upcoming">Upcoming Tasks</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-7" />
<label for="item-7">
<span class="label-text">Dashboard Design Implementation</span>
</label>
<span class="tag waiting">Waiting</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-8" />
<label for="item-8">
<span class="label-text">Create a userflow</span>
</label>
<span class="tag waiting">Waiting</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-9" />
<label for="item-9">
<span class="label-text">Application Implementation</span>
</label>
<span class="tag waiting">Waiting</span>
</div>
<div class="task">
<input class="task-item" name="task" type="checkbox" id="item-10" />
<label for="item-10">
<span class="label-text">Create a Dashboard Design</span>
</label>
<span class="tag waiting">Waiting</span>
</div>
</div>
<!-- tasks wrapper ends -->
</div>
<!-- -->
<!-- page content ends -->
Step 4 : Lets style it. Follow the below css code from top to bottom. I have added css code in such a way that, beginners can understand as they code.
.page-content {
display: flex;
flex-direction: column;
flex: 1;
padding: 40px 20px 0 20px;
}
.page-content .header {
font-size: 26px;
color: var(--main-color);
margin-top: 30px;
}
.content-categories {
display: flex;
justify-content: space-evenly;
width: 100%;
border-bottom: 1px solid #ddd;
padding: 20px 0;
}
.nav-item {
display: none;
}
.category {
font-weight: 500;
color: var(--secondary-color);
border-bottom: 1px solid #ddd;
transition: 0.4s ease-in;
padding: 20px 30px;
cursor: pointer;
}
#opt-1:checked + label,
#opt-2:checked + label,
#opt-3:checked + label,
#opt-4:checked + label {
color: var(--checkbox-color);
border-bottom: 2px solid var(--checkbox-color);
}
/* */
.task-item {
display: none;
}
.tasks-wrapper {
padding: 30px 0;
flex: 1;
overflow-y: auto;
height: 100%;
padding-right: 8px;
}
.task {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 16px;
padding-left: 30px;
color: var(--task-color);
font-size: 13px;
font-weight: 500;
}
.task:hover {
transform: translatex(2px);
}
.task label {
cursor: pointer;
}
label .label-text {
position: relative;
}
label .label-text:before {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 1px solid #ddd;
border-radius: 2px;
left: -24px;
transition: 0.2s ease;
}
.task-item:checked + label .label-text:before {
background-color: var(--checkbox-color);
border: none;
background-image: url('svg/check.svg');
background-repeat: no-repeat;
background-size: 10px;
background-position: center;
border: 1px solid var(--checkbox-color);
}
.tag {
font-size: 10px;
padding: 4px 8px;
border-radius: 20px;
}
.tag.approved {
background-color: var(--tag-color-one);
color: var(--tag-color-text-one);
}
.tag.progress {
background-color: var(--tag-color-two);
color: var(--tag-color-text-two);
}
.tag.review {
background-color: var(--tag-color-three);
color: var(--tag-color-text-three);
}
.tag.waiting {
background-color: var(--tag-color-four);
color: var(--tag-color-text-four);
}
.upcoming {
border-bottom: 1px solid #ddd;
padding-bottom: 30px;
margin-bottom: 30px;
}
Output after step 3 & 4 :
Step 5 : Now for the final part, we need to build the right bar. We will be using some images which you can get from the download button at the bottom of this article.
<!-- right bar starts -->
<div class="right-bar">
<div class="top-part">
<img class="feather feather-users" src="svg/users.svg" alt="" />
<div class="count">6</div>
</div>
<div class="header">Schedule</div>
<div class="right-content">
<div class="task-box yellow">
<div class="description-task">
<div class="time">08:00 - 09:00 AM</div>
<div class="task-name">Product Review</div>
</div>
<div class="more-button"></div>
<div class="members">
<img src="images/img1.jpg" alt="member" />
<img src="images/img2.jpg" alt="member-2" />
<img src="images/img3.jpg" alt="member-3" />
<img src="images/img4.jpg" alt="member-4" />
</div>
</div>
<div class="task-box blue">
<div class="description-task">
<div class="time">10:00 - 11:00 AM</div>
<div class="task-name">Design Meeting</div>
</div>
<div class="more-button"></div>
<div class="members">
<img src="images/img5.jpg" alt="member" />
<img src="images/img6.jpg" alt="member-2" />
<img src="images/img7.jpg" alt="member-3" />
</div>
</div>
<div class="task-box red">
<div class="description-task">
<div class="time">01:00 - 02:00 PM</div>
<div class="task-name">Team Meeting</div>
</div>
<div class="more-button"></div>
<div class="members">
<img src="images/img1.jpg" alt="member" />
<img src="images/img2.jpg" alt="member-2" />
<img src="images/img3.jpg" alt="member-3" />
<img src="images/img4.jpg" alt="member-4" />
</div>
</div>
<div class="task-box green">
<div class="description-task">
<div class="time">03:00 - 04:00 PM</div>
<div class="task-name">Release Event</div>
</div>
<div class="more-button"></div>
<div class="members">
<img src="images/img5.jpg" alt="member" />
<img src="images/img6.jpg" alt="member-2" />
<img src="images/img7.jpg" alt="member-3" />
<img src="images/img8.jpg" alt="member-4" />
<img src="images/img9.jpg" alt="member-5" />
</div>
</div>
<div class="task-box blue">
<div class="description-task">
<div class="time">08:00 - 09:00 PM</div>
<div class="task-name">Release Event</div>
</div>
<div class="more-button"></div>
<div class="members">
<img src="images/img5.jpg" alt="member" />
<img src="images/img6.jpg" alt="member-2" />
<img src="images/img7.jpg" alt="member-3" />
<img src="images/img8.jpg" alt="member-4" />
<img src="images/img9.jpg" alt="member-5" />
</div>
</div>
<div class="task-box yellow">
<div class="description-task">
<div class="time">11:00 - 12:00 PM</div>
<div class="task-name">Practise</div>
</div>
<div class="more-button"></div>
<div class="members">
<img src="images/img1.jpg" alt="member" />
<img src="images/img2.jpg" alt="member-2" />
<img src="images/img3.jpg" alt="member-3" />
<img src="images/img4.jpg" alt="member-4" />
</div>
</div>
</div>
</div>
<!-- right bar ends -->
Step 6 : Time to style. Again follow the below css code.
.members {
display: flex;
margin-top: 14px;
}
.members img {
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 4px;
object-fit: cover;
}
.right-bar {
width: 320px;
border-left: 1px solid #e3e7f7;
display: flex;
flex-direction: column;
}
.right-bar .header {
font-size: 20px;
color: var(--main-text-color);
margin-left: 30px;
}
.top-part {
padding: 30px;
align-self: flex-end;
}
.top-part img {
width: 14px;
height: 14px;
color: var(--main-color);
margin-right: 14px;
}
.top-part .count {
font-size: 12px;
border-radius: 50%;
width: 24px;
height: 24px;
background-color: #623ce8;
color: #fff;
justify-content: center;
}
.right-content {
padding: 10px 40px;
overflow-y: auto;
flex: 1;
}
.task-box {
position: relative;
border-radius: 12px;
width: 100%;
margin: 20px 0;
padding: 16px;
cursor: pointer;
box-shadow: 2px 2px 4px 0px rgba(235, 235, 235, 1);
}
.task-box:hover {
transform: scale(1.02);
}
.time {
margin-bottom: 6px;
opacity: 0.4;
font-size: 10px;
}
.task-name {
font-size: 14px;
font-weight: 500;
opacity: 0.6;
}
.yellow {
background-color: var(--box-color);
}
.blue {
background-color: var(--box-color-2);
}
.red {
background-color: var(--box-color-3);
}
.green {
background-color: var(--box-color-4);
}
.more-button {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #8e92a4;
box-shadow: 0 -4px 0 0 #8e92a4, 0 4px 0 0 #8e92a4;
opacity: 0.4;
right: 20px;
top: 30px;
cursor: pointer;
}
/* */
Output after step 5 & 6 :
Step 7 : Now the final step is to add responsiveness to the build. We will be using media queries inside the CSS file.
@media screen and (max-width: 900px) {
.left-bar {
display: none;
}
}
@media screen and (max-width: 700px) {
.task-manager {
flex-direction: column;
overflow-y: auto;
}
.right-bar,
.page-content {
width: 100%;
display: block;
}
.tasks-wrapper {
height: auto;
}
}
@media screen and (max-width: 520px) {
.page-content {
padding: 40px 10px 0 10px;
}
.right-content {
padding: 10px 16px;
}
.category {
padding: 20px;
}
}
Final Demo of Task Management Dashboard :
Thank you for reading the article.
Credits : Aybuke Ceylan
Responsive Task Management Dashboard with HTML and CSS | Download Source Code
