Responsive Admin Dashboard using HTML CSS and JavaScript with Light & Dark Mode
HTML-код
- Опубликовано: 31 май 2024
- Responsive Admin Dashboard using HTML CSS and JavaScript with Light & Dark Mode
Hostinger Discount: www.hostg.xyz/SH8cs
Responsive React Portfolio Website with Theme Customization (FULL COURSE): www.udemy.com/course/react-js...
In this beginner-friendly Web development tutorial, I'm going to teach you how to create a responsive crypto/banking dashboard using HTML, CSS, and JavaScript. We'll be using modern CSS modules like CSS Grid, CSS Flexbox, CSS Variables, and CSS Media Queries to make our dashboard responsive on tablets and mobile phones. With CSS Variables, we will also be able to change our theme (light and dark) via JavaScript.
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/1KsUB...
Timestamps:
00:00:00 Intro (Project Overview)
00:05:20 Material Icons & Google Fonts link
00:06:52 Navigation Bar Markup
00:10:15 CSS Root Variables and General Elements Styles
00:17:42 Navigation Bar Styles
00:25:00 Sidebar Markup
00:31:00 Sidebar Styling
00:40:00 Middle Section Cards Markup
00:44:40 Middle Section Cards Styles
00:54:45 Monthly Reports Markup
00:57:34 Monthly Reports Styles
00:59:45 Fast Payment Markup
01:01:45 Fast Payment Styles
01:06:16 Chart JS
01:12:38 Investments Markup
01:16:52 Investments Styles
01:20:50 Recent Transactions Markup
01:26:38 Recent Transactions Styles
01:31:25 Media Queries For Tablets and Mobile Phones (Responsive Design)
01:40:40 Show/Hide Sidebar on small screens using JavaScript
01:44:30 Theme Change Functionality
Finished the code along. Thank you so much. I like the fact you use modern CSS tools and your markup is semantic and up to date. Great one
Amazing content! One of the best I have seen in youtube. I really hope you can continue this admin dashboard by doing tutorial like this for the rest of the pages like exchange page, wallet page, transactions page etc. as it would be very helpful for a full project. Thankyou!
Great video, very easy to follow and understand. Your code seems very clean and easy to maintain, congrats!
Man You're the best designer exist on YT.....i just love it.❣
I have successfully coded it to React. Even if am an intermediate, full-stack dev... I really learn a lot from your content bro........ Thanks a lot and keep moving......👍👍👍👍👍👍🦾
Can you share code with me?
Thanks bro! Please make a continuation of this project. You can connect the backend. Please continue projects on creating dashboards.
you are by far one of the best youtubers that I like to watch. I like how you actually teach us about designs too and you don't act like the other ones that copies designs from other pages. You are original. I hope you keep making these videos. Love from Canada!
Oh also if you can make tutorials with your voice it would be amazing like the recent ones that you made
Ohhh my frickin goodness you’re gifted
I love you man and you've gained a subscriber
I love your designs and the way you make them simple.
Can you give us a dashboard tutorial in which when one clicks on the nav-links on the sidebar (from my perspective, it seems fixed), the main content changes to content which the link clicked contains instead of the entire webpage changing?
More power to you. Lots of love from Nigeria. You have plus one subscriber ie me.
It could be amazing, if you added transition to the changing themes. Actually I am interested in this video. Thank you, good luck!
I so much love your contents❤
The Chart dosen't Work Why ?
Amazing one
Nice work
Amazing content! 😎 Are we allowed to use this project in our personal portfolios and do we need to attribute you?
Just wow❤️❤️🔥🔥
Thank you bro: you just made my day. I know that you have already answered below but Can ı use it on my projects?
Great video, easy to follow and understand so this dashboard have use with php mysql or not, admin?
Thank you!!
You helped me a lot!
I had to code it in React for a web application.
Repository link please
Cool work, but I just don't like tutorials with only background music...
Just doesn't feel "tutorial" enough for me.
But like I said, I always admire your work.
Nice one, keep up.
Bro Your are The Finest Front end Developer I ever seen, You should start a course on zero to hero front end which technics and frameworks you use for front end development!
I'm glad you like my content bruh. Even better projects coming up!
While styling Fast Payment section, you have used "align-self" , I think it is align-items, right? Can you clarify on this?
First Comment BRO!! I LOVE your videos!❤
Amazing content. How do I connect it to a server?
I have a 1920 1080 display , the block with maps turns out to be too stretched and the maps look out of proportion. How can I fix this? When using a scale of 125%, everything is fine.
How to make the sidebar have toggle function for other hyperlink as shown in the video like exchange, wallet, transactions etc. to show different content other than dashboard using JavaScript? can you show tutorial.
How do you calculate the font size and use . How much font should be given plz tell 🙏
I faced one problem . Navbar does not get extend when i zoom in to 90% , it only covers the screen when on 75% , for rest the screen gets unoccupied when i zooms in it.What should i do?
How about clicking Help Center sir? How to deal with that?
One of my fav frontend Dev.. Thanks a lot for inspiring me. I have one suggestion with regards to the dashboard-mobile, where you displayed the amounts etc; is it possible you could make that side more of a carousel or swipe.. Thank you
Sure, Anthony. I'll do that in a future project. We may even add a backend
@@EGATORTUTORIALS Thanks for your quick response and I look forward to that
Your content Is awesome. Just one suggestion use Your own voice instead of music. Thanks
Thanks buddy. I do use my voice in tutorials, just didn't do it for this one.
Please where can I find the images for this video?
I just finished building this...
Though it took me 2 days, but it was a super awesome experience, thanks so much for this.
Guys like you make the world a much more better place than most of them trying to take over Mars...🤪
I already learnt so much PHP backend tricks in your blog application tutorials.😅😅😅
Keep up the good work!
Hi can you give your code?
@@ikajaki mine is seriously modified if you don't mind...
It's ok I can understand@@benjaminibok6465
I have gone through a lot of contents both paid and free RUclips vids like this. I have never seen a more amazing content. The quality of this is just on another level. Thank you very much for putting this out there. I bless the day I came across your content. It changed my frontend career forever and moved me to the next level. Please how can I get access to more contents from you, paid or free?
Thanks Mfoniso, for the kind words. I don't have any paid content for now but I have more cool projects in stock for you when I come back from my break.
Wer waiting on you Sir...
Mfoniso, holla!
Hello I love your tutorials. Do you offer personalized work? Or do you just do these tutorials for fun? I ask you why I want to buy a Script and customize it since the interface of this Script sucks. I want to buy it and modify the user interface and add 2 functions that the developer has not taken into account. Thanks in advance
email me support@egattor.com
Nav bar display block and non not work in iOS safari
Bro, I'm not able to extract photos please help
Good job. Is it possible to create a tutorial of sidebar menu that has sub-menus?
Expect such a tutorial next week
@@EGATORTUTORIALS Thank you.
@@EGATORTUTORIALS A mega sub-menu would be so nice. Thank you in advance.
Broh I can't download this video. Why?
❤❤
i need the soruce code pls :(
Can i use it my project sir
💯
source code?
GUYS I REALLY NEED THE SOURCE CODE OF THIS PROJECT
I really need source code please for my project. You would be of great help please share thank you.
The link to Source Code & Live Demo is in the Description of the video. It's accessible for my patrons.
send me a message support@egattor.com
You misspelled ETH 🤔 on the central card
Thanks buddy, just correct it.
My brain is overheating
18:56
💗💗😘
@RAD this is a way of showing love bruh! you Good!
52:01
Hii
Gee a prolonged advertisement using code others have presented on this platform before, the rubes sure are being shilled here
Source code please
Source code, assets and live demo is available for my patrons, but feel free to send me an email if you can't afford it.
I'm not interested in your source code just the images to be able to follow the video.
Get it from here support@egattor.com
@@EGATORTUTORIALS pls where can I get the images for this video I'm really interested
sent you an e-mail
Since you not only release the source code for a fee, you don't make the images available for us to use when creating the project along with you.😡