Tailwind CSS – Zero to Hero tailwind css – tailwind v3 2024

Tailwind CSS – Zero to Hero tailwind css – tailwind v3 2024, available at $69.99, has an average rating of 4.59, with 34 lectures, based on 444 reviews, and has 2652 subscribers.

You will learn about 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 This course is ideal for individuals who are Web developers of all levels who want to increase their value by learning a more advanced way of styling their apps & sites It is particularly useful for Web developers of all levels who want to increase their value by learning a more advanced way of styling their apps & sites.

Enroll now: Tailwind CSS – Zero to Hero tailwind css – tailwind v3 2024

Summary

Title: Tailwind CSS – Zero to Hero tailwind css – tailwind v3 2024

Price: $69.99

Average Rating: 4.59

Number of Lectures: 34

Number of Published Lectures: 33

Number of Curriculum Items: 34

Number of Published Curriculum Objects: 33

Original Price: $24.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Web developers of all levels who want to increase their value by learning a more advanced way of styling their apps & sites

Target Audiences

Web developers of all levels who want to increase their value by learning a more advanced way of styling their apps & sites

Improve your skills and increase your value as a front end web developer by learning the ins and outs of Tailwind CSS!

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

No more trying to think of appropriate class names, no more creating wrapper classes and inner classes, no more wasting resources with unecessarily large CSS files. Tailwind CSS makes building designs incredibly fast and easy, not to mention has built-in optimisation out of the box. Not using a particular class in your HTML files? Then Tailwind CSS won’t include it in the final build of your CSS!

In this course we’ll be creating a mobile-first landing page for a music festival website. We’ll be covering layouts with flexbox and grid, Hero and Navbar components with menu and sub menu items, targeting different states like hover and focus states, targeting different screen sizes, and extending beyond Tailwind’s built-in theme and classes.

After getting comfortable with Tailwind CSS’s utility classes, we’ll be creating our own base, utility, and component classes, and even writing our own Tailwind CSS plugins! This course is packed with an incredible amount of value in such a short amount of time!

Increase your value as a front end web developer today by learning a more advanced way of styling your websites using Tailwind CSS.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Important! Read this before you begin this course

Lecture 2: Introduction

Lecture 3: Editor setup

Lecture 4: Udemy ratings & reviews

Lecture 5: Project setup & tailwind css overview

Lecture 6: How to get help in this course

Chapter 2: Building the navbar

Lecture 1: Create the navbar and logo (with spacing, flexbox, and gradients)

Lecture 2: Apply Google Fonts to tailwind project

Lecture 3: Create the first menu item, add classes on hover, & add transitions

Lecture 4: Finish the menu items, editing techniques, & tailwind css components

Lecture 5: Create the sub menu items & use tailwind css group functionality

Lecture 6: Create the mobile menu icon

Lecture 7: Animate mobile menu icon & create custom variant plugin with "addVariant"

Lecture 8: Extend tailwind css custom open variant & implement mobile menu functionality

Lecture 9: Implement mobile sub menu with custom group open tailwind variant

Chapter 3: Building the Hero section

Lecture 1: Create the Hero section and background image

Lecture 2: Add the hero content

Lecture 3: Create the waveform logo animation

Lecture 4: Create custom animation delay tailwind css plugin with "matchUtilities"

Chapter 4: Building the headliners section & carousel

Lecture 1: Default base styles for headings

Lecture 2: Create a scrollable & snappable carousel in tailwind css

Lecture 3: Adding left and right arrows to the carousel

Chapter 5: Light and dark mode

Lecture 1: Implement light and dark mode based on user's local machine settings

Lecture 2: Implement tailwind css light & dark mode with toggle button

Chapter 6: Building the tickets & lineup timeline sections

Lecture 1: Create the tickets table & custom tailwind plugin with "addUtilities"

Lecture 2: Start the lineup timeline (with advanced background gradients in tailwind)

Lecture 3: Finish the lineup timeline

Lecture 4: Advanced tailwind css plugins & creating dynamic button component plugin

Chapter 7: Extras

Lecture 1: Gradient text colors in Tailwind CSS

Lecture 2: New size- utility class name

Lecture 3: Create a custom diagonal radius plugin

Lecture 4: Upload code to github and deploy to vercel

Lecture 5: BONUS!

Instructors

Tom Phillips
Fast-paced information-dense courses for busy web developers
WebDevEducation (Tom Phillips)
Fast-paced information-dense courses for busy web developers

Rating Distribution

1 stars: 5 votes
2 stars: 5 votes
3 stars: 30 votes
4 stars: 123 votes
5 stars: 281 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu