Dashboard with Dark Mode // Speedrun // HTML & CSS Tutorial

Learn how to build an dashboard with dark mode in this HTML & CSS Speedrun and see how to
✔️ use CSS grid layout
✔️ use the template tag to reuse UI portions
✔️ build a toggle switch
✔️ make SVGs adapt to a color theme

🔔 SUBSCRIBE & LIKE 🔔

   / crayoncode  

⌨️ CODE ⌨️
Source code is available on my Ko-Fi page:
https://ko-fi.com/s/fbf4c8c547
https://ko-fi.com/s/4442dc5794

☕ SUPPORT MY WORK 🙏
https://ko-fi.com/crayoncode
https://www.buymeacoffee.com/crayoncode

👋 FOLLOW US

📸 INSTAGRAM:   / crayon_code  

💎 ASSETS

Icons taken from Iconly
https://www.figma.com/community/file/...

⏱️ TIMESTAMPS

00:00 Basic Layout, Font Scale & Styles
03:15 "My Courses" Section & Filter
05:36 Action Buttons / Chevrons
06:57 Course Cards & SVG Sprites
10:24 Scrolling
11:24 Circular Progress Bar
12:55 "My Results" Section
16:19 Stacked Progress Bar
18:00 Side Bar
22:09 Nav Bar
24:05 Dark Mode - Toggle Switch
26:10 Dark Mode - Implementation


🏷️ HASHTAGS

#dashboard #html #css #js #tutorial

🎵 Music

Track: Down The Hill — Vendredi [Audio Library Release]
Music provided by Audio Library Plus
Watch:    • Видео  
Free Download / Stream: alplus.io/down-hill

Track: Less Rake
Artist: tubebackr
https://links.fanlink.to/tubebackr