Duration: 1:05:30

7,597 views

296

In this course, you’ll learn how to build a simple responsive admin dashboard UI, which features a collapsible sidebar, icons, and a dark mode toggle switch.
► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_HRTOcV-bnAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

Admin dashboards are among the most common user interfaces you’ll come across as a web developer. They’re a great practice ground for coding, because they include so many UI elements. Learn how to build a response admin dashboard using HTML, CSS, and JavaScript.

Assets Used in This Video:
• Source Files on GitHub: https://github.com/tutsplus/Build-a-Better-Responsive-Admin-Dashboard-UI/archive/refs/heads/main.zip
• Forecastr Logo: https://elements.envato.com/forecastr-logo-Q49JDD?utm_campaign=yt_tutsplus_HRTOcV-bnAo&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Unicons Line Icons: https://iconscout.com/unicons/explore/line
• Creating a Dark Mode Switcher With CSS and JavaScript: https://www.youtube.com/watch?v=Xk12JtYG8rw

00:00 Introduction
02:14 Writing the Markup
18:24 Styling the Header
25:39 Adding the Sidebar Toggle Interaction
34:35 Styling the Sidebar
46:06 Adding the Dark/Light Toggle
51:32 Styling for Large Screens
58:12 Creating the Sidebar Collapse Functionality

Read more on Building an Admin Dashboard Layout With CSS and JavaScript on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/building-an-admin-dashboard-layout-with-css-and-a-touch-of-javascript--cms-33964?utm_campaign=yt_tutsplus_HRTOcV-bnAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_HRTOcV-bnAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_HRTOcV-bnAo&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/envato
► Follow Envato on Facebook: https://www.facebook.com/envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -