Facebook SDK

Responsive Task Management Dashboard using HTML & CSS

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.

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.

Output after step 1 : 

Responsive Task Management Dashboard using HTML and CSS | Dashboard Design

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.

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.

Output after step 2 :

Responsive Task Management Dashboard using HTML and CSS | Dashboard Design

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.

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.

Output after step 3 & 4 :

Responsive Task Management Dashboard using HTML and CSS | Dashboard Design

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.

Step 6 : Time to style. Again follow the below css code.

Output after step 5 & 6 :

Responsive Task Management Dashboard using HTML and CSS | Dashboard Design

Step 7 : Now the final step is to add responsiveness to the build. We will be using media queries inside the CSS file.

Final Demo of Task Management Dashboard : 

Responsive Task Management Dashboard using HTML & CSS

Thank you for reading the article. 

Credits : Aybuke Ceylan

Responsive Task Management Dashboard with HTML and CSS | Download Source Code

Download Code Files

Post a Comment

Previous Post Next Post