We may earn an affiliate commission when you visit our partners.
Brad Traversy
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...
Read more
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...
Read more
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.
Register for this course and see more details by visiting:
OpenCourser.com/course/4v23sw/tailwind
Nine deals to help you save
We found nine deals and offers that may be relevant to this course.
Save money when you learn.
All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout.
Valid until October 29
24-Hour Flash Sale
Save on all online courses in your cart and take advantage of big savings.
FLASH SALE
24T6MT102824
Use code at checkout.
Only 23 hours left!
24-Hour Flash Sale
Save on all online courses in your cart and take advantage of big savings.
FLASH SALE
ST15MT100124A
Ended October 8
24-Hour Flash Sale
Take advantage of big savings on online courses.
Up to
80%
off
Ended September 28
24-Hour Flash Sale! Save up to 85% on Udemy online courses.
For 24 hours, save big on courses from Udemy's extensive catalog.
Up to
85%
off
Ended September 25
Save on courses
Gain the skills you need to reach your next career milestone.
Up to
85%
off
Use code at checkout.
Ended October 12
Explore new possibilities
Start exploring new possibilities for your future with courses on sale.
Up to
85%
off
ST14MT101024
Ended October 1
Personal Plan sale
Gain unlimited access to thousands of courses. For a limited time, save when you start an annual subscription.
From
40%
off
Valid until November 1
New customer offer
New customers, complete your first order and save big.
Up to
80%
off
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off
What's inside
Learning objectives
- 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
- 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
Syllabus
Introduction
Course Outline & Projects
Project Links
What Is Tailwind CSS?
Read more
Syllabus
Introduction
Course Outline & Projects
Project Links
What Is Tailwind CSS?
Read more
Basic Environment Setup
Tailwind Sandbox Setup
Tailwind Fundamentals - Part 1
Utility-First Example
Working With Colors
Container & Spacing
Typography
Width & Height
Layout & Position
Backgrounds & Shadows
Borders & Border Radius
Filters
Tailwind Fundamentals - Part 2
Interactivity
Breakpoint Classes & Media Queries
Columns
Flexbox
Grid
Transition & Transform
Animation Classes & Keyframes
Config & Customization
Dark Mode
A Better Development Environment
Create An Environment With Tailwind CLI
Directives & Functions
Optional - Webpack & PostCSS Environment
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
Project 1 - Clipboard Website
Project Intro
Setup & Config
Hero Section & Background Image
4 - Snippets Section & Using Directives
Features Section & Items
Supercharge Section
References & Footer
Deploy To Netlify
Project 2 - Loopstudios Website
Hero With Desktop Navigation
Feature Section
Creations Section With Gradient Overlays
Footer
Hamburger Button & Animation
Mobile Menu & JavaScript
Deploy To Vercel
Project 3 - Shortly Website
Navbar
Hero Section
Shorten Form & Links
JavaScript Link Validation
Feature Boxes
CTA & Footer
Mobile Menu
Project 4 - Testimonial Grid Project
FIrst Box
Remaining Boxes
Add Grid Classes
Line Clamp Plugin
Project 5 - Fylo Website With Color Picker
Header & Dark Mode Button
JavaScript For Color Mode
Features & Productive Sections
Testimonials & Early Access
Smooth Scroll & Footer
Project 6 - Bookmark Manager Website
Tabs & Panel Layout
JavaScript For Tabs
Download Boxes
FAQ Accordion
Newsletter & Footer
Good to know
Good to know
Know what's good ,
what to watch for , and
possible dealbreakers
Offers a strong balance between foundational theory and practical application
Incorporates projects into the coursework to reinforce learning
Provides a comprehensive overview of Tailwind CSS, including fundamentals and advanced techniques
Leverages industry-standard tools and frameworks
Instructor has a proven track record in web development
Course is designed for intermediate learners with some prior CSS experience
Save this course
Save Tailwind CSS From Scratch | Learn By Building Projects to your list so you can find it easily later:
Save
Save
Activities
Be better prepared
before
your course. Deepen your understanding
during
and
after
it. Supplement your coursework and achieve mastery of the topics covered
in Tailwind CSS From Scratch | Learn By Building Projects with these
activities:
Review flexbox concepts
Show steps
Brush up on flexbox principles to enhance your understanding of layout techniques in Tailwind CSS.
Browse courses on
Flexbox
Show steps
-
Revisit basic flexbox properties (justify-content, align-items)
-
Explore flexbox layout options (row, column, wrap)
Connect with experienced Tailwind CSS developers
Show steps
Seek guidance from experienced Tailwind CSS developers to gain insights, advice, and support throughout your learning journey.
Show steps
-
Identify potential mentors through online platforms and communities
-
Reach out and introduce yourself
-
Establish a mentorship relationship and schedule regular meetings
Solve Tailwind CSS challenges
Show steps
Challenge yourself by solving Tailwind CSS exercises to improve your proficiency in using utility classes and understanding their impact on layout.
Show steps
-
Locate online resources or platforms with Tailwind CSS challenges
-
Attempt to solve the challenges independently
-
Review solutions or consult with peers to learn from mistakes
Five other activities
Expand to see all activities and additional details
Show all eight activities
Complete Tailwind UI tutorial
Show steps
Follow a guided tutorial to build a UI project using Tailwind UI components, solidifying your understanding of Tailwind's practical implementation.
Show steps
-
Locate the Tailwind UI tutorial
-
Walk through the tutorial steps
-
Build the UI project using Tailwind UI components
Participate in a Tailwind CSS code review session
Show steps
Engage with peers in reviewing Tailwind CSS code, providing and receiving feedback to enhance your understanding of best practices and common pitfalls.
Show steps
-
Find a peer group or online community focused on Tailwind CSS
-
Share your Tailwind CSS code for review and feedback
-
Provide constructive feedback to other participants
Contribute to the Tailwind CSS community
Show steps
Deepen your understanding of Tailwind CSS by contributing to open-source projects, reporting issues, and providing solutions to enhance the framework's functionality.
Show steps
-
Identify areas within the Tailwind CSS community where you can contribute
-
Research and understand the project guidelines and contribution process
-
Create or address issues, suggest improvements, or contribute code
Design and build a personal portfolio website
Show steps
Create a portfolio website using Tailwind CSS to showcase your skills and projects, demonstrating your proficiency in applying Tailwind's utility classes.
Show steps
-
Plan the structure and design of your portfolio website
-
Implement the layout using Tailwind CSS utility classes
-
Populate the website with your projects and relevant content
Write a blog post on Tailwind CSS best practices
Show steps
Share your knowledge by writing a blog post about Tailwind CSS best practices to reinforce your understanding and contribute to the community's resources.
Show steps
-
Research and gather information on Tailwind CSS best practices
-
Organize your thoughts and outline the blog post
-
Write and edit the blog post
-
Publish and promote your blog post
Review flexbox concepts
Show steps
Brush up on flexbox principles to enhance your understanding of layout techniques in Tailwind CSS.
Browse courses on
Flexbox
Show steps
Show steps
Show steps
- Revisit basic flexbox properties (justify-content, align-items)
- Explore flexbox layout options (row, column, wrap)
Connect with experienced Tailwind CSS developers
Show steps
Seek guidance from experienced Tailwind CSS developers to gain insights, advice, and support throughout your learning journey.
Show steps
Show steps
Show steps
- Identify potential mentors through online platforms and communities
- Reach out and introduce yourself
- Establish a mentorship relationship and schedule regular meetings
Solve Tailwind CSS challenges
Show steps
Challenge yourself by solving Tailwind CSS exercises to improve your proficiency in using utility classes and understanding their impact on layout.
Show steps
Show steps
Show steps
- Locate online resources or platforms with Tailwind CSS challenges
- Attempt to solve the challenges independently
- Review solutions or consult with peers to learn from mistakes
Five other activities
Expand to see all activities and additional details
Show all eight activities
Complete Tailwind UI tutorial
Show steps
Follow a guided tutorial to build a UI project using Tailwind UI components, solidifying your understanding of Tailwind's practical implementation.
Show steps
Show steps
Show steps
- Locate the Tailwind UI tutorial
- Walk through the tutorial steps
- Build the UI project using Tailwind UI components
Participate in a Tailwind CSS code review session
Show steps
Engage with peers in reviewing Tailwind CSS code, providing and receiving feedback to enhance your understanding of best practices and common pitfalls.
Show steps
Show steps
Show steps
- Find a peer group or online community focused on Tailwind CSS
- Share your Tailwind CSS code for review and feedback
- Provide constructive feedback to other participants
Contribute to the Tailwind CSS community
Show steps
Deepen your understanding of Tailwind CSS by contributing to open-source projects, reporting issues, and providing solutions to enhance the framework's functionality.
Show steps
Show steps
Show steps
- Identify areas within the Tailwind CSS community where you can contribute
- Research and understand the project guidelines and contribution process
- Create or address issues, suggest improvements, or contribute code
Design and build a personal portfolio website
Show steps
Create a portfolio website using Tailwind CSS to showcase your skills and projects, demonstrating your proficiency in applying Tailwind's utility classes.
Show steps
Show steps
Show steps
- Plan the structure and design of your portfolio website
- Implement the layout using Tailwind CSS utility classes
- Populate the website with your projects and relevant content
Write a blog post on Tailwind CSS best practices
Show steps
Share your knowledge by writing a blog post about Tailwind CSS best practices to reinforce your understanding and contribute to the community's resources.
Show steps
Show steps
Show steps
- Research and gather information on Tailwind CSS best practices
- Organize your thoughts and outline the blog post
- Write and edit the blog post
- Publish and promote your blog post
Career center
Learners who complete Tailwind CSS From Scratch | Learn By Building Projects will develop knowledge and skills
that may be useful to these careers:
Front-End Developer
Front-End Developer
Front-end developers translate designs and user stories into code that renders an interface displayed on the client side. This course will teach you the basic syntax of CSS and HTML, along with APIs and Javascript. This course is a great starting point if you are seeking to become a front-end developer.
Web Developer
Web Developer
Web developers take a broader approach and handle both the front-end and back-end development of websites and applications. This course can help you get started with CSS and HTML, which are essential for front-end development.
Software Engineer
Software Engineer
Software engineers research, design, develop, test, and deploy software systems. If you wish to become a software engineer, this course can help you learn HTML, CSS, JavaScript, and other web development fundamentals.
Web Designer
Web Designer
Web designers create the look and feel of a website. This course will provide you with a good foundation for building your web design skills, especially if you have no prior knowledge.
Graphic designer
Graphic designer
Graphic designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course focuses on color theory, typography, and other design concepts used by graphic designers.
UI/UX Designer
UI/UX Designer
UI/UX designers focus on the user experience (UX) and user interface (UI) of a website or application. This course can provide you with a good foundation in layout and design, which are essential for UI/UX designers.
Art Director
Art Director
Art directors oversee the visual style and concepts of a variety of media, including websites and applications. This course can provide you with a good foundation in design principles, which are essential for art directors.
Product Designer
Product Designer
Product designers research, design, and develop products. This course can provide you with a good foundation in layout and design, which are important for product designers.
Creative Director
Creative Director
Creative directors oversee the creative vision of a variety of media, including websites and applications. This course can provide you with a good foundation in design principles, which are essential for creative directors.
Content Developer
Content Developer
Content developers create and develop content for websites, online courses, and other digital media. This course may be helpful if you want to learn how to create content for websites or other digital media.
Instructional Designer
Instructional Designer
Instructional designers create and develop educational programs and materials. This course may be helpful if you want to learn how to create online courses or other educational materials.
Technical Writer
Technical Writer
Technical writers create instruction manuals, articles, presentations, training materials, and other forms of documentation to help users understand technical products or services. This course may be helpful if you want to learn how to create documentation for software or websites.
E-Learning Developer
E-Learning Developer
E-learning developers create and develop online courses and other educational materials. This course may be helpful if you want to learn how to create online courses or other educational materials.
Social Media Manager
Social Media Manager
Social media managers create and manage social media content for businesses and organizations. This course may be helpful if you want to learn how to create social media content.
Marketing Manager
Marketing Manager
Marketing managers plan and execute marketing campaigns for businesses and organizations. This course may be helpful if you want to learn how to create marketing campaigns.
For more career information including salaries, visit:
OpenCourser.com/course/4v23sw/tailwind
Reading list
We've selected eight books
that we think will supplement your
learning. Use these to
develop background knowledge, enrich your coursework, and gain a
deeper understanding of the topics covered in
Tailwind CSS From Scratch | Learn By Building Projects.
This handbook serves as a practical reference for web developers, covering a wide range of topics, including HTML, CSS, JavaScript, and web performance. While not focused on Tailwind specifically, it provides essential knowledge and best practices for modern web development.
Save
Dives into the intricacies of CSS, revealing its hidden capabilities and advanced techniques. While not directly focused on Tailwind, it provides valuable knowledge for mastering CSS, which enhances the effectiveness of Tailwind usage.
Save
Presents the concept of atomic design, a methodology for creating consistent and reusable design systems. Understanding atomic design principles can be valuable for organizing and structuring Tailwind components.
Provides valuable insights into the principles and practices of designing and implementing scalable web applications. While not specific to Tailwind, it covers essential concepts like caching, load balancing, and data partitioning, which are relevant for building performant websites using Tailwind.
Save
Explores design systems from a developer's perspective, providing guidance on creating and maintaining scalable and consistent design systems. Understanding design systems can be beneficial for managing Tailwind-based projects and ensuring consistency across multiple applications.
Offers a comprehensive guide to responsive web design, covering the principles and techniques used to create websites that adapt gracefully to different screen sizes. Understanding responsive design is essential for building modern websites using Tailwind's mobile-first approach.
Save
Provides guidance on building robust web applications using Spring Boot, a popular Java framework. While not specifically related to Tailwind, it offers insights into server-side development, which is valuable for understanding how Tailwind interacts with the backend.
Save
Offers a comprehensive overview of Node.js, a popular JavaScript runtime environment. Understanding Node.js is beneficial for those interested in extending Tailwind's functionality or exploring server-side development using Tailwind.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/4v23sw/tailwind
Share
Similar courses
Here are nine courses similar to
Tailwind CSS From Scratch | Learn By Building Projects.
Tailwind CSS Fundamentals
OpenCourser.com/course/qlhhk0/tailwind
Tailwind CSS Fundamentals
Most relevant
Tailwind CSS : A Modern Way To Build Websites Using CSS
OpenCourser.com/course/yuktfq/tailwind
Tailwind CSS : A Modern Way To Build Websites Using CSS
Most relevant
An Introduction to Web Development
OpenCourser.com/course/pmls84/introduction
An Introduction to Web Development
Most relevant
Next.js From Scratch 2024
OpenCourser.com/course/s0601f/next
Next.js From Scratch 2024
Creative Advanced CSS & JavaScript Animations - 150 Projects
OpenCourser.com/course/i88t95/creative
Creative Advanced CSS & JavaScript Animations - 150...
Next.js Projects - 5 NextJS 14 projects (Instagram, Google.)
OpenCourser.com/course/uut7w2/next
Next.js Projects - 5 NextJS 14 projects (Instagram,...
Working with React and Go (Golang)
OpenCourser.com/course/spbgl1/working
Working with React and Go (Golang)
Interactivity with JavaScript
OpenCourser.com/course/hl7ne0/interactivity
Interactivity with JavaScript
Building Websites with HTML and CSS
OpenCourser.com/course/kpd6vz/building
Building Websites with HTML and CSS
Effort
12.5 total hours
Via
Udemy
Instructor
Brad Traversy
Language
English
Good to know
Offers a strong balance between foundational theory and practical application
Incorporates projects into the coursework to reinforce learning
Provides a comprehensive overview of Tailwind CSS, including fundamentals and advanced techniques
Leverages industry-standard tools and frameworks
Instructor has a proven track record in web development
Course is designed for intermediate learners with some prior CSS experience
Our mission
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
Affiliate disclosure
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
© 2016 - 2024 OpenCourser