Beginner Tailwind by Chris on Code

Buy for 3 payments of $16

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.

Visit the Site We'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