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
Added to CourseFlix
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
- Language
- English
- Added to CourseFlix
- May 2024
- 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 |
Watch the other 76 lessons
One payment unlocks this course and every other premium course. No auto-renew.
See plansWhat courses are similar to Beginner Tailwind?
Updated 2y ago100 Days Of Code: The Complete Web Development Bootcamp 2024
By: Academind Pro (Maximilian Schwarzmüller)100 Days of Code: Complete Web Development Bootcamp 2024 by Colt Steele — updated curriculum with React, modern JS, REST APIs, and deployment.78h 51m
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 1mo agoAdvanced CSS for Web Design
By: Zero To MasteryMove beyond basic layouts with gradients, blend modes, clipping paths, and an intro to CSS Houdini for richer, more dynamic web pages.5h 9m
Updated 3y agoPage Transitions
By: SuperHiIntegrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.4h 10m
Updated 1mo agoMastering CSS Layout
By: Fullstack.ioBuild real CSS layout intuition across 26 lessons, learning to recreate any design with both CSS Grid and Flexbox.1h 27m2/5
Updated 1mo agoUnderstanding HTML and CSS
By: UdemyUnderstand how HTML and CSS actually work: semantic markup, browser rendering, the cascade, and advanced Flexbox and Grid techniques.17h 52m
Updated 2y agoAdvanced CSS & JavaScript Projects
By: Zero To MasteryMaster CSS and JavaScript by creating real projects! Enhance your skills by developing practical applications such as a quiz, an expense tracker.15h 24m5/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.