English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 34 lectures (3h 59m) | 2.95 GB
Tailwind CSS – effortlessly build a tailwind css music festival site and learn to customize and extend tailwind css!
This course is has been updated to Tailwind CSS v4.
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! 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.
What you’ll learn
- Increase your value as a front end web developer
- Build a landing page with Tailwind CSS
- Extend the default Tailwind CSS theme and customize tailwind css
- Create custom animations with Tailwind CSS
Who this course is for:
- Web developers of all levels who want to increase their value by learning a more advanced way of styling their apps & sites
Table of Contents
V4 – Introduction & Project Setup
1 Introduction and Tailwind CSS project demo
2 Important! Read this before you begin the course! (GitHub repo etc)
3 Editor setup for Tailwind CSS
4 Udemy ratings & reviews
5 Tailwind CSS project setup
6 Tailwind CSS overview
7 How to get help in this course
V4 – Build the navbar
8 Create the navbar and logo (spacing, flexbox & gradients in Tailwind)
9 Apply Google Fonts to Tailwind CSS project
10 Create the first menu item, add classes on hover, & add transitions
11 Finish the menu items, editing techniques, & Tailwind CSS components
12 Create the sub menu items & use Tailwind CSS group functionality
13 Create the mobile menu icon
14 Animate mobile menu icon & create custom Tailwind CSS variant
15 Extend Tailwind CSS custom open variant & implement mobile menu functionality
16 Implement mobile sub menu with custom peer open Tailwind CSS variant
V4 – Build the hero section
17 Create the Hero section and background image
18 Add the hero content
19 Create the waveform logo animation in Tailwind CSS
20 Create custom animation delay Tailwind CSS utility class
V4 – Build the headliners and carousel section
21 Default base styles in Tailwind CSS for headings
22 Create a scrollable & snappable carousel in Tailwind CSS
23 Add left and right arrows to the carousel
V4 – Light and dark mode
24 Implement light & dark mode based on local machine settings in Tailwind CSS
25 Implement Tailwind CSS light & dark mode with toggle button
V4 – Build the tickets & lineup timeline sections
26 Create the tickets table
27 Start the lineup timeline (with advanced background gradients in Tailwind CSS)
28 Finish the lineup timeline
V4 – Extras
29 Size utility class name for equal height and width in Tailwind
30 Gradient text colors in Tailwind CSS
31 Advanced custom Tailwind CSS utility class names
32 Advanced layouts with container in Tailwind CSS
33 Upload code to github and deploy to vercel
34 BONUS!
Resolve the captcha to access the links!
