![Tailwind CSS From Scratch - Learn by Building Projects [Video]](https://content.packt.com/V19228/cover_image_small.jpg)
Tailwind CSS From Scratch - Learn by Building Projects [Video]
Subscription
FREE
Video + Subscription
$29.99
Video
$109.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
Subscription
FREE
Video + Subscription
$29.99
Video
$109.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
-
Free ChapterIntroduction
-
Tailwind Fundamentals - Part 1
-
Tailwind Fundamentals - Part 2
-
Better Development Environment
-
Tailwind CSS Mini Projects
-
Project 1 - Clipboard Website
-
Project 2 - Loopstudios Website
-
Project 3 - Shortly Website
-
Project 4 - Testimonial Grid Project
-
Project 5 - Fylo Website with Color Picker
-
Project 6 - Bookmark Manager Website
About this video
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
- Publication date:
- June 2022
- Publisher
- Packt
- Duration
- 12 hours 33 minutes
- ISBN
- 9781804611630