English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 83 lectures (12h 32m) | 5.61 GB
Build great looking layouts fast and efficiently using Tailwind CSS utility classes
This is a fun project-based course to learn how to create awesome layouts using the Tailwind CSS framework and get comfortable using utility classes over something like Bootstrap, which uses component-based classes. Let’s take a look at the outline for this course…
The Sandbox
I don’t want to jump right into the projects, though you certainly could if you want. So the first two sections, we will be working in a coding sandbox. In every new video in these sections, we will have a new file to experiment with and learn all about a certain aspect of Tailwind. For example, we will have pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to essential touch on all parts of Tailwind in a specific order, rather than just jumping right into projects.
Mini-Projects
Next, we will take what we learn in the sandbox environment and use it to create some small projects. These are things that will take 10 – 20 minutes to create and we will do it all in one video per project. The mini-projects include
- Email Subscribe Card
- Pricing Grids
- Product Modal
- Image Gallery
- Login Modal
I may even add more mini-projects later. These will help you get your feet wet by creating something.
Website Projects
Next, we will start to work on larger landing-page websites. This will really put what you learned to the test. There will be 6 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 like hamburger menus, tabs, and some validation. Let’s take a look at the projects.
Clipboard Website – Simple software product landing page. Focusing mostly on flexbox and alignment. Some background images, etc.
Loopstudios – VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects.
Shortly – Website for a link shortening tool. We will have a nice-looking responsive menu and add 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.
What you’ll learn
- Learn to create and edit layouts super fast
- Learn the Tailwind utility classes using a code sandbox
- Build 5 mini-projects and 6 website projects
- Learn how to set up a dev environment using the Tailwind CLI
- Configure your styles to create custom layouts
Table of Contents
Introduction
1 Introduction
2 Course Outline & Projects
3 Project Links
4 What Is Tailwind CSS
5 Basic Environment Setup
6 Tailwind Sandbox Setup
Tailwind Fundamentals – Part 1
7 Utility-First Example
8 Working With Colors
9 Container & Spacing
10 Typography
11 Width & Height
12 Layout & Position
13 Backgrounds & Shadows
14 Borders & Border Radius
15 Filters
Tailwind Fundamentals – Part 2
16 Interactivity
17 Breakpoint Classes & Media Queries
18 Columns
19 Flexbox
20 Grid
21 Transition & Transform
22 Animation Classes & Keyframes
23 Config & Customization
24 Dark Mode
A Better Development Environment
25 Create An Environment With Tailwind CLI
26 Directives & Functions
27 Optional – Webpack & PostCSS Environment
Tailwind CSS Mini-Projects
28 Mini-Projects Introduction
29 Mini-Project 1 – Email Subscribe Card
30 Mini-Project 2 – Pricing Grids
31 Mini-Project 3 – Product Modal
32 Mini-Project 4 – Image Gallery
33 Mini-Project 5 – Login Modal
Project 1 – Clipboard Website
34 Project Intro
35 Setup & Config
36 Hero Section & Background Image
37 Snippets Section & Using Directives
38 Features Section & Items
39 Supercharge Section
40 References & Footer
41 Deploy To Netlify
Project 2 – Loopstudios Website
42 Project Intro
43 Setup & Config
44 Hero With Desktop Navigation
45 Feature Section
46 Creations Section With Gradient Overlays
47 Footer
48 Hamburger Button & Animation
49 Mobile Menu & JavaScript
50 Deploy To Vercel
Project 3 – Shortly Website
51 Project Intro
52 Setup & Config
53 Navbar
54 Hero Section
55 Shorten Form & Links
56 JavaScript Link Validation
57 Feature Boxes
58 CTA & Footer
59 Mobile Menu
Project 4 – Testimonial Grid Project
60 Project Intro
61 Setup & Config
62 FIrst Box
63 Remaining Boxes
64 Add Grid Classes
65 Line Clamp Plugin
Project 5 – Fylo Website With Color Picker
66 Project Intro
67 Setup & Config
68 Header & Dark Mode Button
69 JavaScript For Color Mode
70 Hero Section
71 Features & Productive Sections
72 Testimonials & Early Access
73 Smooth Scroll & Footer
Project 6 – Bookmark Manager Website
74 Project Intro
75 Setup & Config
76 Navbar
77 Hero Section
78 Tabs & Panel Layout
79 JavaScript For Tabs
80 Download Boxes
81 FAQ Accordion
82 Newsletter & Footer
83 Mobile Menu
Resolve the captcha to access the links!