YoVDO

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

Offered By: Dave Gray via YouTube

Tags

HTML & CSS Courses Web Development Courses Javascript Courses Visual Studio Code Courses Responsive Web Design Courses CSS Animation Courses

Course Description

Overview

Learn to create an animated hamburger icon, mobile menu, and responsive navbar using Tailwind CSS in this comprehensive tutorial. Explore two menu versions, build a mobile-friendly interface, implement keyframes and animations, and integrate JavaScript for enhanced functionality. Master techniques like creating custom hamburger icons, using arbitrary values in Tailwind CSS, and extracting classes with @apply. Discover how to organize classes efficiently with Prettier and gain insights into future Tailwind CSS topics. Perfect for web developers looking to enhance their skills in creating responsive and interactive navigation elements.

Syllabus

Intro
Welcome
Overview & Starter Code
Small Changes to Project
Two Menu Versions
Build the Mobile Menu
Add keyframes and animations
Add a little JavaScript
Start Menu Version 2
Create a Hamburger Menu Icon
Arbitrary Values in Tailwind CSS
Extract Classes with @apply
Create the Hamburger Animation
VS Code: Disable Format on Save
Add One More Line of JS
Checking the Hamburger Animation
Future Tailwind CSS Topics
Organize Classes with Prettier


Taught by

Dave Gray

Related Courses

Programming Languages
University of Virginia via Udacity
Building a Basic Website
University of Massachusetts Amherst via Independent
iDESWEB, Introducción al desarrollo web
Miríadax
Web Engineering II: Developing Mobile HTML5 Apps
Technische Hochschule Mittelhessen via iversity
Web Application Architectures
University of New Mexico via Coursera