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.
Tailwind CSS From Scratch - Learn by Building Projects
Tailwind CSS From Scratch - Learn by Building Projects
Taught in English
Beginner level
Recommended experience
14 hours to complete
3 weeks at 4 hours a week
Flexible schedule
Learn at your own pace
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
Shareable certificate
Add to your LinkedIn profile
Recently updated!
September 2024
Assessments
5 assignments
See how employees at top companies are mastering in-demand skills
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV
Share it on social media and in your performance review
There are 11 modules in this course
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
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
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
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
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
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
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
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
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
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
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 videos2 assignments
Why people choose Coursera for their career
Felipe M.
Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
Jennifer J.
Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
Larry W.
Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
Chaitanya A.
"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."
New to Mobile and Web Development? Start here.
Open new doors with Coursera Plus
Unlimited access to 7,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription
Advance your career with an online degree
Earn a degree from world-class universities - 100% online
Join over 3,400 global companies that choose Coursera for Business
Upskill your employees to excel in the digital economy
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.