Responsive Admin Dashboard Panel in HTML CSS & JavaScript | Dark/Light Mode
HTML-код
- Опубликовано: 6 июн 2024
- Create Responsive Admin Dashboard Panel in HTML CSS & JavaScript | Dark/Light Mode | Codinglab
In this video, you will learn to create a Responsive Admin Dashboard Panel with Sidebar Menu using HTML CSS, and JavaScript. I also have added dark and light modes. If you choose a dark mode or close the sidebar, it will not change even webpage is refreshed or reopened, to make this I have used local storage.
---
Hire us on Fiverr
➤ www.fiverr.com/prakashahi
Follow me on Instagram
➤ / coding.np
Visit my website for helpful coding projects with source code
➤ www.codingnepalweb.com/admin-...
---
Timestamps:
00:00 Admin Dashboard | Demo
02:50 Creating CSS color variable
02:52 Importing Font Icons
03:05 Creating Sidebar for Admin Panel in HTML
06:25 Importing Google Fonts
13:56 Creating Navlink hover Indicator
18:29 JavaScript code dark & light mode | toggle button
22:05 Creating Admin Dashboard Panel
26:47 JavaScript code to toggle sidebar
49:53 Making Admin dashboard panel responsive
56:05 Localstorage code to keep user selected mode & sidebar
#Admin_Panel #Sidebar_Menu #HTML_CSS_JavaScript
---
Music Credit:
Song: Ikson - Anywhere (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
➤ Video Link: • Ikson - Anywhere (Vlog...
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
Deep Sea by Vendredi
Free Download / Stream: bit.ly/-deep-sea
Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: / 7ru1l8gtgo
Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release]
➤ Watch: • Levianth & Axol - Reme...
Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release]
➤ Watch: • Lost Sky - Dreams pt. ...
Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
➤ Video Link: • Ehrling - You And Me (...
![Dimension 20: Never Stop Blowing Up Trailer [Dropout Exclusive Series]](http://i.ytimg.com/vi/xYeXpbHnGEM/mqdefault.jpg)
May be its buttering you.. But have been searching for a html css dashboard with responsiveness for the past few days.. U saved my time.. Thanks a bunch
Glad it helped.
Awesome one sir! Definitely a great improvement from your previous admin dashboard video🔥
Thanks a ton
Did you have email?
Awesome, you are amazing! 🤯 Thanks for sharing your knowledge.
Great job!! We are waiting the sources...😜
Thanks!!
man i freaking love you man how you do this hard thing??
The Perfect Design I was looking for
Appreciate it
Good job. Your code quality is so good!
I'm glad you like it
Very good video, hope you can simple code and complete a web page (including: header, body, footer, ...), I want to refer to how to divide the layout as well as how to set the class name.
This is very beautiful Sir great UI
I'm glad you like it
Thanks a million bro❤🔥
Super cool 😎🔥
excellent, that is a very good product
I'm loving it
Thanks a ton.
Really it's beauty.....
Great job!!!Do more video...
You are cool!!!
Thank you, I will
very awesome sir .
Awesome
Love it always bro
Appreciate it
Amazing UI ❤️
Glad you like it!
Amazing👍👍👍
Thank you! Cheers!
Good to see
Thank you! Cheers!
thank you
thanks you bro 🥰
i am your new subscriber from now
best Dashboard Design
Please make css tutorial basics + practical, i know there are so many in RUclips but i think you can make better than that all plzzzzzz
Woow this tutorial smooth like butter..this is how a perfect tutorial should be...
Glad it was helpful!
Thanks
Niiiiiiiiice thank you siir🤗🥰❤️🤩🌹🌼💐
Most welcome
Nice , good vídeo
Thanks a ton.
Очень подробно! Спасибо за видео! А можно Git, если он есть
I lv u ❤
great
Thanks a ton.
How to navigate to other menu ítems on click with js?
Very good job! In the first part of Javascript , addEventListener function is unable to work and changes to dark! The console log shows this error "a live reload enabled "
Sir, how do I remove that primary color of the body? when I am resizing my screen it shows me the primary color on my dashboard content.
what css framework you use?
What kind of live preview you use
waiting for source code :)
bro want more html css project like this please bro
offcourse stay tuned.
sir plz made a tutorial using prime ng ui library in angular
hey bro thats a nice design ,is it ok for me to use this design for my project?
is there would be a problem?
Not at all
Что с качеством?
Why are you not using bootstrap for responsive?
Tell me if i want to use bootstrap 5....
because not use reset css on int css ?
please help my response message is staying even i refresh how to manage that
Why you don't use microphone????? Plzzzzzzzzz explain what are you doing, beginners like me need this.
How to call content button resources. Thanks
Can I use this code for my blogger
Yeah
The source code link will be uploaded soon????
Wait for few days.
@@CodingLabYT Waiting
Can you do a booking system sir huhu
How add drop-down menu in sidebar in this admin panel. Plzz help
Plzz reply how add drop-down menu in sidebar
i can't turn off advertisement on your page. so, i can't access to your code
Please show me how to control logged in users with a panel like this and host my own SQL login
I can't get source code. can you send my please? because is not available on your website
How to link to another page without lost the sidebar?
How can I hire you for UX Design?
Sorry, I have not work as a freelancer
@@CodingLabYT
Anyway,
Thanks for reply.
Good video.
Subscribed.
can you make "search something in website" script.
Kaisa website banaye ho khul hi nahi rha h
Bro, I have a picture that can't be small
Broo can you make work telegram share button or facebook. Please!!!
Where is the source code?
Please do wait for a few days.
Provide source code please @CodingLab
It's in the description. 👍