Mô tả

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 incredibly 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.

Bạn sẽ học được gì

Yêu cầu

Nội dung khoá học

7 sections

Introduction

5 lectures
Important! Read this before you begin this course
00:47
Introduction
02:20
Editor setup
02:35
Udemy ratings & reviews
00:38
Project setup & tailwind css overview
16:43

Building the navbar

9 lectures
Create the navbar and logo (with spacing, flexbox, and gradients)
12:29
Apply Google Fonts to tailwind project
04:44
Create the first menu item, add classes on hover, & add transitions
07:13
Finish the menu items, editing techniques, & tailwind css components
10:03
Create the sub menu items & use tailwind css group functionality
06:17
Create the mobile menu icon
05:53
Animate mobile menu icon & create custom variant plugin with "addVariant"
10:13
Extend tailwind css custom open variant & implement mobile menu functionality
13:27
Implement mobile sub menu with custom group open tailwind variant
08:44

Building the Hero section

4 lectures
Create the Hero section and background image
07:49
Add the hero content
08:23
Create the waveform logo animation
10:41
Create custom animation delay tailwind css plugin with "matchUtilities"
07:00

Building the headliners section & carousel

3 lectures
Default base styles for headings
04:27
Create a scrollable & snappable carousel in tailwind css
07:09
Adding left and right arrows to the carousel
08:54

Light and dark mode

2 lectures
Implement light and dark mode based on user's local machine settings
03:04
Implement tailwind css light & dark mode with toggle button
06:53

Building the tickets & lineup timeline sections

4 lectures
Create the tickets table & custom tailwind plugin with "addUtilities"
06:30
Start the lineup timeline (with advanced background gradients in tailwind)
06:23
Finish the lineup timeline
07:23
Advanced tailwind css plugins & creating dynamic button component plugin
15:46

Deploy

2 lectures
Upload code to github and deploy to vercel
06:26
BONUS!
00:51

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.