Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Tailwind CSS From Scratch - Learn by Building Projects
Tailwind CSS From Scratch - Learn by Building Projects

Tailwind CSS From Scratch - Learn by Building Projects: Build great-looking layouts fast and efficiently using Tailwind CSS utility classes

Arrow left icon
Profile Icon Brad Traversy
Arrow right icon
€82.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (3 Ratings)
Video Jun 2022 12hrs 33mins 1st Edition
Video
€82.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Brad Traversy
Arrow right icon
€82.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (3 Ratings)
Video Jun 2022 12hrs 33mins 1st Edition
Video
€82.99
Subscription
Free Trial
Renews at €18.99p/m
Video
€82.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Key benefits

  • 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

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

Who is this book 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.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jun 27, 2022
Length: 12hrs 33mins
Edition : 1st
Language : English
ISBN-13 : 9781804611630
Languages :
Tools :

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : Jun 27, 2022
Length: 12hrs 33mins
Edition : 1st
Language : English
ISBN-13 : 9781804611630
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 154.97
Tailwind CSS From Scratch - Learn by Building Projects
€82.99
React and React Native
€37.99
Responsive Web Design with HTML5 and CSS
€33.99
Total 154.97 Stars icon

Table of Contents

11 Chapters
Introduction Chevron down icon Chevron up icon
Tailwind Fundamentals - Part 1 Chevron down icon Chevron up icon
Tailwind Fundamentals - Part 2 Chevron down icon Chevron up icon
Better Development Environment Chevron down icon Chevron up icon
Tailwind CSS Mini Projects Chevron down icon Chevron up icon
Project 1 - Clipboard Website Chevron down icon Chevron up icon
Project 2 - Loopstudios Website Chevron down icon Chevron up icon
Project 3 - Shortly Website Chevron down icon Chevron up icon
Project 4 - Testimonial Grid Project Chevron down icon Chevron up icon
Project 5 - Fylo Website with Color Picker Chevron down icon Chevron up icon
Project 6 - Bookmark Manager Website Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(3 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Joshua Aug 28, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Fantastic Course on Tailwind
Subscriber review Packt
Markus Sep 11, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Subscriber review Packt
Patsy Phelan Jan 19, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Feefo Verified review Feefo
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How can I download a video package for offline viewing? Chevron down icon Chevron up icon
  1. Login to your account at Packtpub.com.
  2. Click on "My Account" and then click on the "My Videos" tab to access your videos.
  3. Click on the "Download Now" link to start your video download.
How can I extract my video file? Chevron down icon Chevron up icon

All modern operating systems ship with ZIP file extraction built in. If you'd prefer to use a dedicated compression application, we've tested WinRAR / 7-Zip for Windows, Zipeg / iZip / UnRarX for Mac and 7-Zip / PeaZip for Linux. These applications support all extension files.

How can I get help and support around my video package? Chevron down icon Chevron up icon

If your video course doesn't give you what you were expecting, either because of functionality problems or because the content isn't up to scratch, please mail customercare@packt.com with details of the problem. In addition, so that we can best provide the support you need, please include the following information for our support team.

  1. Video
  2. Format watched (HTML, MP4, streaming)
  3. Chapter or section that issue relates to (if relevant)
  4. System being played on
  5. Browser used (if relevant)
  6. Details of support
Why can’t I download my video package? Chevron down icon Chevron up icon

In the even that you are having issues downloading your video package then please follow these instructions:

  1. Disable all your browser plugins and extensions: Some security and download manager extensions can cause issues during the download.
  2. Download the video course using a different browser: We've tested downloads operate correctly in current versions of Chrome, Firefox, Internet Explorer, and Safari.