How to build an Animated Responsive Navbar from scratch // HTML & CSS
In-Depth Version: • Video
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
00:21 CSS Variables
00:35 Embedding Google Fonts
00:46 Basic CSS Setup
01:06 Header Bar - Base Styling
01:39 Header Bar - Items Markup
01:53 Header Bar - Items Styling
03:02 Header Bar - Items Hover Style
03:24 Header Bar - Logo
03:49 Menu Trigger - Base
04:14 Media Query / Navbar - Re-Positioning
05:06 Navbar - Items Styling
05:45 Navbar - clip-path Base Setup
06:03 Menu Trigger - Closed State
06:59 Menu Trigger - Opened State
07:48 Navbar - clip-path Transition
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #flexbox #gridlayout #clip-path #tutorial