[Last updated 3/2024] Tailwind CSS – Zero to Hero tailwind css – tailwind v3 2024 (Udemy – Engsub)

About Course

Views

What you’ll learn:
Increase your value as a front end web developer
Build a landing page with Tailwind CSS
Create custom Tailwind CSS plugins
Extend the default Tailwind CSS theme
Create custom animations with Tailwind CSS
Time video:
3.5 hours (29 Lesson + Documents)
Teacher:
Tom Phillips
Total weight:
2.1 GB

Original link:
https://www.udemy.com/course/tailwind-css-zero-to-hero/
Link :
Below The Post

Nếu bị chặn vui lòng sử dụng IDM, Ant Manager,…

Course Content

1. Introduction

2. Introduction.mp4

02:20
3. Editor setup.mp4

02:35
4. Udemy ratings & reviews.mp4

00:38
5. Project setup & tailwind css overview.mp4

16:43

2. Building the navbar

1. Create the navbar and logo (with spacing, flexbox, and gradients).mp4

12:29
2. Apply Google Fonts to tailwind project.mp4

04:44
3. Create the first menu item, add classes on hover, & add transitions.mp4

07:13
4. Finish the menu items, editing techniques, & tailwind css components.mp4

10:03
5. Create the sub menu items & use tailwind css group functionality.mp4

06:17
6. Create the mobile menu icon.mp4

05:53
7. Animate mobile menu icon & create custom variant plugin with addVariant.mp4

10:13
8. Extend tailwind css custom open variant & implement mobile menu functionality.mp4

13:27
9. Implement mobile sub menu with custom group open tailwind variant.mp4

08:44

3. Building the Hero section

4. Building the headliners section & carousel

5. Light and dark mode

6. Building the tickets & lineup timeline sections

7. Deploy

Student Ratings & Reviews

No Review Yet

[Last updated 3/2024] Tailwind CSS – Zero to Hero tailwind css – tailwind v3 2024 (Udemy – Engsub)

About Course

Course Content

1. Introduction

2. Introduction.mp4

3. Editor setup.mp4

4. Udemy ratings & reviews.mp4

5. Project setup & tailwind css overview.mp4

2. Building the navbar

1. Create the navbar and logo (with spacing, flexbox, and gradients).mp4

2. Apply Google Fonts to tailwind project.mp4

3. Create the first menu item, add classes on hover, & add transitions.mp4

4. Finish the menu items, editing techniques, & tailwind css components.mp4

5. Create the sub menu items & use tailwind css group functionality.mp4

6. Create the mobile menu icon.mp4

7. Animate mobile menu icon & create custom variant plugin with addVariant.mp4

8. Extend tailwind css custom open variant & implement mobile menu functionality.mp4

9. Implement mobile sub menu with custom group open tailwind variant.mp4

3. Building the Hero section

1. Create the Hero section and background image.mp4

2. Add the hero content.mp4

3. Create the waveform logo animation.mp4

4. Create custom animation delay tailwind css plugin with matchUtilities.mp4

4. Building the headliners section & carousel

1. Default base styles for headings.mp4

2. Create a scrollable & snappable carousel in tailwind css.mp4

3. Adding left and right arrows to the carousel.mp4

5. Light and dark mode

1. Implement light and dark mode based on user’s local machine settings.mp4

2. Implement tailwind css light & dark mode with toggle button.mp4

6. Building the tickets & lineup timeline sections

1. Create the tickets table & custom tailwind plugin with addUtilities.mp4

2. Start the lineup timeline (with advanced background gradients in tailwind).mp4

3. Finish the lineup timeline.mp4

4. Advanced tailwind css plugins & creating dynamic button component plugin.mp4

7. Deploy

1. Upload code to github and deploy to vercel.mp4