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 https://discord.gg/neKghyefqh

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

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

All Resources for this Tailwind CSS Course: https://github.com/gitdagray/tailwind-css-course

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: https://youtu.be/mJgBOIoGihA
CSS for Beginners full course: https://youtu.be/n4R2E7O-Ngo

Tutorial References:
Tailwind CSS: https://tailwindcss.com/
Prettier: https://www.npmjs.com/package/prettier
Automatic Class Sorting with Prettier: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

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/items?itemName=ritwickdey.LiveServer
Tailwind CSS Intellisense VS Code Extension: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Inline Fold VS Code Extension: https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold

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