Beginner Tailwind

9h 33m 19s
English
Paid

Course description

Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework. If you want a CSS framework that has pre-built components, then Tailwind may not be for you. If you want a CSS framework that lets you design quickly and customize your site, then Tailwind is gonna be a lot of fun.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 77 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Intro

All Course Lessons (77)

#Lesson TitleDurationAccess
1
Intro Demo
01:26
2
Updated for Tailwind 2
00:54
3
How I Design
10:28
4
CodePen Tailwind Template
04:41
5
CodePen Tips and Tricks
08:46
6
Tailwind Docs and Workflow
04:26
7
Tailwind Introduction
08:51
8
Resources
03:21
9
Overview & What We'll Build
04:25
10
Spacing w/ Margin and Padding
07:09
11
Box Properties
08:25
12
Sizing and Numbering System
05:16
13
Typography
09:38
14
Colors
07:38
15
Pseudo Classes
03:49
16
Transitions & Transforms
07:24
17
Animations
02:11
18
Restyling All the Things
08:28
19
Gradients
05:56
20
Layout and Positioning
07:31
21
Responsive Classes
09:09
22
Flexbox
12:50
23
Grid
11:58
24
Basic Card
10:16
25
Card w/ an Image
12:05
26
Horizontal & Responsive Card
11:57
27
Basic Buttons
12:43
28
Outlined and Shadowed Buttons
06:51
29
Grouped and w/ an Icon Buttons
12:14
30
Basic Form
12:36
31
Minimal Form
11:43
32
Pure Color Form
11:16
33
What We'll Build
02:57
34
Setting Up Our Build System
11:30
35
Purging Unused Classes
04:48
36
Customizing Colors
04:44
37
Deploying to Netlify
08:10
38
Tailwind in VS Code
06:24
39
Setting Up HTML
04:59
40
Header Layout
06:17
41
Header Styling
07:05
42
Header Responsive
03:35
43
Hero Layout
07:32
44
Hero Styling
13:55
45
Hero Fun Elements
11:16
46
Hero Responsive
04:24
47
Overview Layout
06:23
48
Overview Styling
11:52
49
Overview Fun Elements
05:21
50
Overview Responsive
03:03
51
About Layout
07:06
52
About Styling
06:42
53
About Responsive
02:48
54
What You'll Learn Layout
09:25
55
What You'll Learn Styling
04:31
56
What You'll Learn Fun Elements
10:10
57
What You'll Learn Responsive
03:27
58
Layout + Styling + Responsive
10:47
59
Pricing Layout
08:52
60
Pricing Styling
10:31
61
Pricing Fun
08:54
62
Pricing Responsive
06:27
63
Layout + Styling + Responsive
05:46
64
Footer Layout
09:41
65
Footer Styling
10:31
66
Footer Fun
05:52
67
Footer Responsive
04:14
68
Fixing Containers
03:24
69
Adding Links
02:11
70
Customizing Tailwind
13:14
71
Extracting Tailwind Styles
06:41
72
Tailwind and Vue
12:52
73
Tailwind Typography
06:56
74
Tailwind Tools
04:35
75
Videos Layout + Styling + Responsive
14:02
76
Recap
01:57
77
Outro
01:07

Unlock unlimited learning

Get instant access to all 76 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Understanding HTML and CSS

Understanding HTML and CSS

Sources: udemy
Deeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS
17 hours 52 minutes 36 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds
Zero to Full Stack Hero

Zero to Full Stack Hero

Sources: papareact.com
PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
101 hours 29 minutes 59 seconds