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.

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: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

[babarraza]

Bro Your are The Finest Front end Developer I ever seen, You should start a course on zero to hero front end which technics and frameworks you use for front end development!

[Ikejosh]

Finished the code along. Thank you so much. I like the fact you use modern CSS tools and your markup is semantic and up to date. Great one

[derminator]

Amazing content! One of the best I have seen in youtube. I really hope you can continue this admin dashboard by doing tutorial like this for the rest of the pages like exchange page, wallet page, transactions page etc. as it would be very helpful for a full project. Thankyou!

[toxico]

you are by far one of the best youtubers that I like to watch. I like how you actually teach us about designs too and you don't act like the other ones that copies designs from other pages. You are original. I hope you keep making these videos. Love from Canada!

[eastelldev]

I have successfully coded it to React. Even if am an intermediate, full-stack dev... I really learn a lot from your content Thanks a lot and keep

[benjaminibok]

I just finished building this...

Though it took me 2 days, but it was a super awesome experience, thanks so much for this.

Guys like you make the world a much more better place than most of them trying to take over Mars...🤪

I already learnt so much PHP backend tricks in your blog application tutorials.😅😅😅

Keep up the good work!

[rahulgoswami]

Man You're the best designer exist on just love it.❣

[benjaminibok]

Cool work, but I just don't like tutorials with only background music...

Just doesn't feel "tutorial" enough for me.

But like I said, I always admire your work.

Nice one, keep up.

[izharkhurshid]

Your content Is awesome. Just one suggestion use Your own voice instead of music. Thanks

[АбдулхафизЖолдошов]

It could be amazing, if you added transition to the changing themes. Actually I am interested in this video. Thank you, good luck!

[ОлегПотапенко-хь]

Thanks bro! Please make a continuation of this project. You can connect the backend. Please continue projects on creating dashboards.

[michaelsglas]

Ohhh my frickin goodness you’re gifted

[renansantos]

Great video, very easy to follow and understand. Your code seems very clean and easy to maintain, congrats!

[mfonisoayara]

I have gone through a lot of contents both paid and free Youtube vids like this. I have never seen a more amazing content. The quality of this is just on another level. Thank you very much for putting this out there. I bless the day I came across your content. It changed my frontend career forever and moved me to the next level. Please how can I get access to more contents from you, paid or free?

[anony_drew]

One of my fav frontend Dev.. Thanks a lot for inspiring me. I have one suggestion with regards to the dashboard-mobile, where you displayed the amounts etc; is it possible you could make that side more of a carousel or swipe.. Thank you

[suleymanbalk]

Thank you bro: you just made my day. I know that you have already answered below but Can ı use it on my projects?

[ofilichinonso]

I love you man and you've gained a subscriber

[AdrianzDev]

Thank you!!
You helped me a lot!
I had to code it in React for a web application.

[chukwuemekaandreozomma]

I love your designs and the way you make them simple.

Can you give us a dashboard tutorial in which when one clicks on the nav-links on the sidebar (from my perspective, it seems fixed), the main content changes to content which the link clicked contains instead of the entire webpage changing?

More power to you. Lots of love from Nigeria. You have plus one subscriber ie me.

[URandomGuy]

First Comment BRO!! I LOVE your videos!❤