How to build a minimalistic navbar (tabbar) // HTML & CSS in-depth
Learn how to build an animated minimalistic navbar in this in-depth episode about HTML & CSS and see how to
✔️ use CSS transitions
✔️ use CSS grid layout
✔️ change SVG icons with CSS
✔️ use CSS variables and calculations to keep things stable
✔️ use JS to toggle a CSS class
⌨️ CODE ⌨️
https://github.com/crayon-code/minima...
🖇️ USEFUL LINKS 🖇️
🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/c...
🔗 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...
💎 Assets 💎
Icons taken from Iconly 2.3
https://www.figma.com/community/file/...
🔔 SUBSCRIBE & LIKE 🔔
▶️ / @crayoncode
⏱️ TIMESTAMPS ⏱️
00:00 Markup & Basic CSS Setup
01:10 Basic CSS & Layout Setup
02:44 Hover Effect
03:49 Active Styling
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #js #tutorial
🎵 Music 🎵
Track: Hypnosis — Vendredi
Watch: • Vendredi - Hypnosis ( Free Download & Free...
Free Download / Stream: https://www.toneden.io/vendredi-duo/p...
Song: DayFox - Always You
Music provided by Vlog No Copyright Music.
Video Link: • DayFox - Always You (Vlog No Copyright Music)