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 2y agoCSS Layout Masterclass
By: Nomad CodersWhat will you make? 11 CSS Layout. We will clone 11 beautiful layout of movie, e-commerce and portfolio website..6h 49m -
Updated 2y agoCrash Course: Build a Full-Stack Web App in a Weekend!
By: UdemyDo 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?12h 13m -
FreeClassicThe CSS Bootcamp: Zero to Mastery
By: Zero To MasteryLearn CSS from basics to advanced techniques with 100+ exercises. Create beautiful, responsive websites and build your portfolio with real-world projects.40h 15m5/5 -
Updated 2y agoLearn CSS Today
By: Web Dev Simplified (Kyle Cook)Learn modern CSS features and advanced CSS concepts in less than a day with this highly focused project-based CSS course.9h 31m -
Updated 1y agoTailwind UI (Application UI + Marketing)
By: Adam WathanTailwind UI is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your Tailwind projects. Get started by check0/5 -
Updated 2y agoUnderstanding HTML and CSS
By: UdemyDeeply 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 CSS17h 52m -
Updated 2y agoPixel Perfect Figma to Tailwind
By: Pro Tailwind (Simon Vrachliotis), Simon VrachliotisThis workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development.2h 40m
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.