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

CSS Demystified: Start writing CSS with confidence

CSS Demystified: Start writing CSS with confidence

Sources: kevin powell
CSS seems easy at first, but the deeper into it you get, the more complicated it becomes. Often we end up trying to fix problems by adding more and more code on top and hoping f...
20 hours 45 minutes 24 seconds
Modern HTML & CSS From The Beginning Course

Modern HTML & CSS From The Beginning Course

Sources: Brad Traversy
This course is suitable for beginners who want to learn HTML and CSS from scratch to an advanced level, as well as for developers who want to implement...
24 hours 21 minutes 52 seconds
The Responsive Web Design Bootcamp

The Responsive Web Design Bootcamp

Sources: kevin powell
It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing pag...
17 hours 36 minutes 12 seconds