Responsive Project Dashboard // Speedrun // HTML & CSS Tutorial

Опубликовано: 04 Апрель 2026
на канале: crayon code

10,184

307

Responsive Project Dashboard // Speedrun // HTML & CSS Tutorial

Learn how to build a project dashboard in this HTML & CSS Speedrun and see how to
✔️ use CSS grid layout
✔️ use the template tag to reuse UI portions
✔️ make a responsive layout
✔️ build a vertical appointment calendar

🔔 SUBSCRIBE & LIKE 🔔

   / crayoncode

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

☕ 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:30 "My Work" Card / Card Header
06:10 Project Cards
10:18 "My Team" Card
12:16 "My Team" Action Menu
14:13 "My Day" Card
17:42 "Messages" Card
18:42 Navbar
19:33 Responsiveness

🏷️ HASHTAGS

#dashboard #html #css #js #tutorial

🎵 Music

'Energy' by Sapajou
Free download: bit.ly/2MnVoWG

'All Night Long' by Sapajou
Free download: bit.ly/2NNL2zJ

'Flight' by LiQWYD   / liqwyd
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/flight-liqwyd
Music promoted by Audio Library    • Flight – LiQWYD (No Copyright Music)