Traversy Media | Tailwind Crash Course | Project From Scratch @TraversyMedia | Uploaded April 2022 | Updated October 2024, 2 hours ago.
In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git.
β Sponsor: InMotion Hosting!
bit.ly/3uVNhD6
π» Code:
github.com/bradtraversy/tailwind-landing-page
Frontend Mentor Challenge:
frontendmentor.io/challenges/manage-landing-page-SLXqC6P5
Csaba Kissi Twitter (Tailwind Course Helper):
twitter.com/csaba_kissi
π Website & Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
2:45 - Getting Started
4:58 - Install & Setup Tailwind CLI
7:39 - NPM Scripts & Output
11:00 - Customizing & Config
13:25 - Navigation Area + Spacing, Flex, Responsive Classes, etc
24:06 - Hero Section
30:43 - Class Name Order Convention
33:44 - Features Section
44:58 - Testimonial Section
54:15 - CTA Section
59:34 - Footer
1:10:59 - Hamburger Menu HTML
1:15:38 - Custom CSS (Background SVGs)
1:19:45 - Custom CSS (Hamburger Menu)
1:25:08 - Menu JavaScript
1:28:27 - Deploy To InMotion Hosting
In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git.
β Sponsor: InMotion Hosting!
bit.ly/3uVNhD6
π» Code:
github.com/bradtraversy/tailwind-landing-page
Frontend Mentor Challenge:
frontendmentor.io/challenges/manage-landing-page-SLXqC6P5
Csaba Kissi Twitter (Tailwind Course Helper):
twitter.com/csaba_kissi
π Website & Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
2:45 - Getting Started
4:58 - Install & Setup Tailwind CLI
7:39 - NPM Scripts & Output
11:00 - Customizing & Config
13:25 - Navigation Area + Spacing, Flex, Responsive Classes, etc
24:06 - Hero Section
30:43 - Class Name Order Convention
33:44 - Features Section
44:58 - Testimonial Section
54:15 - CTA Section
59:34 - Footer
1:10:59 - Hamburger Menu HTML
1:15:38 - Custom CSS (Background SVGs)
1:19:45 - Custom CSS (Hamburger Menu)
1:25:08 - Menu JavaScript
1:28:27 - Deploy To InMotion Hosting