Tailwind CSS From Scratch - Learn by Building Projects

By: Brad Traversy

Write A Review

eText | 27 June 2022 | Edition Number 1

At a Glance

Format
PDF

eText

$221.09

or 4 interest-free payments of $55.27 with

Instant online reading in your Booktopia eTextbook Library *

Why choose an eTextbook?

Instant Access *

Purchase and read your book immediately

Read Aloud

Listen and follow along as Bookshelf reads to you

Study Tools

Built-in study tools like highlights and more

* eTextbooks are not downloadable to your eReader or an app and can be accessed via web browsers only. You must be connected to the internet and have no technical issues with your device or browser that could prevent the eTextbook from operating.

Learn to build five mini projects and six website projects and become an expert by taking up the course.

Key Features

Learn the Tailwind utility classes using a code sandbox
Learn how to set up a dev environment using the Tailwind CLI
Learn to build five mini-projects and six website projects

Book Description

We will start with coding Sandbox and explore pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to touch on all parts of Tailwind in a specific order, rather than just jumping right into projects. We will take what we learn in the Sandbox environment and use it to create some small projects.

Next, we will start to work on larger landing-page websites. There will be six 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 such as hamburger menus, tabs, and some validation. Let us look at the projects:

-Clipboard Website: Simple software product landing page focusing on Flexbox and alignment. -Loopstudios: VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects. -Shortly: Responsive menu and 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.

By the end of this course, you will efficiently use Tailwind CSS utility classes.

All resources and code files are placed here: https://github.com/PacktPublishing/Tailwind-CSS-From-Scratch---Learn-by-Building-Projects

What you will learn

Learn to create and edit layouts super-fast
Configure your styles to create custom layouts
Understand what Tailwind CSS is
Learn about the fundamentals of Tailwind fundamentals
Learn to create an environment with Tailwind CLI
Learn about breakpoint classes and media queries

Who this book is for

This course has been designed for anyone that wants to get better at creating websites and UI layouts. A basic understanding of CSS grids, layouts, and JavaScript will be an advantage.