Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Create an Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS. In this tutorial, we will create an animated hamburger icon and an animated mobile menu with Tailwind CSS and add them to our responsive navbar.

🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: https://bit.ly/WebDevMaster
- The Complete Web Designer: https://bit.ly/CompWebDesign
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe  ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions - Please post them to my Discord ➜  Discord: discord

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray

🔗 All Resources for this Tailwind CSS Course: https://github.com/gitdagray/tailwind...

🔗 Playlist for this Tailwind CSS Course: https://bit.ly/3BKYrzg

Animated Hamburger Icon, Mobile Menu & Responsive Navbar with Tailwind CSS

(00:00) Intro
(00:05) Welcome
(00:17) Overview & Starter Code
(01:23) Small Changes to Project
(04:03) Two Menu Versions
(05:19) Build the Mobile Menu
(14:12) Add keyframes and animations
(18:25) Add a little JavaScript
(26:14) Start Menu Version 2
(28:43) Create a Hamburger Menu Icon
(34:59) Arbitrary Values in Tailwind CSS
(36:04) Extract Classes with @apply    
(37:54) Create the Hamburger Animation
(41:12) VS Code: Disable Format on Save
(42:12) Add One More Line of JS
(42:43) Checking the Hamburger Animation
(44:12) Future Tailwind CSS Topics
(44:40) Organize Classes with Prettier

📚 Suggested Pre-requisites for this Tailwind CSS course:
🔗HTML for Beginners full course: HTML Full Course for Beginners | Comp...
🔗CSS for Beginners full course: CSS Full Course for Beginners | Compl...

📚 Tutorial References:
🔗 Tailwind CSS: https://tailwindcss.com/
🔗 Prettier: https://www.npmjs.com/package/prettier
🔗 Automatic Class Sorting with Prettier: https://tailwindcss.com/blog/automati...

⚙ Web Dev Tools:
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Node.js: https://nodejs.org/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/
🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/...
🔗 Tailwind CSS Intellisense VS Code Extension: https://marketplace.visualstudio.com/...
🔗 Inline Fold VS Code Extension: https://marketplace.visualstudio.com/...

Was this tutorial about creating an animated hamburger icon and mobile menu in Tailwind CSS helpful? If so, please share. Let me know your thoughts in the comments.

#tailwindcss #hamburger #icon

• #education
• #animated_hamburger_icon
• #mobile_menu_responsive_navbar_with_tailwind_css
• #animated_hamburger_icon
• #animated_hamburger_menu
• #hamburger_menu
• #hamburger_menu_animation
• #hamburger_icon_animation
• #hamburger_icon
• #mobile_menu
• #animated_mobile_menu
• #mobile_menu_animation
• #responsive_navbar
• #responsive_menu
• #responsive_mobile_menu
• #css
• #tailwind
• #tailwind_css
• #tailwindcss
• #hamburger_icon_css
• #hamburger_menu_css
• #css_hamburger_menu
• #css_animation
• #css_animated_hamburger_icon
• #menu
• #icon