Tailwind CSS From Scratch - Learn by Building Projects

Video description

Learn to build five mini projects and six website projects and become an expert by taking up the course.

About This Video

Learn the Tailwind utility classes using a code sandbox
Learn how to set up a dev environment using the Tailwind CLI
Learn to build five mini-projects and six website projects

In Detail

We will start with coding Sandbox and explore pages/videos for colors, typography, spacing, flex classes, and much more. …

Tailwind CSS From Scratch - Learn by Building Projects

Video description

Learn to build five mini projects and six website projects and become an expert by taking up the course.

About This Video

Learn the Tailwind utility classes using a code sandbox
Learn how to set up a dev environment using the Tailwind CLI
Learn to build five mini-projects and six website projects

In Detail

We will start with coding Sandbox and explore pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to touch on all parts of Tailwind in a specific order, rather than just jumping right into projects. We will take what we learn in the Sandbox environment and use it to create some small projects.

Next, we will start to work on larger landing-page websites. There will be six different websites. They are all very modern and clean looking. We partnered with Frontend Mentor for the designs. Some projects will have a bit of JavaScript for things such as hamburger menus, tabs, and some validation. Let us look at the projects:

-Clipboard Website: Simple software product landing page focusing on Flexbox and alignment.

-Loopstudios: VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects.

-Shortly: Responsive menu and a little JavaScript for some form validation and working with the DOM.

-Testimonial Grid: A project where we focus on using Tailwind’s grid classes.

-Fylo: Product page with a light/dark mode feature. We will add some JavaScript to save the color mode to local storage. We will also have a dynamic tab component for the FAQ.

Bookmark: Bookmark manager extension landing page. This website will have some dynamic background images, a hamburger menu, and some tabs that will use JavaScript.

By the end of this course, you will efficiently use Tailwind CSS utility classes.

Audience

This course has been designed for anyone that wants to get better at creating websites and UI layouts. A basic understanding of CSS grids, layouts, and JavaScript will be an advantage.

Publisher resources

Download Example Code

Chapter 1 : Introduction

Introduction

Course Outline and Projects

What Is Tailwind CSS

Basic Environment Setup

Tailwind Sandbox Setup

Chapter 2 : Tailwind Fundamentals - Part 1

Utility-First Example

Working with Colors

Container and Spacing

Typography

Width and Height

Layout and Position

Backgrounds and Shadows

Borders and Border Radius

Filters

Chapter 3 : Tailwind Fundamentals - Part 2

Interactivity

Breakpoint Classes and Media Queries

Columns

Flexbox

Grid

Transition and Transform

Animation Classes and Keyframes

Config and Customization

Dark Mode

Chapter 4 : Better Development Environment

Create an Environment with Tailwind CLI

Directives and Functions

Webpack and PostCSS Environment

Chapter 5 : Tailwind CSS Mini Projects

Mini Projects Introduction

Mini-Project 1 - Email Subscribe Card

Mini-Project 2 - Pricing Grids

Mini-Project 3 - Product Modal

Mini-Project 4 - Image Gallery

Mini-Project 5 - Login Modal

Chapter 6 : Project 1 - Clipboard Website

Project Introduction

Setup and Config

Hero Section and Background Image

4 - Snippets Section and Using Directives

Features Section and Items

Supercharge Section

References and Footer

Deploy to Netlify

Chapter 7 : Project 2 - Loopstudios Website

Project Introduction

Setup and Config

Hero with Desktop Navigation

Feature Section

Creations Section with Gradient Overlays

Footer

Hamburger Button and Animation

Mobile Menu and JavaScript

Deploy to Vercel

Chapter 8 : Project 3 - Shortly Website

Project Introduction

Setup and Config

Navbar

Hero Section

Shorten Form and Links

JavaScript Link Validation

Feature Boxes

CTA and Footer

Mobile Menu

Chapter 9 : Project 4 - Testimonial Grid Project

Project Introduction

Setup and Config

First Box

Remaining Boxes

Add Grid Classes

Line Clamp Plugin

Chapter 10 : Project 5 - Fylo Website with Color Picker

Project Introduction

Setup and Config

Header and Dark Mode Button

JavaScript for Color Mode

Hero Section

Features and Productive Sections

Testimonials and Early Access

Smooth Scroll and Footer

Chapter 11 : Project 6 - Bookmark Manager Website

Project Introduction

Setup and Config

Navbar

Hero Section

Tabs and Panel Layout

JavaScript for Tabs

Download Boxes

FAQ Accordion

Newsletter and Footer

Mobile Menu

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.