Tailwind CSS From Scratch - Learn by Building Projects

Tailwind CSS From Scratch - Learn by Building Projects

Instructor: Packt - Course Instructors

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.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

5 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

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

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

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.