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

[@WildHowlYT]

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

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

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

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

[@JamieDawsonCodes]

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

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

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

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

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

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

[@chinababazhou9565]

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

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

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

[@FeelTheBeatStatus]

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

[@3208nandu]

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

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

[@jonasefanvasquezyanez1834]

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

[@cajaaib1]

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

[@BobsProgrammingAcademy]

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

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

[@JuanPabloThenKingsley]

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

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

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

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

[@francisomegas8900]

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

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

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

[@OrlandoLopez-d8k]

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

[@ygvanz]

Excellent tutorial. Learned a lot from this!

[@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! :)

[@freaxwoz2802]

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.

[@danalex2991]

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.

[@apinokopeter1675]

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

[@Themun21]

The table isn't working for me together with box shadows and hover and also the whole page will look different until I zoom out from 100% to 33%? Any idea

[@syednadeemmuhammed5675]

Amazing Video! I learnt quite a lot.

[@YassFreeks]

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

[@sabriennasabsab8753]

1:26:00 Why my orders not working? It says "Wrap in JSX fragment" or something. I copying every orders but it still not working

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

[@someoneelse8103]

1:27 why not to open sidebar full width? That spacing for buttons, especially for the logout button looks awful on mobile

[@Dailyfindout]

Big thanks from Cambodia🥰

[@winstreakpro2397]

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

[@watcher6933]

usefull. Thankyou from Indonesia bro😇

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

[@angelamilton5134]

This tutorial is great!!! Thanks for sharing

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

[@MahendranathMahi821]

Hey, brother 35:58 the shadow and transition is not getting active . Is there any fix for this ?

[@ruiricardojoaquimbastos1578]

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

[@joelson091]

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

[@someoneelse8103]

0:02 why do you need hover effects for mobile version?

[@olatundeolukoya1788]

Beautiful beautiful beautiful 🎉. Thanks thanks thanks

[@dukidodier5284]

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

[@restonspositifs3336]

You are the best 😇

[@kulinterests]

Great man, I love your this 👍.

[@shreyas.sihasane]

Bro I am unable to change the font color in dark mode of H1 tag those are remaining black, how to change it..🥺🥺 Please tell

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

[@adhdaddventure]

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;

[@electricai-tech9217]

Thank you for this amazing tutorial.

[@EGATORTUTORIALS]

You're very welcome!

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

[@485_kiky4]

hi, why my results can't be scrolled down? even though the code is the same

[@gabryos3807]

Thanks, this is being very useful!

[@adaopedro2544]

Many thanks for sharing this so much useful content!

[@temiloluwaaina9049]

lovely video. learnt a lot of new things

[@S-Lomar]

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

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

[@jaeilim9885]

This was so helpful!! Thank you

[@polinus7]

in case phone mode, once we close sidebar, it is not displayed on pad, pc mode. so we need after expand window;

[@chrisashby32]

How do you make the active highlight for the sidebar nav items change when you click the different pages?

[@cryzz0n]

Absolutely wonderful work!

[@cawai2815]

Thank you. I learned alot from this video.

[@sheetalmehta8584]

Thanks for this video.

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

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

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

[@fuad7258]

ohh man ! you make my day

[@الإسلامدينالحق-خ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

[@ptrckfc]

This is awesome. I learned a lot! Thank you very much. \o/

[@الإسلامدينالحق-خ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

[@clutchcloudd]

so good. it so simple css but very useful.

[@raniyach]

Thank you so muck this helped me a lot 🥰

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

[@mr.gammer380]

3:30 hey mr EGATOR , how can I get a material icosn link?

[@1LifeStudio]

Awesome fantastic 🎉

[@SAVITAR.exeeee]

increible 💯💯

[@eduardolemos867]

Excellent Tutorial

[@sirajudeenmujaheedopeyemi1567]

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

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

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

[@fernandopereiradeandrade1331]

👏Show de bola, muito bom.....:)

[@C0braGameplays]

Dale Br

[@rublyn111]

Bro you are doing good ☺️😊☺️ 👍

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

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

[@alaynahassan396]

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

[@memnesman2261]

Ty 4 lesson , Daniel.

[@glecio1203]

thanks for this. you're awesome

[@thaha3947]

thank you so much for the video.

[@dilshanonlive7413]

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

[@dileepkumarb377]

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