Tailwind CSS From Scratch | Learn By Building Projects (Udemy.com)
Build great looking layouts fast and efficiently using Tailwind CSS utility classes
Created by: Brad Traversy
Last updated July 2025
What you will 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
Course 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.
Instructor Details
- 4.6 Rating
5,360 Reviews
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 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.
More courses by Brad Traversy
Modern JavaScript From The Beginning 2.0 (Just Updated) (2025)
4.6 (36,520 Reviews)
Provider: Udemy
Time: 40.2h
$16.99
Modern HTML & CSS From The Beginning 2.0 (2025)
4.8 (28,669 Reviews)
Provider: Udemy
Time: 24.3h
$129.99
Bootstrap 4 From Scratch With 5 Projects (2018)
4.6 (17,122 Reviews)
Provider: Udemy
Time: 11.3h
$84.99
MERN Stack Front To Back: Full Stack React, Redux & Node.js (2019)
4.4 (15,750 Reviews)
Provider: Udemy
Time: 11.9h
$99.99
50 Projects In 50 Days - HTML, CSS & JavaScript (2025)
4.6 (12,876 Reviews)
Provider: Udemy
Time: 19.4h
$119.99
More Web Development courses
Python Fullstack Mastery: Build Modern Web Apps with Django (2025)
5.0 (165 Reviews)
Provider: Udemy
Time: 35h
$19.99
NgRx Signal store for Angular - The missing guide (2026)
4.9 (436 Reviews)
Provider: Udemy
Time: 11.3h
$89.99
Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) (2024)
4.9 (177 Reviews)
Provider: Udemy
Time: 7.6h
$79.99
Build a URL Shortener App with ASP.NET: Step by Step (2026)
4.9 (100 Reviews)
Provider: Udemy
Time: 9.6h
$10.99
The Complete Elixir and Phoenix Bootcamp (2021)
4.8 (7,773 Reviews)
Provider: Udemy
Time: 17.4h
$84.99
Reviews
By Ferenc Kovacs on 8/17/2026
Good, it helps me to understand how tailwind works, but it could have been so much better if you had used auto-save in VS Code and not manually saved after you typed in like 10 Tailwind CSS class names. We could have seen every change in real time, not like ok now let see- bumm, there is the new section with a lot of different stuff; have fun figuring out why does it look like this.
By Chloe Johnson on 7/8/2026
This course is very thorough and easy to learn from. However, as someone with an auditory processing disorder I wish subtitles were more accurate to what the instructor was saying. For example when he said CSS it appeared as “success” in the subtitles
By Nour Eldeen Mahmoud on 6/20/2026
This course was really amazing. My CSS skills were not very good before taking it, but it helped me understand CSS much better. The instructor explained every concept in Tailwind CSS clearly and covered all the important features. I also really liked the practical projects because they helped me apply what I learned and gain more confidence. Thank you for this great course!
By Karim on 6/7/2026
I rate this course 10/10. An outstanding effort with highly rich content that saves you from looking anywhere else. The instructor didn't hold back on any information, and the progression in practical application is excellent. Thank you for this professional contribution.
By Galang Merdika on 4/17/2026
Tailwind CSS From Scratch by Brad Traversy is a very good course for beginners. It is easy to follow, practical, and focused on real projects, making Tailwind CSS easier to understand. Brad explains the material clearly, and the course is great for building a strong foundation.
By Ribhav Kaher on 12/17/2025
This is a very good course to learn Tailwind CSS. Brad does a very good job of explaining how to use the different utility classes that are available and the projects offer plenty of opportunity to practice building websites with Tailwind CSS. The course is based on Tailwind CSS 3. Nevertheless, the course is an excellent resource for learning the basics of Tailwind CSS.
By Carlos Ramos on 11/14/2025
This is a very good Tailwind course overall. I didn’t give it a full 5 stars for two reasons. First, the course uses Tailwind version 3.x, which is not the latest version, since Tailwind is currently in 4.x. Second, I think the course would benefit from a high-level roadmap explaining the design decisions behind the code. Sometimes it’s easy to get lost and not understand why an extra div is needed or how certain structural choices are made. I also would have liked to see the plain HTML first, and then see how adding Tailwind classes changes it step by step. That said, if you already understand CSS and want to learn Tailwind, this is a solid and valuable course.
By Sanya Kotwani on 11/5/2025
Excellent course again ( followed your boostrap course as well ) . The Best part about the course is that it is based on 5 projects so all the classes are fitted into brain & helped building portfolio . Thanks Brad for the amazing course — I really appreciate your hard work :)
By Henrique Queiroz Reuter on 10/31/2025
One of the best courses that i have made, the projects are cool and weel designed, the only downside is the fact if that it is used Tailwind v3, that is radically different from v4.That fortunately can be overcome with the use of https://twshift.com/
By Andreas Bentele on 10/22/2025
Perfect course for me. It would be better to have some experience with the basics of CSS before starting this course. However, you should be able to follow the instructions even without much CSS experience. Unfortunately this course is about Tailwind 3 and not the current Tailwind 4 and some of the discussed concepts work really different in Tailwind 4. At least for me, it's no option to learn Tailwind 3, so I have to study the documentation of Tailwind as well if I want to learn Tailwind 4. Please provide an update! Even if you don't plan on using Tailwind CSS, it's worth knowing the basic concepts if you use CSS in your daily work. Since I am not a native English speaker, I would like to mention that the teacher is very easy to understand.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100












