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: • Video
Free Download / Stream: alplus.io/down-hill
Track: Less Rake
Artist: tubebackr
https://links.fanlink.to/tubebackr