Responsive Admin Dashboard Using HTML CSS & JavaScript with Light & Dark Mode

[@ManaEbigi]

I don't usually comment on tutorials, but for this particular one I'm wowed at the way and manner he is taking it step by step. My toddler or my grandma can easily get along with his teaching. Keep it up sir I really appreciate your work. More blessings

[@Mr.bonbon441]

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

[@jamesjohn763]

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?

[@widevader]

Everyone has their strong side. I like front end more but i do full stack

[@DeveloperAttic]

That's good to hear.

[@WildHowlYT]

Building this without a framework is really impressive, good job!

[@johnnycardoso1965]

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 👏👏🙏

[@jakabostjancic5310]

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 :)

[@RobinAluko-y5j]

Me too ... I have one last certification to get. This video helped a lot.

[@adeyemiadeshina3988]

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. 👍

[@Videoposter2024]

All i know how to do is work with wordpress. How do I add a boostrap dashboard to a wordpress site

[@nathannelson5645]

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.

[@stafa5568]

Charley, big ups. Fellow Ghanaian frontend dev here... You really sound like a Ghanaian.

[@الإسلامدينالحق-خ5ت]

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. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@pawelo2698]

The guy is from Ghana! Respect!

[@eloquentsites]

I must say your presentation is premium, just like your content. Thank you!

[@mademen3804]

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

[@EGATORTUTORIALS]

Sure bro

[@withrejkapermana6087]

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. :)

[@FeelTheBeatStatus]

this project was very useful for my first-year web project.❤❤ Thank you!!!!!

[@diegosantosmoto]

Wow! That's a great project! You are a master of web dev. Greetings from Brazil! 🏁👏👏👏

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@chinababazhou9565]

老外的教程简单明了 确实有可供借鉴之处。good

[@jiyash.06]

I recently watched asmrprog do something very similar to this but doing this with only html css and js is on another level ❤

[@EGATORTUTORIALS]

Thanks. Whoever did anything similar probably copied or took inspiration from this project. I’ve seen a few myself

[@jiyash.06]

@@EGATORTUTORIALS lol dude I thought it was someone else it's you, it was your old video.

[@ExpertsAnimedia]

Pls can't download source code, help me out

[@moha.arlaadi]

@@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

[@3208nandu]

Awesome way of writing CSS with minimum line of code . Thanks a lot brother

[@JamieDawsonCodes]

6:25 - If you're not seeing the symbol, use family=Material+Symbols+Outlined in the Material CDN

[@vishnuravva7992]

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.

[@jotaodiceu]

Thanks from Brazil! Great tutorial, congratulations 🎉🎈

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@jonasefanvasquezyanez1834]

Excellent job thank you very much i followed all the process. super helpful.

[@zetomis6791]

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) }

[@AlinaKhan-fl2uf]

😇 thanks

[@Rohan-tp9tb]

legend

[@alirazanawazishali6862]

Thank you bruh....

u are the best!@

[@cajaaib1]

amazing bro, i appreciate Your hardwork. this is really amazing, wish u all the best, and thanks for this tutorial.

[@francisomegas8900]

this is best I can recommend for my up coming projects 😇😇😇😇😇😇☺☺☺☺☺

[@wendyisworking2297]

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"

[@الإسلامدينالحق-خ5ت]

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. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@iaindudman3349]

Should be instead instead of istead! :)

[@keronwilliams5392]

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!!

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@OrlandoLopez-d8k]

You're amazing man, I learned a lot with your help

[@BobsProgrammingAcademy]

This is a great tutorial. I am impressed with the high quality of your work.

[@heyjohnnydeveloper]

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!!

[@faysalahmed7251]

U have done a great job adding video description

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@comsortecomvoce4865]

Bro, really... You have taught me so much with this tutorial. Thank you and when I be able I will aprecciate you bro.

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@dukidodier5284]

Very good my friend, I would like to see more videos with PHP, congratulations #brazil

[@babarraza]

Man you should make a full-stack front-end course 💗💗

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@lykamaecanete8213]

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

[@ExpertsAnimedia]

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

[@miguelalejandrobritorausse5023]

You just earned a subscriber my friend. This is awesome dude. Cheers from Venezuela, south américa.

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@hackerprime9722]

Much love from Jamaica!

[@الإسلامدينالحق-خ5ت]

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. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@angelamilton5134]

This tutorial is great!!! Thanks for sharing

[@ygvanz]

Excellent tutorial. Learned a lot from this!

[@JuanPabloThenKingsley]

Terminado y con algunas modificaciones es perfecto gracias....

[@dilshanonlive7413]

Even once you understand how to use soft soft, having the ear to make a good soft is a whole different story

[@YassFreeks]

Thank you :) I watched everything xD For a Junior this is gold !!!

[@legittutorial4565]

This is the first seeing this method of writing css

[@syednadeemmuhammed5675]

Amazing Video! I learnt quite a lot.

[@krupalchaudhari2327]

I learned so many Secrets and Tricks in Css

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@electricai-tech9217]

