Responsive Admin Dashboard Using HTML CSS & JavaScript with Light & Dark Mode
HTML-код
- Опубликовано: 16 май 2024
- Create a Responsive Admin Dashboard For an Ecommerce Website using HTML, CSS, and JavaScript.
Hostinger Discount: www.hostg.xyz/SH8cs
Responsive React Portfolio Website with Theme Customization (FULL COURSE): www.udemy.com/course/react-js...
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.
Like and Subscribe: / @egatortutorials
HTML CSS & JavaScript Playlist: • Create a Responsive Mo...
Source code & Live Demo: / egator
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!
Assets: drive.google.com/file/d/1PuE6...
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
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.
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 👏👏🙏
Weldone chief. I'm actually a backend developer. I recently started working on front-end resigns for clients using WordPress builder. My clients are happy with my little designs. So I decided to explore my new found talent😁 with no framework. I'm sure I will do well with this tutorial. 👍
Building this without a framework is really impressive, good job!
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!!
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. :)
This is a great tutorial. I am impressed with the high quality of your work.
Wow! That's a great project! You are a master of web dev. Greetings from Brazil! 🏁👏👏👏
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Excellent job thank you very much i followed all the process. super helpful.
Great job, your practical tips have been very helpful! 😉
Awesome way of writing CSS with minimum line of code . Thanks a lot brother
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.
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
Hello I am John a front end developer, I am currently working on a project that needs a backend. I will be really excited to work with you. How can I get connected to you?
Everyone has their strong side. I like front end more but i do full stack
That's good to hear.
I must say your presentation is premium, just like your content. Thank you!
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 :)
Me too ... I have one last certification to get. This video helped a lot.
Excellent tutorial. Learned a lot from this!
老外的教程简单明了 确实有可供借鉴之处。good
The guy is from Ghana! Respect!
Woow. You did a great job actually and I appreciate it for your hard work ❤
this project was very useful for my first-year web project.❤❤ Thank you!!!!!
Thanks from Brazil! Great tutorial, congratulations 🎉🎈
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
You just earned a subscriber my friend. This is awesome dude. Cheers from Venezuela, south américa.
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Terminado y con algunas modificaciones es perfecto
gracias....
Thank you :) I watched everything xD For a Junior this is gold !!!
Absolutely wonderful work!
You're amazing man, I learned a lot with your help
Great content and great man. Dear mentor, while you do projects please explain some properties and elements. So, we can understand the purpose of selection of it. Love you brother ❤ 💙 🙏
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Bro, really... You have taught me so much with this tutorial. Thank you and when I be able I will aprecciate you bro.
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Amazing Video! I learnt quite a lot.
I Fall in love with this awesome design thank you ❤❤❤
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Very good my friend, I would like to see more videos with PHP, congratulations #brazil
very beautiful project you are the best!!!
Great，it is exactly what I'm looking for, thanks a lot
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
This tutorial is great!!! Thanks for sharing
Hi, I followed your tutorial and it is awesome. I have a question though. How can I add multi-levels to the menu like an accordion?
This was so helpful!! Thank you
Holy Sh!t.. let me save this video. I was looking for a dashboard template for a bug tracker app that I'm building. I'm going to do this project instead and then use it to build my bug tracker app once I'm done. Thank you!!
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Bro, Thank you so much, you save me for having a Friendly UI System that I can use
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Many thanks for sharing this so much useful content!
Thank you for tNice tutorials very clear and concise tutorial. Look forward to more videos from u
Thank you. I learned alot from this video.
Big thanks from Cambodia🥰
Great work bro. Some of us are beginners, so zoom the content of your video so we can see what you are doing and also slow down as you explain. I have to watch the video over and over again to grab one concept
Sure bro
This is awesome. I learned a lot! Thank you very much. \o/
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Charley, big ups. Fellow Ghanaian frontend dev here... You really sound like a Ghanaian.
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Thanks, this is being very useful!
Great man, I love your this 👍.
this is best I can recommend for my up coming projects 😇😇😇😇😇😇☺☺☺☺☺
usefull. Thankyou from Indonesia bro😇
seu trabalho é incrivel
Much love from Jamaica!
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
this is awsome ❤ 💙 I have a question: how do you choose your pixels and size ?
Thank you so muck this helped me a lot 🥰
amazing..great project
Thank you, good project I followed along and made some modifications. I wrote this is SASS btw. What do you think in the comments section, is this project good to include in a junior dev portfolio ?
thanks for this. you're awesome
Your tutorials are very greate!. Can I ask you why you use 1rem for calc(1rem-6px) of "aside .sidebar a.active span", thanks a lot! ^^
hey Thank you very much for this tutorial it was really useful, keep it up your tutorials, God bless you bro.
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
U have done a great job adding video description
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Beautiful beautiful beautiful 🎉. Thanks thanks thanks
thanks for the tutorial!
Heading tags are from my understanding to be used as a correct semantic element for screen readers. It seems you are using them for their font size instead. I changed some heading tags to more reasonable tags with utility classes for their font sizes instead. What do you think about this?
Otherwise great tutorial! Like your other projects :)
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
what a class! thanks a lot.
subs and like immediately
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
lovely video. learnt a lot of new things
You've always been given out real contents guru thanks alot.
Pls I can't download the source code of your designs with other videos
This design is so dope!!!
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
👏Show de bola, muito bom.....:)
Dale Br
Thank you so much the tutorial and your excellent explanation, it helps me a lot understanding CSS more. I do subscribe your channel.
thx, bro... amazing
Ty 4 lesson , Daniel.
Great vision! You got a subscriber 👍
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
your tutorial is really nice, but i wish you could also make tutorials in other pages of admin panel with this theme you created for dashboard. thank you
Omoo, this is great, thanks man... Can I keep following the reuse of your works, or be my side mentor🥺✨
thank you so much for the video.
The color stuff in 11:10 (make sure to double check) :
/* Root Variable */
:root {
--color-primary: #7380ec;
--color-danger: #ff7782;
--color-success: #41f1b6;
--color-warning: #ffbb55;
--color-white: #fff;
--color-info-dark: #7d8da1;
--color-info-light: #dce1eb;
--color-dark: #363949;
--color-light: rgba(132, 139, 200, 0.18);
--color-primary-variant: #111e88;
--color-dark-variant: #677483;
--color-background: #f6f6f9;
--card-border-radius: 2rem;
--border-radius-1: 0.4rem;
--border-radius-2: 0.8rem;
--border-radius-3: 1.2rem;
--card-padding: 1.8rem;
--padding-1: 1.2rem;
--box-shadow: 0 2rem 3rem var(--color-light)
}
😇 thanks
legend
thank you so much 🤩
You are Genius
Man you should make a full-stack front-end course 💗💗
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
ohh man ! you make my day
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Thanks for this video.
Great Tutorial
I really appreciate it thanks!
I recently watched asmrprog do something very similar to this but doing this with only html css and js is on another level ❤
Thanks. Whoever did anything similar probably copied or took inspiration from this project. I’ve seen a few myself
@@EGATORTUTORIALS lol dude I thought it was someone else it's you, it was your old video.
Pls can't download source code, help me out
Awesome fantastic 🎉
Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕
It's a wonderful tutorial. I follow it step by step and it works! There is a tiny mistake at 1:25:41 ( index.js, line 32). It should be 'Pending' istead of "pending"
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Should be instead instead of istead! :)
Very cool, thanks alot 🙋♂️
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life..
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
First I want to say thank you very much for the excellent tutorial, but I have a problem in my code. All work very well, except when I shrink the screen to mobile size and expand the sidebar and close and try to enlarge the screen to size for more than 768px a bug occurs.
The problem only corrects if you refresh the browse with the F5 key.
Can you help me?
Thank You
increible 💯💯
Thank you.
Bro you are doing good ☺️😊☺️ 👍
ok let's Go
Awesome stuff. But whould be nice with the "active" changing when selecting in the sidebar. Now its static with the "Customer" always active. Also i found a bug in the responsive part. When changing the width to mobile size and toggle the menu and then drag the windowsize back to desktop the layout gets messed up. all the elements does not fall back into place. Maybe its becuse when you close the sidebar its get set to display none, and when changing size its still null so the grid gets messed up? So i just tested to set the display to nothing and now it works. So when hitting the close button it does display:''; instead of display:'none;
awesome tutorial.
You sound Ghanaian 😊your videos are very helpful 🙏
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
Nice work
Thank you!
Thank You So Much🤩❤🚀
My friends, search for your life purpose, why are we here?? I advise you to watch this series and this video 👇 as a beginning to know the purpose of your existence in this life.
ruclips.net/p/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-
ruclips.net/video/7d16CpWp-ok/видео.html
thank you very much!