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.
Beginner Tailwind
9h 33m 19s
English
Paid
About the Author: Chris Sev
About Chris Sev
Chris Sev founded scotch.io, a well-known site for web development tutorials. The site reached over 3 million readers each month and earned about $30,000 per month.
DigitalOcean acquired scotch.io in 2019. After the sale, Chris shifted his focus to teaching people how to code so they can build and sell their own projects.
He is also a Google Developer Expert in Web Technologies. He works to keep coding clear, simple, and practical for developers at all levels.
Watch Online 77 lessons
0:00
/ #1: Intro
All Course Lessons (77)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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