Tailwind CSS From Scratch - Learn by Building Projects

External: Coursera Courses ↗ · Coursera

Open Course on External: Coursera

Free to audit · Opens on External: Coursera

Tailwind CSS From Scratch - Learn by Building Projects

Coursera · Beginner ·🌐 Frontend Engineering ·3mo ago

Key Takeaways

Builds projects using Tailwind CSS, exploring colors, typography, spacing, and flex classes

Original Description

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.
Watch on External: Coursera ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related AI Lessons

Had my Frontend Developer interview with Capgemini (Application Developer) today, and I wanted to…
Prepare for a frontend developer interview with Capgemini by reviewing JavaScript fundamentals and practicing common interview questions
Medium · JavaScript
10 Frontend Developer Tools to Boost Productivity in 2026
Boost frontend productivity with 10 essential tools for modern web app development
Medium · Programming
10 Frontend Developer Tools to Boost Productivity in 2026
Boost frontend productivity with top 10 developer tools in 2026
Medium · JavaScript
The US Frontend Engineer Market in 2026: A Data-Driven Reality Check (and the Bias That Stops Us Seeing It)
US frontend engineer hiring demand peaked in 2022 and remains flat-depressed in 2026, contrary to common assumptions
Dev.to AI
Up next
The masks we wear | Zora Krstić | TEDxLuxembourgCity
TEDx Talks
Watch →