Free Projects , Project ,

Admin Dashboard

In this project we are going to make a Admin Dashboard using HTML, CSS and JavaScript. We will make the dashboard completely Responsive with Light mode and Dark mode functionality

What will you Learn in the Project?

  1. How to create Project structure?
  2. How to add the Material Icons to your project?
  3. How to add the Side Bar and CSS variables?
  4. How to make Recent Orders mark up?
  5. How to use the Media Queries making the website Responsive?
  6. How to make UI in Responsive way?
  7. How to make Dark Mode and Light mode Using Toggle Functionality
  8. How to make styling using CSS?

Tools & Technology Used

  • Visual Studio Code
  • HTML
  • CSS
  • JavaScript

Tasks Performed

As part of this project, we will be performing following tasks:

Task-1: Create a Project Folder Structure and Add Material Icons and markup Side Bar.

Task-2: Create CSS Variables and General Styles

Task-3: Make styling to the Side Bar Mark up.

Task-4: Create a Main Section and add Calendar and Insights Mark up.

Task-5: Make Styling to the Calendar in the Main section.

Task-6: Create Recent Orders using Table  and make Mark up and add styling.

Task-7: Create Right Section and add Recent Updates make it as mark up and add styling.

Task-8: Create Sales Analytics and markup and add the styling.

Task-9: Create a Media query to add responsive design for Big Tablets and small Laptops.

Task-10: Create a Media query to add responsive design for small Tablets and Mobile phones.

Task-11: Show the hiding Side Bar using JavaScript and make Animation

Task-12: Create a Toggle Functionality using JavaScript and fill the table with the orders using JS.

Course Content

Expand All
+1 enrolled
Not Enrolled

Skills you will develop

Create Project Folder Structure and Files

Work with the Side Bar and CSS variables

Work with the Media Queries

Work with JavaScript

Make the website Responsive

Make Toggle Functionality

Add the Material Icons

Share with Friends and earn points!!