Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Responsive Admin Dashboard Using HTML, CSS & JavaScript with Light & Dark Mode

EGATOR via YouTube

Overview

Learn to build a responsive admin dashboard for an e-commerce website using HTML, CSS, and JavaScript in this comprehensive tutorial. Master modern web development techniques including CSS variables, Grid, Flexbox, and media queries for responsive design. Implement light and dark mode themes, create smooth animations, and populate dynamic content using JavaScript. Follow along step-by-step to construct a fully functional dashboard with a sidebar, main content area, and data visualizations. By the end, gain practical skills in front-end development and responsive design principles applicable to real-world projects.

Syllabus

Intro Project Overview
Project Folder Structure and Files
Adding Material Icons CDN
Aside/Sidebar Markup
CSS Variables and General Styles
Aside and Sidebar Styles
Main Section Calendar & Insights Markup
Main Section Calendar & Insights Styles
Recent Orders Orders Table Markup
Recent Orders Orders Table Styles
Right Section Top & Recent Updates Markup
Right Section Top & Recent Updates Styles
Right Section Sales Analytics Markup
Right Section Sales Analytics Styles
Media Queries 1 Responsive Design For Big Tablets and Small Laptops
Media Queries 2 Responsive Design For Small Tablets and Mobile Phones
Showing and Hiding of the Sidebar using JavaScript
Animating Sidebar
Theme Change/Toggle Functionality Light & Dark Mode with JavaScript
Filling Table with Orders using JavaScript

Taught by

EGATOR

Reviews

Start your review of Responsive Admin Dashboard Using HTML, CSS & JavaScript with Light & Dark Mode

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.