How to build an Animated Responsive Navbar from scratch // HTML & CSS in-depth

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

2,946

112

Learn to build an animated responsive navbar from scratch in this in-depth episode about HTML & CSS and see how to
✔️ use CSS flexbox and CSS grid layout
✔️ reference external fonts in HTML
✔️ use CSS clip-path to create a nice uncovering effect
✔️ use a checkbox to trigger a menu
✔️ build a responsive navbar entirely from scratch

⌨️ CODE ⌨️

▶️ https://codepen.io/crayon-code/pen/QW...

🖇️ USEFUL LINKS 🖇️

🔗 A Complete Guide to Grid https://css-tricks.com/snippets/css/c...
🔗 A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a...
🔗 Google Fonts: https://fonts.google.com/

🔔 SUBSCRIBE & LIKE 🔔

▶️ / @crayoncode

⚙️ USEFUL VSCODE EXTENSIONS ⚙️

Live server: https://marketplace.visualstudio.com/...
Bracket Pair Colorizer: https://marketplace.visualstudio.com/...

⏱️ TIMESTAMPS ⏱️

00:00 Basic HTML Setup & Logo Markup
01:03 CSS Variables
02:35 Embedding Google Fonts
03:14 Basic CSS Setup
04:24 Header Bar - Base Styling
05:54 Header Bar - Items Markup
08:20 Header Bar - Items Styling
12:14 Header Bar - Items Hover Style
13:30 Header Bar - Logo
14:55 Menu Trigger - Base
16:50 Media Query
17:12 Navbar - Re-Positioning
20:26 Navbar - Items Styling
22:34 Navbar - clip-path Base Setup
24:03 Menu Trigger - Closed State
27:39 Menu Trigger - Opened State
30:57 Navbar - clip-path Transition

👋 FOLLOW

📸 INSTAGRAM: / crayon_code

🏷️ HASHTAGS 🏷️

#html #css #flexbox #gridlayout #clip-path #tutorial