Responsive Admin Dashboard using HTML CSS and JavaScript with Light & Dark Mode

Responsive Admin Dashboard using HTML CSS and JavaScript with Light & Dark Mode

In this beginner-friendly Web development tutorial, I'm going to teach you how to create a responsive crypto/banking dashboard using HTML, CSS, and JavaScript. We'll be using modern CSS modules like CSS Grid, CSS Flexbox, CSS Variables, and CSS Media Queries to make our dashboard responsive on tablets and mobile phones. With CSS Variables, we will also be able to change our theme (light and dark) via JavaScript.

Source Code: https://egattor.com/html-css-project-tutorials/responsive-crypto-admin-dashboard.html


Timestamps:
00:00:00 Intro (Project Overview)
00:05:20 Material Icons & Google Fonts link
00:06:52 Navigation Bar Markup
00:10:15 CSS Root Variables and General Elements Styles
00:17:42 Navigation Bar Styles
00:25:00 Sidebar Markup
00:31:00 Sidebar Styling
00:40:00 Middle Section Cards Markup
00:44:40 Middle Section Cards Styles
00:54:45 Monthly Reports Markup
00:57:34 Monthly Reports Styles
00:59:45 Fast Payment Markup
01:01:45 Fast Payment Styles
01:06:16 Chart JS
01:12:38 Investments Markup
01:16:52 Investments Styles
01:20:50 Recent Transactions Markup
01:26:38 Recent Transactions Styles
01:31:25 Media Queries For Tablets and Mobile Phones (Responsive Design)
01:40:40 Show/Hide Sidebar on small screens using JavaScript
01:44:30 Theme Change Functionality