ASMR Programming - Responsive Admin Dashboard with Light & Dark Mode - No Talking
HTML-код
- Опубликовано: 16 май 2024
- 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.
Source Code : github.com/AsmrProg-YT/Dashbo...
Join the full "100 Days Of JavaScript Code - Web Development Bootcamp" course :
• 100 Days of JavaScript...
Keyboard Link : en.varmilo.com/keyboardprosce...
Varmilo RUclips : @varmiloofficial4675
Web Design Coding Bootcamp Playlist : • ASMR Web Design Bootcamp
source of all projects also will upload in AsmrProg github page :
github.com/AsmrProg-YT
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
Asmr Game Coding Playlist : • ASMR Game Coding
Other Video's :
Coding IOS (Iphone) Calendar : • ASMR Programming - Cod...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
Coding a Snake Game : • ASMR Programming - Cod...
Movie Guide App Coding : • ASMR Programming - Mov...
Coding IOS (IPhone) Dynamic Music : • ASMR Programming - Cod...
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
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.
Thanks a lot for great words 🙏
Weird way to flex.
@Deminogg why!
@Deminogg right? "Simple things"
🙄
Its amazing to watch someone build something from scratch. Well done.
Thanks a lot 🙏❤️
I learned more watching these asmr and repeating with my own sites than studying to college
Great, keep going on and LIKE videos please ❤️🙏
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.
Keep it up 😉🙏❤️
nice keep going
🙏❤️
CS student and you don't know how to make a website? Leave that ChatGPT alone bro
Learning need time!
All the plugins vs code offers is making me want to switch. Awesome job man I learned so much watching you.
Thanks 🙏❤️
Please LIKE video to support me, because I have worked hard for this tutorial ❤🙏 Source Code Link Added to description 😉 Don't forget to follow our github 🙏
You are top ⭐❤️
I need your supports, please LIKE and Share video to support my channel 🙏❤️
Все я лайкнула
are you from Bangladesh ?
Is there source code for this video if so where can I find it
i am new at programing and your videos has changed my life im learning from you thank you so much
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!
Thanks a lot, LIKE video to support my channel please 🙏❤️
I agree with you
Thanks bro 🙏❤️
@@AsmrProg always 💪
🙏❤️
Dude you make the best responsive design and I'm learning a lot from you. Keep it up!
Thanks 🙏❤️
@@AsmrProgI have a suggestion for you: sorting algorithm visualizer.
🧐🤔
@@AsmrProg what does that mean?
@@AsmrProg is that a yes or no
Congrats AsmrProg keep your work and dont give up!
🙏❤️
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
Just found out my new favorite channel to chill out while coding ! Awesome vid mate !
Thanks 🙏❤️
+1 🤞😉
🙏❤️
Is it only me who watched the whole tutorial with fascination?
Great job, sir.
Thanks, please like to support 🙏❤️
@@AsmrProg of course
Please share more tutorials 🙏🏻
Yes, we will have more 😉🙏❤️
@@AsmrProg thanks in advance
🙏❤️
It’s so fun to watch + I definitely learned a lot from the video. Thank you for sharing your work 😃
Thanks 🙏❤️
Keep it up
😉🙏
I just subscribed because you give me the best ideas for projects and web design. keep it up bro.
Thanks 🙏❤️
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.
Thanks so much for your great vibes and energy, Sorry for late response 🙏
What's your VS Code color theme?
Very good video, well thought out and well done. You sir are a web dev genie.
Thanks a lot 🙏❤️
I just found this channel and I never knew I would enjoy ASMR programming as much as I did. Thanks for this, R+ and subscribed.
Thanks so much 🙏❤️
thanks for this project you're my teacher🤝
Keep it Up!!!!🔥🔥🔥
Thanks a lot 🙏
thank you sir for your effort sir, i'm really learning alot from your series
Thanks a lot 🙏❤️ like video to support us
By watching these tutorials, we will become a professional web developer👍
Cool. This makes me relax and refresh the things I forgot about code. Interesting 🎉❤
Thanks 🙏❤️
That's one of the nicest proj. We can visualise and relate to 👌
🙏❤️
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.
Yes, i will cover all of these in my channel for beginner and expert audience 😉🙏 thanks for additional info ❤️
CSS is not THAT difficult. It just requires patience. You have to completely break down a design before attempting to write a single line of CSS. Once you have it all annotated and mapped out, you’re just following a blueprint. The more organised you are, the easier CSS becomes. It’s all about being organised and prepared
@chrisstucker1813 yes its right, thanks for your info 🙏❤️
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
Yes, thanks for additional information 🙏❤️
@@AsmrProg I'm sure YOU already know 😂 mostly for the viewers watching
I love these videos btw! Thank you for making them
@iChristiannn thanks 🙏❤️
what you have done in 1 hr, its impressive.
thanks for sharing your works dude it saves me a lot of time
🙏❤️
Wow! Great job!
Thanks, please like it to support me 🙏❤️
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."
Yes, thanks for good energy 🙏❤️
these days Design is important
Yes!
Did you have it already designed or mocked up before all of these?
@TechDesignHub yes, then created video for it 🙏
Looks so beautiful 😭
🙏❤️
i learned so much, thanks a million for the effort. - much love
Thanks bro 🙏❤️
Yeah..now something interesting came 🎉. Keep uploading ❤
Thanks a lot, please like it to support my channel 🙏❤️
@@AsmrProg don't worry already done that job...❤️😊
🙏❤️
Great Work! What do you use to record screen?
Hi, zd soft screen recorder
I pray that you will reach 1 million subscribers soon.
Please make the next part that can combine all the features on this website🙏
I love this channel bruh. Thanks for this.
Thanks, like video to support me 🙏❤️
Nice website ❤.
btw how did you change the background image of the ide, looking sick
Thanks, it’s glassit extension 🙏
@@AsmrProg thanks 👊
🙏❤️
Каласальная робота респект 🔥
Thanks a lot 🙏❤️
Damn I love this vid!!! Thank you so much.
🙏❤️
Wow . Amazing project🔥
Thanks bro 🙏❤️
Hey can you do a video where u show your VSCODE Extensions and Settings?
Btw, great job :D
Hi, i will write all in a github readme soon 😉🙏❤️
@@AsmrProg Thanks!!
🙏❤️
Can you please let us know what kind of theme are you using for your VS Code? It looks so good! IT would be very helpful if you can make a video on that
Hi, check my GitHub, there is a repository about all of my vscode settings 🙏
I was going to ask exactly the same
WOOOW! Finally someone who knows how CSS should be used. No Failwind or Bootcrap or ignorance classes nonsense. Congrats!
Thanks so much 🙏❤️
I really like your video, it inspired me to make a project for myself
🙏❤️
Ты не перетрудись ❤
Thanks 🙏❤️
@@AsmrProg source code?
I will upload it on github today 😉🙏
Woww man ❤️
Thanks, Like video to support 🙏❤️
@@AsmrProg already subbed and liked ❤️🙏😊 , your content is awesome
You should also talk in video regarding all the codes you are writing ,hope you do it in future 😄
Thanks so much 🙏❤️
For talking i will create full courses 😉 currently I’m working on a simple site for channel 🙏
@@AsmrProg wow , that's great 😃
Thank you for your effort🥰
This is immaculate! Better than sitting in class.
🙏❤️
Can you add the shortcuts you used in the video to that part of the video?
Hi bro, which shortcuts you want?!
@@AsmrProg I'm not asking anyone specifically. I wanted to say can you put the shortcut used in the videos somewere in the video. So I think it will be more useful for everyone. maybe i didn't explain well my english is not very good
It’s ctrl+shift+arrow keys to select words, ctrl+enter to go in new line, ctrl+shift+enter to create a new line and move current line to bottom 🙏
Thanks for your answer. I love your videos. 🙏
🙏❤️
can you share your VS Code background image please
Hi, send message in telegram, link on channel about page 🙏
If i had the knowledges of this guy i was so happy...
is there a source code?
Hi, yes i will upload it on github today 😉 please like video to support my channel ❤️
@@AsmrProg thanks, I love your Videos and like all of them
Thanks 🙏❤️
wow ❤🫶
LIKE video to support my channel 🙏❤️
A very instructive tutorial!
Thanks 🙏❤️
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
Oh! 🙏❤️
First
Малочинка
Please LIKE video 🙏❤️
Ok
Thanks 🙏
best asmr ever
❤️🙏
wow! that was so beautiful
Thanks 🙏❤️
when this dude gets frustrated during debugging he just watch asmr footage of him coding and by the end of the video he gets both mental peace and also the bug he spotted while watching.
thats next level of debbuging where you get relaxed instead of frustration and actually spot the mistakes you were doing the whole time
Thanks a lot for your great words 🙏❤️
I don't know about coding but liked watching your work 👍👍👍
Thanks so much 🙏❤️
The god of responsive🔥🔥🔥
❤️❤️❤️
You're replying every comment. That's amazing
Yes, all of comments are important for me 😉
super beautiful
Hello, I know the video is from a long time ago but I wanted to know what keyboard you use, I really liked it
Nice Work Brother
🙏❤️
good job. 😍tanks for sharing that
Thanks 🙏❤️
I have been following your work. Well done. Quick question, what is the plugin u used to make your vscode transparent?
Hi, glassit extension 🙏
Amazing video congratulations, I'm from Brazil, it would be cool if you made a video showing one of your first projects.
Hi, sorry but I don’t have its video! sorry for late response 🙏
Awesome website is simple and clean!!
Thanks 🙏❤️
But create this is not simple😵🔥
We will create it with bootstrap too 😉
That was a great exercise thx!
🙏❤️
this is the first video that I see of your channel. I like it! New subscriber :D
Thanks 🙏❤️
You are awesome man. I would appreciate it more if you teach us how it is done.❤❤
Thanks a lot 🙏❤️
Thank you so much 🎉
🙏❤️
Nice work! Can I ask you what switches you use for the Varmilo keyboard? Thank you!
Hi, I can’t remember it, please check unbox video 🙏
Classroom, I learned a lot from this video, great job! Greetings from Peru.
Thanks, keep it up 😉🙏
Wow , I just loved that 😍and your vs code theme looks amazing can you share the secrets of it❤.
Hi, please check my github, there is a repository about all of my vscode settings 🙏❤️
I'm just starting in CS and your videos are so helpful.
Thanks 🙏❤️
Im speachless, just wow.
🙏❤️
Great video. What extension are you using to get the CSS variables autocomplete?
Hi, thanks 🙏 please check my github, there is a repository about all of my vscode settings 😉
@@AsmrProg Great, Thanks!
@bishanf 🙏❤️
This is the first video ive seen of yours and its absolutely awesome. Love the vscode theme care to mention what it is?
Thanks a lot, check my GitHub, there is a repository about all of my vscode settings 🙏
@@AsmrProg Awesome! Will definitely check it out.😄
🙏❤️
Hello! very nice work! can you point me to the right direction? im trying to add the functionality to display different section according to the selected sidebar link. Thank you so much
thanks ! so much
🙏❤️
Great video bro!! One quest, what’s the model -brand- for your keyboard sounds amazing. Thnks!!!
Hi, full info on description 🙏
Great
Thanks 🙏❤️
what version of visual studio did you use?
This is perfect.... i'm liked it
🙏❤️
دمت گرم آقا رضا❤
🙏❤️
Dude the tutorial is really good. Just one request, please just hide the keyboard cam, it blocks some of the code and tbh isn't adding much value to this tutorial.
Hi bro! No! We hide keyboard when code block is under it!!
Thank You
🙏❤️
Bro you are insane. How you code this blow my mind. I am a small web developer started 1 year ago. I wish to talk to you once in my life and if yes than it will be my pleasure.😊
Thanks, it’s just need experience, nothing else 😉
How do you do this "red tail" mouse effect? do you use a special app for that?
Thank's...
🙏❤️
wonder what brand is ur keyboard sounds super satifying
Hi, full info in video description 🙏
Hi thx for this amazing vid and btw I have a question that is what keyboard do u use I wil appreciate it very much if u wil reply
Hi, thanks 🙏 keyboard full info in description 😉❤️
thanks
🙏❤️
I love this UI, and I would like to know where I can find a way to move the mouse cursor with the red flowing tail?
Thanks 🙏 mouse is screen recorder effects!
This is very very Beautiful😍😍😍😍
🙏❤️
Afarin dash kheyli khoob bood ali!
❤️🙏
Nice video! Could you tell me how did you set the wallpaper of vs code? Using extension? Please tell me the name of it ! Thx!
Thanks, it’s glassit extension 🙏
I love it
Thanks 🙏❤️