How to build a responsive sidebar (navbar) // HTML & CSS in-depth
Learn how to build an animated responsive sidebar / navbar in this in-depth episode about HTML & CSS and see how to
✔️ use CSS transitions
✔️ use CSS grid layout
✔️ use CSS flex box layout
✔️ reference external fonts in HTML
✔️ use CSS variables and calculations to keep things stable
✔️ use JS to toggle a class
⌨️ CODE ⌨️
https://codepen.io/crayon-code/pen/MW...
🖇️ USEFUL LINKS 🖇️
🔗 Complete guide to grid layout: https://css-tricks.com/snippets/css/c...
🔗 Complete guide to flex box layout: https://css-tricks.com/snippets/css/a...
🔗 Google Fonts: https://fonts.google.com/
🔗 CSS custom properties / variables on MDN: https://developer.mozilla.org/en-US/d...
🔗 querySelector on MDN: https://developer.mozilla.org/de/docs...
🔗 addEventListener on MDN: https://developer.mozilla.org/en-US/d...
🔔 SUBSCRIBE & LIKE 🔔
▶️ / @crayoncode
⏱️ TIMESTAMPS ⏱️
00:00 Markup & Basic CSS Setup
01:44 Basic CSS & Font Setup
02:51 Variable Definitions & Basic Styling
05:56 Flying out labels
08:32 Toggle Button
10:37 Expanded style
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #js #tutorial