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

Create a Responsive Admin Dashboard For an Ecommerce Website using HTML, CSS, and JavaScript.

In this tutorial, I'm going to show you how to use modern HTML, CSS, and JavaScript to create a completely responsive admin dashboard with light and dark mode theme functionality. We'll be using CSS Variables, CSS Grid, CSS Flexbox, Media queries for our responsive design, and CSS transitions and animations for some cool animation effects.

I've made the source code for all projects available for the past few months, but now I need your support to keep bringing you even better content. Please join my Patreon and have access to all my project source code, images, and live demo! You'll also have access to all future projects, Figma files, my upcoming Udemy course, and more!

Timestamps
00:00:00 Intro (Project Overview)
00:02:17 Project Folder Structure and Files
00:03:30 Adding Material Icons CDN
00:04:20 Aside/Sidebar Markup
00:10:10 CSS Variables and General Styles
00:20:03 Aside and Sidebar Styles
00:28:52 Main Section (Calendar & Insights) Markup
00:33:30 Main Section (Calendar & Insights) Styles
00:42:25 Recent Orders (Orders Table) Markup
00:44:27 Recent Orders (Orders Table) Styles
00:47:28 Right Section (Top & Recent Updates) Markup
00:51:40 Right Section (Top & Recent Updates) Styles
00:57:05 Right Section (Sales Analytics) Markup
00:59:43 Right Section (Sales Analytics) Styles
01:04:10 Media Queries 1 (Responsive Design For Big Tablets and Small Laptops)
01:09:42 Media Queries 2 (Responsive Design For Small Tablets and Mobile Phones)
01:16:45 Showing and Hiding of the Sidebar using JavaScript
01:18:25 Animating Sidebar
01:19:40 Theme Change/Toggle Functionality (Light & Dark Mode with JavaScript)
01:22:35 Filling Table with Orders using JavaScript

[ManaEbigi]

I don't usually comment on tutorials, but for this particular one I'm wowed at the way and manner he is taking it step by step. My toddler or my grandma can easily get along with his teaching. Keep it up sir I really appreciate your work. More blessings

[nathannelson]

This was an amazing tutorial! Loved the teaching style and even though I knew a lot going in, I did learn some new things! Appreciate the time and effort it took you to make this video for everyone to learn.

[johnnycardoso]

Excellent tutorial. Application of semantic html, CSS and javascript, simple and functional. Thank you for sharing your knowledge in an objective and practical way. Your video is 1 hour long but here were about 6 hours of a lot of learning to put into practice. Beautiful project. I wish you much success. Hugs from Brazil 👏👏🙏

[WildHowlYT]

Building this without a framework is really impressive, good job!

[BobsProgrammingAcademy]

This is a great tutorial. I am impressed with the high quality of your work.

[heyjohnnydeveloper]

Thank you so much my friend,
sensational content, I learned a lot and I'm going to do a project based on this to test my knowledge. Congratulations on the initiative and success!!

[diegosantosmoto]

Wow! That's a great project! You are a master of web dev. Greetings from Brazil! 🏁👏👏👏

[vishnuravva]

It really helped me build such a great UI and understood responsiveness concepts very well. Learnt something new. Looking forward to have such content in future too.

[joelson]

Great job, your practical tips have been very helpful! 😉

[jonasefanvasquezyanez]

Excellent job thank you very much i followed all the process. super helpful.

[jakabostjancic]

I started learning web dev 2 weeks ago and this is the most interesting video I've watched so far. Everything explained clearly, easy to follow along and entertaining too! Thank you a lot :)

[ygvanz]

Excellent tutorial. Learned a lot from this!

[eloquentsites]

I must say your presentation is premium, just like your content. Thank you!

[withrejkapermana]

This is insane, I like it!. I'm following the entire tutorial. the video was less than 2 hour, But I follow it for 4 hour. that's okay. :)

[Mr.bonbon]

Huge respect for you guys i'm backend developer myself i can make all logics but when it comes to frontend..oh boy i can't even differentitate between shades or color how am i supposed to become creative with how page will look and you guys do it so easily. or look to us

[nandu]

Awesome way of writing CSS with minimum line of code . Thanks a lot brother

[jotaodiceu]

Thanks from Brazil! Great tutorial, congratulations 🎉🎈

[winstreakpro]

Woow. You did a great job actually and I appreciate it for your hard work ❤

[miguelalejandrobritorausse]

You just earned a subscriber my friend. This is awesome dude. Cheers from Venezuela, south américa.

[FeelTheBeatStatus]

this project was very useful for my first-year web project.❤❤ Thank