Thank you for this amazing tutorial.

[@EGATORTUTORIALS]

You're very welcome!

[@watcher6933]

usefull. Thankyou from Indonesia bro😇

[@ruiricardojoaquimbastos1578]

Thank you for tNice tutorials very clear and concise tutorial. Look forward to more videos from u

[@enricoroselino7557]

so im half way on insight section, and wow this guy is the entire ui and frontend department himself(edit : i checked patreon, he is the entire IT department). So from what i observed, to build beautiful ui we need to put ugly elements inside correct div... then let css do the heavy work. so i just learn " > " is the selector for direct child not "grandchildren" (i guess lol). also foo.bar instead of foo .bar is a different thing, mind blowing moment here.

[@Dailyfindout]

Big thanks from Cambodia🥰

[@clutchcloudd]

so good. it so simple css but very useful.

[@dileepkumarb377]

Great video.. Please make a video on multilevel accordion menu on aside

[@someoneelse8103]

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

[@temiloluwaaina9049]

lovely video. learnt a lot of new things

[@adaopedro2544]

Many thanks for sharing this so much useful content!

[@eduardolemos867]

Excellent Tutorial

[@BeingChoudhary]

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 ❤ 💙 🙏

[@الإسلامدينالحق-خ5ت]

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. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@olatundeolukoya1788]

Beautiful beautiful beautiful 🎉. Thanks thanks thanks

[@petermuthiks]

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?

[@cawai2815]

Thank you. I learned alot from this video.

[@abdssamad5246]

I Fall in love with this awesome design thank you ❤❤❤

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@sirajudeenmujaheedopeyemi1567]

Omoo, this is great, thanks man... Can I keep following the reuse of your works, or be my side mentor🥺✨

[@restonspositifs3336]

You are the best 😇

[@winstreakpro2397]

Woow. You did a great job actually and I appreciate it for your hard work ❤

[@1LifeStudio]

Awesome fantastic 🎉

[@S-Lomar]

Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕

[@lokwa2149]

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 :)

[@الإسلامدينالحق-خ5ت]

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. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@adarshrai4112]

Great vision! You got a subscriber 👍

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@joelson091]

Great job, your practical tips have been very helpful! 😉

[@raniyach]

Thank you so muck this helped me a lot 🥰

[@rublyn111]

Bro you are doing good ☺️😊☺️ 👍

[@kulinterests]

Great man, I love your this 👍.

[@jaeilim9885]

This was so helpful!! Thank you

[@lahcenoufkir2562]

i'm font-end jenior i need two days to finish this website with thank u so mush (isset(subs+like+comment)=true);

[@memnesman2261]

Ty 4 lesson , Daniel.

[@virgiliorosa3703]

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?

[@julianm080808]

hey Thank you very much for this tutorial it was really useful, keep it up your tutorials, God bless you bro.

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@reynoldfercol7621]

Bro, Thank you so much, you save me for having a Friendly UI System that I can use

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@putri-pulau]

what a class! thanks a lot. subs and like immediately

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@gabryos3807]

Thanks, this is being very useful!

[@pete531]

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 ?

[@Abdullah-xz7ue]

1:19:50 nice idea

[@abidiyoussef1087]

this is awsome ❤ 💙 I have a question: how do you choose your pixels and size ?

[@crust5532]

Is it good for beginners in javascript ?? This is awesome

[@uqudgilbert7258]

Thank you so much the tutorial and your excellent explanation, it helps me a lot understanding CSS more. I do subscribe your channel.

[@donnong9106]

Great，it is exactly what I'm looking for, thanks a lot

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@erich2s_0103]

This design is so dope!!!

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@phim4297]

Nice work

[@oanhho7595]

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! ^^

[@kelvinthomas-pr8sd]

thank i learned a lot

[@thaha3947]

thank you so much for the video.

[@syedmaaz1012]

Best video but can you also tell me how can I fix the position of aside(side bar)

[@the-fax10]

You are Genius

[@edgarperez8949]

thanks for the tutorial!

[@franciscojunior2052]

Very good! Thank you my brother. Can we use this projects? He is for free use? Congratulation from Brazil!!

[@EGATORTUTORIALS]

Project files, Source code, and Live demo link in the video description.

[@الإسلامدينالحق-خ5ت]

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.. kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B- kzbin.info/www/bejne/bZWUZ3amjNVgpc0

[@Hexacrown]

Hi, amazing tutorial! Thank you very much! Is it possible to make it only the sidebar and main layout? So is filling all the layout from the right class. Could you teach me how to do that? Thank you!

[@EGATORTUTORIALS]

Sure. I'll do so in a future project, where we'll even add a backend.

[@issaKone10]

Thanks ☺️ But can you tell me where you found your templates

[@kelas_malam]

nice work

[@AJ-ox6yk]

awesome tutorial.

[@jagadeshmurugan5254]

Nice tutorial, thank you

[@nickeden3164]

I tried that Google icons is not corresponding and not even showing even when I add sharp