ASMR Programming - Responsive Admin Dashboard with Light & Dark Mode - No Talking

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.

Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :

Varmilo Youtube : @varmiloofficial4675

source of all projects also will upload in AsmrProg github page :

Video Contents :

00:00:00 - Intro
00:01:03 - Warming hands
00:01:09 - Main codes
00:01:52 - Adding icons & fonts
00:03:30 - Sidebar Coding
00:09:30 - Main styles
00:13:12 - Container styles
00:13:45 - Sidebar styles
00:20:21 - Analytics section
00:21:50 - Analytics styles
00:28:15 - New users
00:30:35 - New users styles
00:33:10 - Recent orders
00:34:44 - Orders JS
00:37:22 - Recent orders styles
00:40:08 - Nav section
00:42:43 - Nav styles
00:47:06 - User profile
00:47:41 - Reminders
00:50:53 - User profile styles
00:52:22 - Reminders styles
00:57:41 - Responsive codes
01:10:06 - JS codes
01:12:54 - Final Result

Other Video's :

Subscriptions, good comments and likes are great support for me 😍
Don't re-upload or edit the videos on your channel.
All copyrights by AsmrProg.

About AsmrProg Channel :

Here I upload ASMR programming tutorials related to HTML, CSS, Sass, JavaScript, React, PHP, Frameworks such as Bootstrap and more along with creative UI/UX Designs.
AsmrProg is a community for web developers from all levels to learn and grow their skills in front-end and back-end web development.

AsmrProg
Asmr Prog
ASMR Programming
ASMR Coding
ASMR keyboard typing
ASMR web design
ASMR coding html
ASMR coding website
No Talking ASMR
No Talking Coding
No Talking Programming

[eraye]

As a software developer, dealing with complex projects and struggling with errors all day, watching simple things like this relaxes me and clears my mind. Thank you for your effort.

[KM-neft]

I just found this channel today and it honestly changed my life. I am a CS student and this is so helpful for me to learn. Thank you so much for your work.

[aimhigh]

Its amazing to watch someone build something from scratch. Well done.

[bruno]

I learned more watching these asmr and repeating with my own sites than studying to college

[asher]

Man, this is just so cool and well done... You make it look so easy and also made me realize that i need to practice more! *VERY* good!

[ummehanyarozshandaanny]

Is it only me who watched the whole tutorial with fascination?
Great job, sir.

[stackercoding]

I remember when I started to code I thought I was going to be a frontend dev, it was really fun to create react apps and show data gathered from an API, but when I landed on my first job (small startup but managing a relatively big project), oh boy, I lasted like 2 or 3 months as a frontend developer until I was moved to the backend team, and from that moment I kept in the backend even after leaving that startup. Frontend is cool for personal projects but when something needs a refactor you really need to be an absolute master in CSS to build good stuff. Since then I always have a big respect for frontend devs, people use to think its the easiest programming role but it actually takes a lot of knowledge to be good in frontend.

[tresaidhy]

All the plugins vs code offers is making me want to switch. Awesome job man I learned so much watching you.

[techsavannah]

This channel could not have come at a better time in my learning journey. This video helped me get out of the tutorial spiral I was in, and actually just build something and put the concepts I've been learning to actual practice.
Thank you so much for this. Please do more and more.

[BillaBhai-nl]

i dont have words to describe it . I am one the and finished Only HTML . Love it Man

Thanks For the Source Code

[plaridelsingsong]

Dude you make the best responsive design and I'm learning a lot from you. Keep it up!

[auricaputri]

I just found this channel, then followed the tutorial for light & dark mode and I learned a lot. amazing channel

[arianshah_dev]

You've got an eye for design, just like me. When you code, I hope you always think of these words: "Design is not just what it looks like and feels like. Design is how it works."

[Hybridham]

Just found out my new favorite channel to chill out while coding ! Awesome vid mate !

[CGAR_]

Another way to do the dark/light theme is to change the value of the color variables with JS

In light theme --maincolor = #000

In dark theme --maincolor = #fff

Then you don't have to add any extra css, since the JavaScript changes the value of the variables you already put

[DiarreSoft]

i am new at programing and your videos has changed my life im learning from you thank you so much

[mromanjoep]

Congrats AsmrProg keep your work and dont give up!

[AsadKhan-gpsk]

ironic isn't it

i came here to reduce headache caused by programming web apps through the ASMR of programming web apps

my problem was my solution this whole time

[Anime_cinema]

I'm so excited because I found your channel and I'm grateful for what you do. I appreciate everything and I hope you continue I hope you help us with your information. ❤As you do

[krishkhanal]

Yeah..now something interesting came 🎉. Keep uploading ❤