Description

This is a fun project-based course to learn how to create awesome layouts using the Tailwind CSS framework and to get comfortable using utility classes over something like Bootstrap, which uses component-based classes. Experiment and learn all about certain aspects of Tailwind with the help of this course.

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. All resources and code files are placed here: https://github.com/PacktPublishing/Tailwind-CSS-From-Scratch---Learn-by-Building-Projects

What You Will Learn

Learn to create and edit layouts super-fast
Configure your styles to create custom layouts
Understand what Tailwind CSS is
Learn about the fundamentals of Tailwind fundamentals
Learn to create an environment with Tailwind CLI
Learn about breakpoint classes and media queries

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.

Approach

This is a complete hands-on course; you will follow along with the instructor as you review and work on different mini-projects and website projects.

Key Features

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

Github Repo

https://github.com/PacktPublishing/Tailwind-CSS-From-Scratch---Learn-by-Building-Projects

About the Author

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.

Course Outline

1. Introduction

This video introduces you to the course outcomes.

2. Course Outline and Projects

This video introduces you to the course outline and projects.

3. What Is Tailwind CSS

This video explains Tailwind CSS.

4. Basic Environment Setup

This video introduces you to the basic environment setup.

5. Tailwind Sandbox Setup

This video introduces you to Tailwind Sandbox setup.

2. Tailwind Fundamentals - Part 1

1. Utility-First Example

This video explains the Utility-First example.

2. Working with Colors

This video explains working with colors.

3. Container and Spacing

This video explains container and spacing.

4. Typography

This video explains typography.

5. Width and Height

This video explains width and height

6. Layout and Position

This video explains layout and position.

7. Backgrounds and Shadows

This video explains backgrounds and shadows.

8. Borders and Border Radius

This video explains borders and border radius.

9. Filters

This video explains filters.

3. Tailwind Fundamentals - Part 2

1. Interactivity

This video explains interactivity.

2. Breakpoint Classes and Media Queries

This video explains breakpoint classes and media queries.

3. Columns

This video explains columns.

4. Flexbox

This video explains Flexbox.

5. Grid

This video explains the Grid.

6. Transition and Transform

This video explains transition and transform.

7. Animation Classes and Keyframes

This video explains animation classes and keyframes.

8. Config and Customization

This video explains config and customization.

9. Dark Mode

This video explains dark mode.

4. Better Development Environment

1. Create an Environment with Tailwind CLI

This video explains how to create an environment with Tailwind CLI.

2. Directives and Functions

This video explains directives and functions.

3. Webpack and PostCSS Environment

This video explains optional - webpack and PostCSS environment.

5. Tailwind CSS Mini Projects

1. Mini Projects Introduction

This video introduces you to various mini projects on Tailwind.

2. Mini-Project 1 - Email Subscribe Card

This video explains mini-project 1 - email subscribe card.

3. Mini-Project 2 - Pricing Grids

This video explains mini-project 2 - pricing grids.

4. Mini-Project 3 - Product Modal

This video explains mini-project 3 - product modal.

5. Mini-Project 4 - Image Gallery

This video explains mini-project 4 - image gallery.

6. Mini-Project 5 - Login Modal

This video explains mini-project 5 - login modal.

6. Project 1 - Clipboard Website

1. Project Introduction

This video explains the project's introduction.

2. Setup and Config

This video explains the setup and configuration of the project.

3. Hero Section and Background Image

This video explains the hero section and background image.

4. 4 - Snippets Section and Using Directives

This video explains the snippets section and how to use directives.

5. Features Section and Items

This video explains features section and items.

6. Supercharge Section

This video explains the Supercharge section.

7. References and Footer

This video demonstrates references and footer.

8. Deploy to Netlify

This video explains how to deploy the project to Netlify.

7. Project 2 - Loopstudios Website

1. Project Introduction

This video introduces you to the project.

2. Setup and Config

This video explains the setup and config of the project.

3. Hero with Desktop Navigation

This video explains Hero with desktop navigation.

4. Feature Section

This video explains the feature section of the project.

5. Creations Section with Gradient Overlays

This video explains the creations section with gradient overlays.

6. Footer

This video explains the footer.

7. Hamburger Button and Animation

This video explains hamburger button and animation.

8. Mobile Menu and JavaScript

This video explains mobile menu and JavaScript.

9. Deploy to Vercel

This video explains how to deploy your project to Vercel.

8. Project 3 - Shortly Website

1. Project Introduction

This video provides an introduction.

2. Setup and Config

This video explains the setup and config of the project.

3. Navbar

This video explains Navbar.

4. Hero Section

This video explains the Hero section.

5. Shorten Form and Links

This video explains shorten form and links.

6. JavaScript Link Validation

This video explains JavaScript link validation.

7. Feature Boxes

This video explains features boxes.

8. CTA and Footer

This video explains CTA and Footer.

9. Mobile Menu

This video explains mobile menu.

9. Project 4 - Testimonial Grid Project

1. Project Introduction

This video introduces the project.

2. Setup and Config

This video explains the setup and config of the project.

3. First Box

This video focuses on creating the first box.

4. Remaining Boxes

This video explains creating the remaining boxes.

5. Add Grid Classes

This video explains how to add grid classes.

6. Line Clamp Plugin

This video explains line clamp plugin.

10. Project 5 - Fylo Website with Color Picker

1. Project Introduction

This video provides an introduction to the project.

2. Setup and Config

This video explains the setup and configuration of the project.

3. Header and Dark Mode Button

This video focuses on header and dark mode button.

4. JavaScript for Color Mode

This video explains testing your course on SCORM cloud.

5. Hero Section

This video explains the Hero section.

6. Features and Productive Sections

This video explains features and productive sections.

7. Testimonials and Early Access

This video explains testimonials and early access.

8. Smooth Scroll and Footer

This video explains smooth scroll and footer.

11. Project 6 - Bookmark Manager Website

1. Project Introduction

This video provides an introduction.

2. Setup and Config

This video explains the setup and config of the project.

3. Navbar

This video explains Navbar.

4. Hero Section

This video explains the Hero section.

5. Tabs and Panel Layout

This video explains tabs and panel layout.

6. JavaScript for Tabs

This video explains JavaScript for tabs.

7. Download Boxes

This video explains download boxes.

8. FAQ Accordion

This video explains FAQ Accordion.

9. Newsletter and Footer

This video explains newsletter and footer.

10. Mobile Menu

This video introduces you to the mobile menu.

Course Images

Tailwind CSS From Scratch - Learn by Building Projects

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews