82% Off Tailwind CSS From Scratch | Learn By Building Projects | Udemy Review & Coupon

Tailwind CSS utility classes can be used to create efficient and visually appealing layouts quickly.

This course covers:

Tailwind CSS From Scratch | Learn By Building Projects is an online course designed to help you master Tailwind CSS from the ground up. This comprehensive 12.5-hour on-demand video course provides step-by-step instruction, covering topics such as basic styling and layout, responsive design, customizing Tailwind components, and more. Along with the videos, you'll also get access to 10 downloadable resources and a certificate of completion at the end.

What you'll learn

This course is great for any web designer looking to get up to speed with the Tailwind utility classes. In this course, you'll learn how to create and edit layouts quickly, as well as learn the various utility classes that makeup Tailwind. You'll have access to a code sandbox so you can play around with the classes and gain a better understanding of them. On top of that, you'll also be building several projects throughout the course – 5 mini-projects and 6 website projects – which will help solidify your knowledge.

If you need help setting up your dev environment to work with Tailwind, then this course has got you covered. You'll learn how to use the Tailwind CLI in order to configure your styles and create custom layouts too. With all of these skills under your belt, you could soon find yourself creating gorgeous websites using the Tailwind design system quicker than ever before!

About Instructor

Brad Traversy is an experienced web developer and instructor who has been programming for nearly 12 years and teaching for five years. He runs Traversy Media, a successful programming YouTube channel, where he shares his knowledge of everything from HTML5 to front-end frameworks to server-side technologies. Brad is well-known for his ability to explain complex problems in a simple and straightforward manner that is easy to understand. Those new to the world of coding can benefit from the wealth of videos that Brad has created, giving them invaluable insight into the world of coding. In addition, those with existing knowledge will also find their expertise greatly benefited by engaging with Brad’s courses as they can focus on more intricate technical details within any chosen language or framework. Investing your time and energy into learning code under Brad’s guidance could be incredibly beneficial as it will give you real-world skills that are applicable within programming jobs today.

Requirements

Understanding and knowing the basics of CSS is essential to any work done with websites. CSS stands for Cascading Style Sheets and it is used to help create the look and feel of a website. It helps to control the styling of a site, including how text appears on a page, page layout, and color schemes. Without having an understanding of the fundamental building blocks of CSS, it can be extremely difficult or even impossible for a person to properly design a website.

Description

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...

 The Sandbox

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.

Mini-Projects

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

Email Subscribe Card

Pricing Grids

Image Gallery

Product Modal

Login Modal

I may even add more mini-projects later. These will help you get your feet wet by creating something.

Website Projects

Our upcoming projects will involve the development of larger landing-page websites. This will serve as a practical application of what you have learned. There are a total of 6 websites. The appearance of all of them is modern and clean. Our company collaborated with Frontend Mentor for the design aspect. Certain projects may utilize JavaScript for various purposes such as implementing hamburger menus, tabs, and validation. Now, let's review the projects.

The Clipboard Website is a straightforward landing page for a software product. The focus is primarily on flexbox and alignment. There are some background images and other related visuals.

The Loopstudios website features VR technology, a responsive mobile menu with JavaScript, and gradient overlay effects.

Shortly is a website that offers a tool for shortening links. The menu will be designed to be responsive and JavaScript will be utilized for form validation and DOM manipulation.

The Testimonial Grid project is centered around utilizing Tailwind's grid classes.

The Fylo product page includes a feature for both light and dark modes. JavaScript code will be incorporated to save the color mode to local storage. Additionally, a tab component will be implemented for the FAQ section to enhance its interactivity.

This is a landing page for a bookmark manager extension. The website will feature dynamic background images, a hamburger menu, and tabs utilizing JavaScript.

This course is intended for:

This course is designed for those who want to become proficient in the website and user interface (UI) design. Whether you are a beginner or looking to take your web design skills to the next level, this course covers essential principles and techniques that will help you create well-designed interactive web experiences. The course focuses on fundamental concepts such as responsive layout, grid systems, typography, color theory, and appropriate use of images. In addition, it provides instruction on specific methods used to create UI layouts including sketching conceptions, creating clickable wireframes, prototyping interfaces with tools like Figma and Adobe XD, and implementing the final product with web languages HTML/CSS.