ChrisOnCode - Beginner Tailwind

Beginner Tailwind
Tailwind is an amazing CSS framework that changes the way we think about CSS frameworks.

Learn why Tailwind is amazing and how it speeds up designs and makes them look amazing.


What We'll Build
To see what we'll learn and build, visit the full site. We're going to design this whole site without any custom CSS.

What you'll Build

What's included?
75 videos

Contents

Getting Started

• Intro 2 mins
• How I Design 11 mins
• CodePen Tailwind Template 5 mins
• CodePen Tips and Tricks 9 mins
• Tailwind Docs and Workflow 5 mins
• Tailwind Introduction 9 mins
• Resources 4 mins

Main Concepts

• Overview & What We'll Build 5 mins
• Spacing w/ Margin and Padding 8 mins
• Box Properties 9 mins
• Sizing and Numbering System 6 mins
• Typography 10 mins
• Colors 8 mins
• Pseudo Classes 4 mins
• Transitions & Transforms 8 mins
• Animations 3 mins
• Restyling All the Things 9 mins
• Gradients 6 mins

Layout Concepts

• Layout and Positioning 8 mins
• Responsive Classes 10 mins
• Flexbox 13 mins
• Grid 12 mins

Creating Components: Cards

• Basic Card 11 mins
• Card w/ an Image 13 mins
• Horizontal & Responsive Card 12 mins

Creating Components: Buttons

• Basic Buttons 13 mins
• Outlined and Shadowed Buttons 7 mins
• Grouped and w/ an Icon Buttons 13 mins

Creating Components: Forms

• Basic Form 13 mins
• Minimal Form 12 mins
• Pure Color Form 12 mins

Building a Course Site

• What We'll Build 3 mins
• Setting Up Our Build System 18 mins
• Purging Unused Classes 4 mins
• Deploying to Netlify 9 mins
• Tailwind in VS Code 7 mins
• Setting Up HTML 5 mins

Header/Navigation Section

• Header Layout 7 mins
• Header Styling 8 mins
• Header Responsive 4 mins

Hero Section

• Hero Layout 8 mins
• Hero Styling 14 mins
• Hero Fun Elements 12 mins
• Hero Responsive 5 mins

Overview Section

• Overview Layout 7 mins
• Overview Styling 12 mins
• Overview Fun Elements 6 mins
• Overview Responsive 4 mins

About Me Section

• About Layout 8 mins
• About Styling 7 mins
• About Responsive 3 mins

What You'll Learn Section

• What You'll Learn Layout 10 mins
• What You'll Learn Styling 5 mins
• What You'll Learn Fun Elements 11 mins
• What You'll Learn Responsive 4 mins

What You'll Build Section

• Layout + Styling + Responsive 11 mins

Pricing Section

• Pricing Layout 9 mins
• Pricing Styling 11 mins
• Pricing Fun 9 mins
• Pricing Responsive 7 mins

FAQ Section

• Layout + Styling + Responsive 6 mins

Footer & Newsletter Section

• Footer Layout 10 mins
• Footer Styling 11 mins
• Footer Fun 6 mins
• Footer Responsive 5 mins

Fixes

• Fixing Containers 4 mins
• Adding Links 3 mins

Going Beyond

• Customizing Tailwind 14 mins
• Extracting Tailwind Styles 7 mins
• Tailwind and Vue 13 mins
• Tailwind Typography 7 mins
• Tailwind Tools 5 mins

Video List Section

• Videos Layout + Styling + Responsive 15 mins

Conclusion

• Recap 2 mins
• Outro 2 mins