ASMR Programming - Responsive Admin Dashboard with Light & Dark Mode - No Talking
HTML-код
- Опубликовано: 31 май 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:22 - Warming hands
00:01:31 - Main codes
00:02:00 - Fonts & Icons
00:03:04 - Sidebar
00:06:57 - Main styles
00:08:42 - Sidebar styles
00:17:42 - Navbar
00:19:44 - Navbar styles
00:29:42 - Header
00:31:27 - Insights
00:34:07 - Header styles
00:37:28 - Insights styles
00:41:00 - Recent orders
00:43:58 - Reminders
00:47:02 - Orders styles
00:52:57 - Reminders styles
00:56:04 - Responsive codes
00:59:38 - JS codes
01:06:54 - Responsive codes 2
01:07:52 - Fix a bug
01:08:25 - 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
![A Day To Remember: Feedback [OFFICIAL VIDEO]](http://i.ytimg.com/vi/iXVnysmQ4e0/mqdefault.jpg)
Please LIKE video to support me surprise you 😉❤️🙏
realy loved your work man
Thanks 🙏
Aww Man! Only This can do Special Person! You are in the first place!
Thanks bro 🙏
@@AsmrProg hola, is there any vscode extension that speeds up programming, i have a hard time writing every time
1 hour long! That's what I always wanted. Thank ^-^
🙏❤️
Nice works, i'm learning a lot just by watching this video ^^
🙏❤️
thankyou so much for this video, you have no idea how it helps me and the other people.
I really learnt a lot from this short video, its my first stride towards true responsive design and engineering.
Thankyou so much for this gift!!!!!!!!!!!!!!!!!!
Thanks a lot for this great words 🙏❤️
bro you are amazing, your videos help me a lot to learn and develop my programming skills, please don't stop producing content
Thanks a lot 🙏❤️
Speak bro. For quality content like this, you don’t even need to ask for a like. Here's a direct like, without thinking twice. Congratulations on the content. Sensational!!! One more subscriber.
Thanks a lot, I’m working to create courses, there is will speak 😉
I love that color var prefix ❤, and the video is so satisfying ❤
Thanks 🙏
awesome work bro, thank you so much
🙏❤️
Amazing dude 😎
You are very skilled person 💪
Thank you for sharing your knowledge with us
Thanks 🙏❤️
holy crap, i subscribed! this is awesome!
🙏❤️
Awsome work, thank you so much
Thanks 🙏❤️
Muchas gracias por tus contenidos a la verdad aprendo mucho con ud. Maestro, saludos desde Cuba
Thanks and greetings 🙏❤️
your work is the best!!!
Thanks 🙏❤️
I love you'r design and responsive bro
Thanks 🙏❤️
wow. amazing project keep going...
Thanks bro 🙏
Yes!!! Thank you for this
🙏❤️
Parabéns aula perfeita e obrigado pela força de vontade e humildade em ensinar, muito obrigado agradecido Congratulations perfect class and thank you for your willpower and humility in teaching, thank you very much.🎉
Thanks a lot for your good words 🙏❤️
Fico horas só assistindo, amo de mais programação
Hi, please write in English, sorry for late response 🙏
Mano voce pediu apenas um like pra voce poder continuar se eu pudesse daria um bilhão de likes pra vc continuar ! obrigado por nos dar esses conteúdos sensacional !! Prazer sou seu mais novo inscrito !!!
Thanks a lot for supporting 🙏❤️
I'll have to master this. Thanks
😉❤️
I wish I had this level of deep-work focus to code for an hour straight
Yes! Just keep going on 😉
لذت بردم رضا جان، دمت گرم
Qalbami dash 🙏❤️
Thank you 😊😊😊 very much,🔥🔥🔥 after watching your every video I stay much powerful.
Great, keep going on 😉❤️
@@AsmrProg Thanks
🙏❤️
Thank you!
🙏❤️
Magically!
Thanks 🙏❤️
you are so good at programming
Thanks 🙏❤️
Great video
Thanks 🙏❤️
You seem to be skilled in design as well. Have you learned it along with programming? :) Thanks for your amazing videos, you're inspiring me a lot!
Thanks, no it’s just need experience 🙏
@@AsmrProgan you make a landing page (user) for a help-desk support ticketing system based on this design?
Soon we will have some designs that are master, for example when you learned that you can customize it as you want 😉
you can try to buy a book, in my experience it is easier with books than with videos
Maybe, but for too many peoples reading books in 21th century is a bit hard!
thank you
🙏❤️
Very Nice!!. Senior Developer 👏
Thanks 🙏
Good video!
Thanks 🙏❤️
awesome
Thanks 🙏❤️
Sheeshh So cool
🙏❤️
como você deixa a digitação com esse efeito suave? é alguma extensão ou algo assim?
Hi, check here : github.com/AsmrProg-YT/My-Settings
I like how u respond to lot comments
Hi, we receive notification for each comment and answer it!
please make a video on responsive web! you seem talented
Yes, will 🙏❤️
Amazing Project Bro, Keep Going
Thanks bro, please like video 😉❤️
Respect to the legend
Thanks a lot 🙏❤️
@@AsmrProg ❤️💯😳
Keep it up Our legend we love you ❤️
@arsalanarozo8373 thank you so much for supporting ❤️❤️
new sub, bro!
Thanks 🙏❤️
Hey, how do you know how many pixels its gonna take and such? Im starting out with webdev but having such a headache with sizing and such
Hi, I’m removed size tests in video edit section! Also because I’m code it before i know some of them!
Nice :D
🙏❤️
nice🥇
🙏❤️
Nice bro
Thanks 🙏❤️
Can you guide on how to get that mouse pointer customisation.? The red trail and the circle looks awesome and could be really helpful.
Hi, it’s screen recorder effects!
What background extension are you using? Why does the explorer bar have it too?
And how do you make animations when typing
Hi bro, for all of this check my GitHub, there is a repository about all of my vscode settings there 🙏
@@AsmrProg tq bro
🙏❤️
@@AsmrProg But why is there still no typing effect
Can you please tell me how did you learn to code ? And what's the best roadmap to learn html , css and javascript?
Btw love all your videos❤️
Hi, with experience and courses in my country, we will have zero to hero courses soon 😉
Bruh everything is on RUclips i am currently learning javascript from RUclips
Yes!!
FreeCodeCamp is good as well, Codecademy is better in my opinion but some things are locked behind a paywall tho u can learn the basics of every language (I think) for free there
Very cool! Could you tell me how you made the typing style the same as Microsoft Word?
Hi, please check my github, there is a repository about my vscode settings 🙏
can you tell me how did you get the text animation on the codes and the cursors... It looks cool
Hi, cursor in screen recorder animation, text animation is vscode cursor effect animation 🙏
thank you@@AsmrProg ,but i didn't quite understand the steps. can you please make a video on how to do it
@crazyplayerfrankyofficial available in my github! Check it, there is a repository about all of my vscode settings 🙏
we have the same keyboard🔥
Great 😁❤️
Mano esses projetos que você faz no seu canal, podem ser copiados e modificados? ou são exclusivamente seus? Parabéns pelo trabalho, ganhou um inscrito!
Hi, projects are MIT licensed 🙏
Thanks for the video! Which keyboard do you use?
Full keyboard info in description 🙏❤️
what is that background in vs code ? and why do u add that? not being able to see anything.
Hi, check my github, there is a repository about all of my vscode settings 🙏
@@AsmrProg what I meant was, you shouldn't put that. it's hard to see for us. i think I mentioned that in my comment above.
github.com/AsmrProg-YT/My-Settings
@@AsmrProg i don't think that you understood or you want to understand. so let's leave it. i didnt wanted ur repo at all. let's not continue further.
Bro if you don’t read it’s readme you can’t setup it 😐
What is the extension who show CSS error in VSCode?
Hi, Error lens, also check my github, there is a repository about all of my vscode settings 🙏
@@AsmrProg sure, thanks
🙏❤️
u always make cool videos. which model is your mouse? thanks!
Thanks, hatron mouse 🙏
What vs code extenstions do you use?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
hello guys, the extension that showing errors in screen is "error lens", its very useful.
Yes! Also there is a repository in my github about all of my vscode settings 🙏
Very good job. Thank you. Do you know a good course or tutorial for beginner web developers?
If you from Ukraine, you need to pay attention to the courses Logos IT Academy)
Hi, we are working on zero to hero courses, soon we will notice news 🙏
🙏❤️
Great video! What is your cool keyboard?
Thanks, keyboard link on description 🙏❤️
can you please tell me what type of keyboard you use
Hi bro, full info of keyboard available on video description 🙏
Can u tell what extensions u use in vscode?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
Bro waiting for React and tailwind videos 😒, have a crush on ur content 🥰🤩
Oh ok 🙏❤️
like.
and how do you make these effects on your mouse?
does anyone know how to do it ou what's the name of it?
Thanks, it’s screen recorder effects!
@@AsmrProg thank you, and what's the name of your screen recorder please?
Zd soft
Great work mate! But I want something more functioning
Check out my 100 days of javascript playlist 😉
boxicon est mieux que flaticon ?
All are useful, we used all in our video’s 😉
Nice video! What is your vscode color theme? Plss
Hi, i think in this video shades of purple, also there is a github repository about all of my vscode settings 🙏
whats your vscode theme and plugins ? please make a video on that
Hi, please check my github, there is a repository about all of my vscode settings 🙏
Nice timing
Thanks 🙏❤️
what is your switch keyboard ?
Hi, white switches 🙏
what color there are you using?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
Where did you put that cursor?
Hi, it’s screen recorder effects!
@@AsmrProgThanks
🙏❤️
hello nice job! have figma layout with components ?
Thanks, No! But soon we will have figma design files too 😉
@@AsmrProg Thanks! =)
@JeffersonSilva-nv7xx 🙏❤️
what is the name of the vs code theme ??
Hi, check my github please, there is a repository about all of my vscode settings 🙏
What vscode theme are you using bro?
Hi, check my github, there is a repository about all of my vscode settings 🙏
@@AsmrProg Okay thank you bro
🙏❤️
How can I get the complete template?
Hi, source code available on my GitHub, link on description 🙏❤️
@@AsmrProg mm, yes i understand but i need a other components about this the template, for example, modals, forms, etc... regards
@JavierRomero-gh1wu we will have complete websites after backend tutorials 😉
Bro how to get such a scroller when you type text it is super sticky
Hi, check my github, there is a repository about all of my vscode settings!
@@AsmrProg Thx bro❤❤
🙏❤️
you're on time i'm trying to figure out how to put light and dark mode since i'm trying to learn coding
love it
Great, thanks 🙏❤️
How did you learn to design? I want to be a fullstack dev but my design skills are holding me back.
Hi, you need watch videos and have experience!
you are incredibly amazing love your passion... love from India ❤🤍💚
Thanks a lot, don’t forget like 😁❤️
what vscode theme? Great video thank you
Hi, please check my github, there is a repository about all of my vscode settings 🙏
your extensions name please please, specially that theme and font extensions plssss
Hi, check my github, there is a repository about all of my vscode settings 🙏
@@AsmrProg thank you so much bro
🙏❤️
Bro where did you learn designing with these awesome coding school , i mean how did you manage this ??
Hi, with courses in my country!
Can you reveal your vscode extensions?
Hi, please check my github, there is a repository about all of my vscode settings 🙏
it would have been best if you have added sub menus too :D
Hi, we will have that type too 😉
I like you 💗
🙏❤️
What is your keyboard model?
Hi, varmilo, full info in description 🙏
Could we make avideo on full guide on how to make users and fully interact with it it would get a lot of views and likes
Hi bro, what users!?
I need sugesstions
what is your theme? and font family?
Hi, Cascadia Code font family, shades of purple theme 🙏
@@AsmrProg thank you
🙏❤️
izin nanya pak,
apakah source code ini bisa saya implementasikan, admin dashboardnya di projek saya sebagai freelance ?
terima kasih pak
Hi, yes you can 🙏
@@AsmrProg terima kasih pak
Sorry but didn’t understand, write english 🙏
Wow, amazing, did you make money creating this?
Hi, No!
Please, could you tell me what is the name of the theme? thanks you
Hi, please check channel, there is a video about it 🙏
Bro can you please make a video on how to create a messaging app like WhatsApp
Hi, this needs backend, we will have it after php tutorials 😉🙏
Love the vscode theme what its it called
Hi, check my github, there is a repository about all of my vscode settings 🙏
How long does it took you to come at this level
Hi, it’s ~7 years I’m coding different languages!
i want one video on login and registration using session & cookies with php database website
Hi, video’s with backend in the future! For now just html css and js 🙏
Plz make blackened also
With backend?!
what"s your vscode theme?
Hi, please check my github, there is a repository about all of my vscode settings!
this theme is perfect can you tell me the name
Hi, check my github, there is a repository about all of my vscode settings there 🙏
Hi, can you name the vscode extension you used to get the warnings in css file
Hi, error lens extension 🙏
keyboard ?
Hi, link on video description 🙏
what is that theme?
Hi, please check my github, there is a repository about all of my vscode settings 🙏