Booking options
Price:
BuyContact Us£82.99
Course Images
Tailwind CSS From Scratch - Learn by Building Projects
By Packt
🔥 Limited Time Offer 🔥
Get a 10% discount on your first order when you use this promo code at checkout: MAY24BAN3X
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
12 hours 33 minutes
All levels
Description
This is a fun project-based course to learn how to create awesome layouts using the Tailwind CSS framework and to get comfortable using utility classes over something like Bootstrap, which uses component-based classes. Experiment and learn all about certain aspects of Tailwind with the help of this course.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
Audience
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.
Approach
This is a complete hands-on course; you will follow along with the instructor as you review and work on different mini-projects and website projects.
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
Github Repo
https://github.com/PacktPublishing/Tailwind-CSS-From-Scratch---Learn-by-Building-Projects
About the Author
Brad Traversy
Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.
Course Outline
1. Introduction
1. Introduction This video introduces you to the course outcomes. |
2. Course Outline and Projects This video introduces you to the course outline and projects. |
3. What Is Tailwind CSS This video explains Tailwind CSS. |
4. Basic Environment Setup This video introduces you to the basic environment setup. |
5. Tailwind Sandbox Setup This video introduces you to Tailwind Sandbox setup. |
2. Tailwind Fundamentals - Part 1
1. Utility-First Example This video explains the Utility-First example. |
2. Working with Colors This video explains working with colors. |
3. Container and Spacing This video explains container and spacing. |
4. Typography This video explains typography. |
5. Width and Height This video explains width and height |
6. Layout and Position This video explains layout and position. |
7. Backgrounds and Shadows This video explains backgrounds and shadows. |
8. Borders and Border Radius This video explains borders and border radius. |
9. Filters This video explains filters. |
3. Tailwind Fundamentals - Part 2
1. Interactivity This video explains interactivity. |
2. Breakpoint Classes and Media Queries This video explains breakpoint classes and media queries. |
3. Columns This video explains columns. |
4. Flexbox This video explains Flexbox. |
5. Grid This video explains the Grid. |
6. Transition and Transform This video explains transition and transform. |
7. Animation Classes and Keyframes This video explains animation classes and keyframes. |
8. Config and Customization This video explains config and customization. |
9. Dark Mode This video explains dark mode. |
4. Better Development Environment
1. Create an Environment with Tailwind CLI This video explains how to create an environment with Tailwind CLI. |
2. Directives and Functions This video explains directives and functions. |
3. Webpack and PostCSS Environment This video explains optional - webpack and PostCSS environment. |
5. Tailwind CSS Mini Projects
1. Mini Projects Introduction This video introduces you to various mini projects on Tailwind. |
2. Mini-Project 1 - Email Subscribe Card This video explains mini-project 1 - email subscribe card. |
3. Mini-Project 2 - Pricing Grids This video explains mini-project 2 - pricing grids. |
4. Mini-Project 3 - Product Modal This video explains mini-project 3 - product modal. |
5. Mini-Project 4 - Image Gallery This video explains mini-project 4 - image gallery. |
6. Mini-Project 5 - Login Modal This video explains mini-project 5 - login modal. |
6. Project 1 - Clipboard Website
1. Project Introduction This video explains the project's introduction. |
2. Setup and Config This video explains the setup and configuration of the project. |
3. Hero Section and Background Image This video explains the hero section and background image. |
4. 4 - Snippets Section and Using Directives This video explains the snippets section and how to use directives. |
5. Features Section and Items This video explains features section and items. |
6. Supercharge Section This video explains the Supercharge section. |
7. References and Footer This video demonstrates references and footer. |
8. Deploy to Netlify This video explains how to deploy the project to Netlify. |
7. Project 2 - Loopstudios Website
1. Project Introduction This video introduces you to the project. |
2. Setup and Config This video explains the setup and config of the project. |
3. Hero with Desktop Navigation This video explains Hero with desktop navigation. |
4. Feature Section This video explains the feature section of the project. |
5. Creations Section with Gradient Overlays This video explains the creations section with gradient overlays. |
6. Footer This video explains the footer. |
7. Hamburger Button and Animation This video explains hamburger button and animation. |
8. Mobile Menu and JavaScript This video explains mobile menu and JavaScript. |
9. Deploy to Vercel This video explains how to deploy your project to Vercel. |
8. Project 3 - Shortly Website
1. Project Introduction This video provides an introduction. |
2. Setup and Config This video explains the setup and config of the project. |
3. Navbar This video explains Navbar. |
4. Hero Section This video explains the Hero section. |
5. Shorten Form and Links This video explains shorten form and links. |
6. JavaScript Link Validation This video explains JavaScript link validation. |
7. Feature Boxes This video explains features boxes. |
8. CTA and Footer This video explains CTA and Footer. |
9. Mobile Menu This video explains mobile menu. |
9. Project 4 - Testimonial Grid Project
1. Project Introduction This video introduces the project. |
2. Setup and Config This video explains the setup and config of the project. |
3. First Box This video focuses on creating the first box. |
4. Remaining Boxes This video explains creating the remaining boxes. |
5. Add Grid Classes This video explains how to add grid classes. |
6. Line Clamp Plugin This video explains line clamp plugin. |
10. Project 5 - Fylo Website with Color Picker
1. Project Introduction This video provides an introduction to the project. |
2. Setup and Config This video explains the setup and configuration of the project. |
3. Header and Dark Mode Button This video focuses on header and dark mode button. |
4. JavaScript for Color Mode This video explains testing your course on SCORM cloud. |
5. Hero Section This video explains the Hero section. |
6. Features and Productive Sections This video explains features and productive sections. |
7. Testimonials and Early Access This video explains testimonials and early access. |
8. Smooth Scroll and Footer This video explains smooth scroll and footer. |
11. Project 6 - Bookmark Manager Website
1. Project Introduction This video provides an introduction. |
2. Setup and Config This video explains the setup and config of the project. |
3. Navbar This video explains Navbar. |
4. Hero Section This video explains the Hero section. |
5. Tabs and Panel Layout This video explains tabs and panel layout. |
6. JavaScript for Tabs This video explains JavaScript for tabs. |
7. Download Boxes This video explains download boxes. |
8. FAQ Accordion This video explains FAQ Accordion. |
9. Newsletter and Footer This video explains newsletter and footer. |
10. Mobile Menu This video introduces you to the mobile menu. |
Course Content
- Tailwind CSS From Scratch - Learn by Building Projects
About The Provider
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Reviews
There are no reviews for Tailwind CSS From Scratch - Learn by Building Projects yet.Why not be the first one to review this course?