Tailwind CSS From Scratch - Learn by Building Projects
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Tailwind CSS From Scratch - Learn by Building Projects
Included with
Recommended experience
Recommended experience
What you'll learn
Create and design rapid layouts and custom styles using Tailwind CSS.
Understand and describe the fundamentals and environment setup with Tailwind CLI.
Apply breakpoint classes and media queries effectively.
Skills you'll gain
Details to know
See how employees at top companies are mastering in-demand skills
There are 11 modules in this course
Updated in May 2025.
This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This course starts with a coding Sandbox to explore colors, typography, spacing, flex classes, and more in Tailwind CSS, building a strong foundation before small projects. We then create six modern, clean landing-page websites, designed with Frontend Mentor: Clipboard Website (Flexbox and alignment), Loopstudios (responsive mobile menu and gradient overlays), Shortly (responsive menu and JavaScript form validation), Testimonial Grid (using Tailwind’s grid classes), Fylo (light/dark mode and dynamic FAQ tabs with JavaScript), and Bookmark (dynamic backgrounds, hamburger menu, and JavaScript tabs). By course end, you'll efficiently use Tailwind CSS utility classes, create and edit layouts quickly, configure custom styles, understand Tailwind fundamentals, set up an environment with Tailwind CLI, and use breakpoint classes and media queries. This course suits those aiming to improve website and UI layout skills, with basic CSS grid, layout, and JavaScript knowledge being advantageous.
In this module, we will introduce you to the course by discussing the outcomes and project details, explaining what Tailwind CSS is, and guiding you through the initial setup of your development environment.
What's included
5 videos1 reading
5 videos•Total 26 minutes
- Introduction•3 minutes
- Course Outline and Projects•6 minutes
- What Is Tailwind CSS•7 minutes
- Basic Environment Setup•6 minutes
- Tailwind Sandbox Setup•4 minutes
1 reading•Total 10 minutes
- Full Course Resources•10 minutes
In this module, we will delve into the foundational aspects of Tailwind CSS, focusing on utility-first design, color management, spacing, typography, layout, positioning, backgrounds, shadows, borders, and filters.
What's included
9 videos
9 videos•Total 75 minutes
- Utility-First Example•7 minutes
- Working with Colors•10 minutes
- Container and Spacing•10 minutes
- Typography•9 minutes
- Width and Height•7 minutes
- Layout and Position•13 minutes
- Backgrounds and Shadows•8 minutes
- Borders and Border Radius•6 minutes
- Filters•6 minutes
In this module, we will expand on Tailwind CSS fundamentals by exploring interactivity, responsive design with media queries, and advanced layout techniques using columns, Flexbox, and Grid. We will also cover transitions, animations, and customization options.
What's included
9 videos1 assignment
9 videos•Total 79 minutes
- Interactivity•14 minutes
- Breakpoint Classes and Media Queries•9 minutes
- Columns•4 minutes
- Flexbox•12 minutes
- Grid•5 minutes
- Transition and Transform•8 minutes
- Animation Classes and Keyframes•5 minutes
- Config and Customization•11 minutes
- Dark Mode•11 minutes
1 assignment•Total 15 minutes
- Tailwind Fundamentals - Part 2 - Assessment•15 minutes
In this module, we will improve your development environment by teaching you how to set up Tailwind CLI, use directives and functions, and configure optional tools like Webpack and PostCSS for a more efficient workflow.
What's included
3 videos
3 videos•Total 35 minutes
- Create an Environment with Tailwind CLI•10 minutes
- Directives and Functions•10 minutes
- Webpack and PostCSS Environment•16 minutes
In this module, we will engage in hands-on learning through mini projects, focusing on creating useful components and layouts with Tailwind CSS to solidify your understanding and skills.
What's included
6 videos
6 videos•Total 99 minutes
- Mini Projects Introduction•4 minutes
- Mini-Project 1 - Email Subscribe Card•16 minutes
- Mini-Project 2 - Pricing Grids•17 minutes
- Mini-Project 3 - Product Modal•22 minutes
- Mini-Project 4 - Image Gallery•20 minutes
- Mini-Project 5 - Login Modal•22 minutes
In this module, we will guide you through the creation of a Clipboard website, covering the setup and configuration, designing various sections, and deploying the project to Netlify for live hosting.
What's included
8 videos1 assignment
8 videos•Total 72 minutes
- Project Introduction•2 minutes
- Setup and Config•6 minutes
- Hero Section and Background Image•12 minutes
- 4 - Snippets Section and Using Directives•6 minutes
- Features Section and Items•13 minutes
- Supercharge Section•9 minutes
- References and Footer•16 minutes
- Deploy to Netlify•8 minutes
1 assignment•Total 15 minutes
- Project 1 - Clipboard Website - Assessment•15 minutes
In this module, we will build a Loopstudios website, focusing on setting up the project, designing the hero section, features, and creations, and ensuring responsiveness before deploying to Vercel.
What's included
9 videos
9 videos•Total 84 minutes
- Project Introduction•2 minutes
- Setup and Config•4 minutes
- Hero with Desktop Navigation•12 minutes
- Feature Section•6 minutes
- Creations Section with Gradient Overlays•25 minutes
- Footer•12 minutes
- Hamburger Button and Animation•10 minutes
- Mobile Menu and JavaScript•9 minutes
- Deploy to Vercel•4 minutes
In this module, we will develop the Shortly website, covering the setup, navbar, hero section, link shortening form, and JavaScript validation, ensuring a fully functional and responsive design.
What's included
9 videos
9 videos•Total 72 minutes
- Project Introduction•2 minutes
- Setup and Config•4 minutes
- Navbar•7 minutes
- Hero Section•7 minutes
- Shorten Form and Links•11 minutes
- JavaScript Link Validation•8 minutes
- Feature Boxes•13 minutes
- CTA and Footer•12 minutes
- Mobile Menu•8 minutes
In this module, we will create a testimonial grid project, focusing on the setup, designing individual testimonial boxes, applying grid classes, and utilizing the line clamp plugin for better text management.
What's included
6 videos1 assignment
6 videos•Total 28 minutes
- Project Introduction•2 minutes
- Setup and Config•4 minutes
- First Box•6 minutes
- Remaining Boxes•7 minutes
- Add Grid Classes•6 minutes
- Line Clamp Plugin•4 minutes
1 assignment•Total 15 minutes
- Project 4 - Testimonial Grid Project - Assessment•15 minutes
In this module, we will build the Fylo website, covering the setup, header design with dark mode, JavaScript for color modes, and creating the hero section, features, testimonials, and smooth scroll functionality.
What's included
8 videos
8 videos•Total 73 minutes
- Project Introduction•2 minutes
- Setup and Config•8 minutes
- Header and Dark Mode Button•9 minutes
- JavaScript for Color Mode•14 minutes
- Hero Section•6 minutes
- Features and Productive Sections•12 minutes
- Testimonials and Early Access•13 minutes
- Smooth Scroll and Footer•9 minutes
In this module, we will develop the Bookmark Manager website, focusing on the setup, navbar, hero section, tabs layout, JavaScript for interactive elements, and ensuring a responsive design.
What's included
10 videos3 assignments
10 videos•Total 109 minutes
- Project Introduction•2 minutes
- Setup and Config•3 minutes
- Navbar•6 minutes
- Hero Section•13 minutes
- Tabs and Panel Layout•20 minutes
- JavaScript for Tabs•13 minutes
- Download Boxes•11 minutes
- FAQ Accordion•12 minutes
- Newsletter and Footer•12 minutes
- Mobile Menu•16 minutes
3 assignments•Total 90 minutes
- Full Course Practice Assessment•15 minutes
- Project 6 - Bookmark Manager Website - Assessment•15 minutes
- Full Course Assessment•60 minutes
Instructor
Explore more from Mobile and Web Development
- Status: Free TrialS
Scrimba
Course
- Status: Free Trial
Course
- Status: Free Trial
Course
Why people choose Coursera for their career
Frequently asked questions
Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.
If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. You’ll be able to submit assignments once the session starts.
Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. You’ll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.
More questions
Financial aid available,