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
Beginner Tailwind is a 77-lesson 9 hours 33 minutes self-paced course by Chris Sev. Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework.
Course facts
- Lessons
- 77
- Duration
- 9 hours 33 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Chris Sev
- Price
- Premium
Who teaches Beginner Tailwind? Chris Sev
Chris Sev is a US developer and educator focused on practical front-end tutorials — particularly Tailwind CSS and the project-based React work that builds working applications fast.
His CourseFlix listing carries two Chris Sev courses: Beginner Tailwind (one of the canonical introductory Tailwind CSS courses) and Make 20 React Apps (a project-based React curriculum built around shipping 20 small finished applications rather than working through abstract tutorials).
Material is paid and aimed at intermediate web developers picking up Tailwind or building React fluency through volume practice. For broader content, see CourseFlix's CSS and React.js category pages.
What lessons are included in Beginner Tailwind?
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 subscriptionWhat courses are similar to Beginner Tailwind?
-
Updated 3y agoCSS Demystified: Start writing CSS with confidence
By: Kevin PowellCSS 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 on20h 45m3/5 -
Updated 8mo agoFundamentals of CSS Flexbox
By: Zero To MasteryLearn to create flexible and adaptive layouts using Flexbox. Basics of alignment, managing margins, and implementing a real-world project for beginners.4h 7m -
FreeUpdated 2y agoThe Ultimate HTML5 & CSS3 Series: Part 3
By: Mosh Hamedani (Code with Mosh)Join The Ultimate HTML5 & CSS3 Series Part 3 for a comprehensive learning experience. Build professional-quality websites with modern HTML5 and CSS3 techniques.5h 38m5/5 -
Updated 2y agoWizard zines. Zine 14 pack
By: Julia EvansWizard zines is a little different from other tech publications. Here’s my approach: stick to fundamentals: wizard zines focuses on fundamentals: things. -
FreeUpdated 2y agoData Visualization + D3.js
By: SuperHiOur Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and worki16h 48m5/5 -
FreeUpdated 3y agoCSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
By: Udemy, Academind Pro (Maximilian Schwarzmüller)CSS - short for C ascading S tyle S heets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites.20h 54m5/5
More courses by Chris Sev
-
Updated 2y agoMake 20 React Apps
Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.12h 20m5/5
Frequently asked questions
What prior knowledge do I need before taking this course?
This course is designed for beginners, so no prior knowledge of Tailwind CSS is required. However, having a basic understanding of HTML and CSS will be beneficial as the course focuses on integrating Tailwind into web design. Familiarity with using a text editor like VS Code might enhance your learning experience.
What will I build during the course?
Throughout the course, students will work on designing various components and layouts, including cards, buttons, forms, as well as complete sections like headers, hero sections, and pricing tables. These exercises will help you understand how to use Tailwind's utility-first approach to build responsive and customizable designs.
Who is the ideal audience for this course?
This course is ideal for web developers and designers who want to enhance their skills in rapidly building and customizing web designs using Tailwind CSS. It is especially useful for those who prefer a utility-first approach to CSS rather than relying on pre-built components.
What specific tools or platforms does the course focus on?
The course focuses on Tailwind CSS and its integration into web projects. It includes lessons on using CodePen for prototyping, deploying projects to Netlify, and setting up Tailwind in Visual Studio Code. These tools help streamline the workflow and showcase Tailwind's capabilities in real-world scenarios.
What topics are not covered in this course?
The course does not cover pre-built component libraries, as Tailwind is designed for custom design and not for providing ready-made components. It also does not delve into advanced JavaScript frameworks or server-side programming, focusing exclusively on CSS styling and layout.
How much time should I expect to commit to this course?
The course consists of 77 lessons. While the total runtime is not specified, students should allocate sufficient time to watch the lessons and complete the hands-on exercises. Depending on your pace, this could vary, but dedicating a few hours each week could help you complete the course in a reasonable timeframe.
How can the skills learned in this course be applied to other areas or courses?
The skills learned in this course, such as responsive design and customizing layouts with Tailwind's utility classes, can be applied to various web development projects. Understanding Tailwind CSS can also complement other frontend frameworks or courses that involve building user interfaces, enhancing your ability to create customized and efficient designs.