Tailwind CSS From Scratch | Learn By Building Projects

Focused View

Brad Traversy

12:32:49

14 View

01 - Introduction

001 Introduction.mp4

02:57

002 Course Outline & Projects.mp4

06:03

003 Project Links.html

004 What Is Tailwind CSS.mp4

07:04

005 Basic Environment Setup.mp4

06:18

006 Tailwind Sandbox Setup.mp4

03:52

006 tailwind-sandbox.zip

02 - Tailwind Fundamentals - Part 1

001 Utility-First Example.mp4

06:57

002 Working With Colors.mp4

09:39

003 Container & Spacing.mp4

09:49

004 Typography.mp4

08:44

005 Width & Height.mp4

06:39

006 Layout & Position.mp4

13:19

007 Backgrounds & Shadows.mp4

08:07

008 Borders & Border Radius.mp4

06:14

009 Filters.mp4

05:48

03 - Tailwind Fundamentals - Part 2

001 Interactivity.mp4

13:35

002 Breakpoint Classes & Media Queries.mp4

09:17

003 Columns.mp4

04:28

004 Flexbox.mp4

12:26

005 Grid.mp4

05:18

006 Transition & Transform.mp4

07:31

007 Animation Classes & Keyframes.mp4

05:09

008 Config & Customization.mp4

10:49

009 Dark Mode.mp4

10:34

04 - A Better Development Environment

001 Create An Environment With Tailwind CLI.mp4

10:03

001 simple-tailwind-starter.zip

002 Directives & Functions.mp4

09:51

003 Optional - Webpack & PostCSS Environment.mp4

15:30

003 webpack-tailwind-starter.zip

05 - Tailwind CSS Mini-Projects

001 Mini-Projects Introduction.mp4

03:36

001 mini-projects.zip

002 Mini-Project 1 - Email Subscribe Card.mp4

15:36

003 Mini-Project 2 - Pricing Grids.mp4

16:38

004 Mini-Project 3 - Product Modal.mp4

21:42

005 Mini-Project 4 - Image Gallery.mp4

19:34

006 Mini-Project 5 - Login Modal.mp4

21:42

06 - Project 1 - Clipboard Website

001 Project Intro.mp4

01:39

001 clipboard.zip

002 Setup & Config.mp4

06:02

003 Hero Section & Background Image.mp4

12:01

004 4 - Snippets Section & Using Directives.mp4

05:54

005 Features Section & Items.mp4

12:49

006 Supercharge Section.mp4

09:26

007 References & Footer.mp4

15:39

008 Deploy To Netlify.mp4

08:23

07 - Project 2 - Loopstudios Website

001 Project Intro.mp4

02:03

001 loopstudios.zip

002 Setup & Config.mp4

04:22

003 Hero With Desktop Navigation.mp4

12:14

004 Feature Section.mp4

05:55

005 Creations Section With Gradient Overlays.mp4

24:40

006 Footer.mp4

11:44

007 Hamburger Button & Animation.mp4

09:42

008 Mobile Menu & JavaScript.mp4

08:41

009 Deploy To Vercel.mp4

04:09

08 - Project 3 - Shortly Website

001 Project Intro.mp4

01:54

001 shortly.zip

002 Setup & Config.mp4

04:00

003 Navbar.mp4

06:55

004 Hero Section.mp4

06:36

005 Shorten Form & Links.mp4

11:05

006 JavaScript Link Validation.mp4

08:08

007 Feature Boxes.mp4

13:22

008 CTA & Footer.mp4

12:19

009 Mobile Menu.mp4

08:07

09 - Project 4 - Testimonial Grid Project

001 Project Intro.mp4

01:59

002 Setup & Config.mp4

03:37

003 FIrst Box.mp4

06:09

004 Remaining Boxes.mp4

06:59

005 Add Grid Classes.mp4

05:41

006 Line Clamp Plugin.mp4

03:42

index.html
input.zip
package.zip
package-lock.zip
readme.zip
tailwind.config.zip

style.zip

bg-pattern-quotation.zip
favicon-32x32.zip
image-daniel.zip
image-jeanette.zip
image-jonathan.zip
image-kira.zip
image-patrick.zip
testimonial-grid.zip

10 - Project 5 - Fylo Website With Color Picker

001 Project Intro.mp4

01:56

001 fylo.zip

002 Setup & Config.mp4

08:11

003 Header & Dark Mode Button.mp4

09:11

004 JavaScript For Color Mode.mp4

14:03

005 Hero Section.mp4

05:38

006 Features & Productive Sections.mp4

12:25

007 Testimonials & Early Access.mp4

13:05

008 Smooth Scroll & Footer.mp4

08:55

11 - Project 6 - Bookmark Manager Website

001 Project Intro.mp4

02:14

001 bookmark.zip

002 Setup & Config.mp4

03:29

003 Navbar.mp4

05:56

004 Hero Section.mp4

12:44

005 Tabs & Panel Layout.mp4

19:59

006 JavaScript For Tabs.mp4

13:27

007 Download Boxes.mp4

11:02

008 FAQ Accordion.mp4

11:37

009 Newsletter & Footer.mp4

11:49

010 Mobile Menu.mp4

16:23

Description

Build great looking layouts fast and efficiently using Tailwind CSS utility classes

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

Who is this for?

Anyone that wants to get better at creating website and UI layouts

What You Need to Know?

You should know the basics of CSS

More details

Description
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.

Who this course is for:
Anyone that wants to get better at creating website and UI layouts

User Reviews

Rating

average 0

Total votes0

Focused display

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 like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.