Tailwind CSS From Scratch | Learn By Building Projects

<div>This is a fun project-based course to learn how to create awesome layouts using the Tailwind CSS framework and get comfortable using utility classes over something like Bootstrap, which uses component-based classes. Let's take a look at the outline for this course...</div><div><br></div><div><span style="font-size: 1rem;">✔️ The Sandbox</span></div><div><br></div><div>I don't want to jump right into the projects, though you certainly could if you want. So the first two sections, we will be working in a coding sandbox. In every new video in these sections, we will have a new file to experiment with and learn all about a certain aspect of Tailwind. For example, we will have pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to essential touch on all parts of Tailwind in a specific order, rather than just jumping right into projects.</div><div><br></div><div><span style="font-size: 1rem;">✔️ Mini-Projects</span></div><div><br></div><div>Next, we will take what we learn in the sandbox environment and use it to create some small projects. These are things that will take 10 - 20 minutes to create and we will do it all in one video per project. The mini-projects include</div><div><br></div><div><ul><li><span style="font-size: 1rem;">Email Subscribe Card</span></li><li><span style="font-size: 1rem;">Pricing Grids</span></li><li><span style="font-size: 1rem;">Product Modal</span></li><li><span style="font-size: 1rem;">Image Gallery</span></li><li><span style="font-size: 1rem;">Login Modal</span></li></ul></div><div><br></div><div>I may even add more mini-projects later. These will help you get your feet wet by creating something.</div><div><br></div><div><span style="font-size: 1rem;">✔️ Website Projects</span></div><div><br></div><div>Next, we will start to work on larger landing-page websites. This will really put what you learned to the test. There will be 6 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 like hamburger menus, tabs, and some validation. Let's take a look at the projects.</div><div><br></div><div><span style="font-size: 1rem;">Clipboard Website - Simple software product landing page. Focusing mostly on flexbox and alignment. Some background images, etc.</span></div><div><br></div><div>Loopstudios - VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects.</div><div><br></div><div>Shortly - Website for a link shortening tool. We will have a nice-looking responsive menu and add a little JavaScript for some form validation and working with the DOM.</div><div><br></div><div>Testimonial Grid - A project where we focus on using Tailwind's grid classes.</div><div><br></div><div>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.</div><div><br></div><div>Bookmark - Bookmark manager extension landing page. This website will have some dynamic background images, a hamburger menu and some tabs that will use JavaScript.</div>

What you'll learn:

• Learn to create and edit layouts super fast
• Learn the Tailwind utility classes using a code sandbox
• Build 5 mini-projects and 6 website projects
• Learn how to set up a dev environment using the Tailwind CLI
• Configure your styles to create custom layouts