Responsive Admin Dashboard Using HTML CSS & JavaScript with Light & Dark Mode
HTML-код
- Опубликовано: 31 май 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.
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
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 👏👏🙏
Building this without a framework is really impressive, good job!
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. 👍
This is a great tutorial. I am impressed with the high quality of your work.
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!!
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
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.
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.
Great job, your practical tips have been very helpful! 😉
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. :)
Excellent job thank you very much i followed all the process. super helpful.
Awesome way of writing CSS with minimum line of code . Thanks a lot brother
老外的教程简单明了 确实有可供借鉴之处。good
Excellent tutorial. Learned a lot from this!
this project was very useful for my first-year web project.❤❤ Thank you!!!!!
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
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
Absolutely wonderful work!
Woow. You did a great job actually and I appreciate it for your hard work ❤
The guy is from Ghana! Respect!
You're amazing man, I learned a lot with your help
Thank you :) I watched everything xD For a Junior this is gold !!!
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
Terminado y con algunas modificaciones es perfecto
gracias....
Thank you. I learned alot from this video.
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
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 was so helpful!! Thank you
seu trabalho é incrivel
Amazing Video! I learnt quite a lot.
Thanks, this is being very useful!
This tutorial is great!!! Thanks for sharing
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
Big thanks from Cambodia🥰
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
Many thanks for sharing this so much useful content!
very beautiful project you are the best!!!
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
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
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
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
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
Thank you for tNice tutorials very clear and concise tutorial. Look forward to more videos from u
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
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
Thank you so muck this helped me a lot 🥰
Great man, I love your this 👍.
Very good my friend, I would like to see more videos with PHP, congratulations #brazil
this is best I can recommend for my up coming projects 😇😇😇😇😇😇☺☺☺☺☺
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
👏Show de bola, muito bom.....:)
Dale Br
thanks for this. you're awesome
usefull. Thankyou from Indonesia bro😇
thank you so much for the video.
Beautiful beautiful beautiful 🎉. Thanks thanks thanks
amazing..great project
thanks for the tutorial!
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
lovely video. learnt a lot of new things
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?
hi! thanks for the tutorial! one question though, im struggling with getting my dashboard items and all of the rest to the right side, what should i do? all of code elements going below each other, for example, the dashboard is below the sidebar as well as the recent updates that go below recent order...
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
Thank you!
Ty 4 lesson , Daniel.
Thank you.
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
thx, bro... amazing
Thanks for this video.
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
How do you make the active highlight for the sidebar nav items change when you click the different pages?
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
Thanks a lot!
thank you very much!
Awesome fantastic 🎉
thank you so much 🤩
Can anyone tell me how he is giving height property to element @24:11 . element is supposed to be an inline element right ? I dont understand how height is being given to an inline element.
0:31 black/white theme switcher shouldn't be in one-click access for the user, it just doesn't make sense. Users don't switch it so often so that it should be in a quick access in the header. It should be in the user dropdown menu, better put messages there instead of that switch at top right. Same as logout button on the bottom left, sidebar minimizer should be at it's place
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
Great Tutorial
You are Genius
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
Appriciated
Thank you very much
this is awsome ❤ 💙 I have a question: how do you choose your pixels and size ?
Thank You
Love it
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
awesome tutorial.
I followed your tutorial but the ending part where you try to add data table from js didn't work on at all
Orders.forEach(order => { const tr = Document.createElement("tr");
const trContent = ' ' this was trying error back at me what do I do pls
THANK YOU
so the problem from vh of aside is from the zoom out to 90%,coz when you are in 100% the gray color and the side overflow.
thank you very much
Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕
Omoo, this is great, thanks man... Can I keep following the reuse of your works, or be my side mentor🥺✨
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
@@jiyash.06 i see almost 3 videos different channels one is similar to this one and another 2 is a few changes of elements, so you can understand it’s copied from this due to the date was uploaded
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