Tailwind CSS From Scratch | Learn By Building Projects

Create incredible looking layouts quick and effectively utilizing Tailwind CSS utility classes

What you'll Learn

• Figure out how to create and alter layouts quick
• Become familiar with the Tailwind utility classes utilizing a code sandbox
• Assemble 5 smaller than usual projects and 6 site projects
• Figure out how to set up a dev environment utilizing the Tailwind CLI
• Arrange your styles to create custom layouts

Necessities

You ought to know the fundamentals of CSS

Desc

This is a tomfoolery project-based course to figure out how to create marvelous layouts utilizing the Tailwind CSS structure and settle in utilizing utility classes over something like Bootstrap, which utilizes component-based classes. We should investigate the diagram for this course...

✔️ The Sandbox

I would rather not hop solidly into the projects, however you positively could assuming that you need. So the initial two segments, we will be working in a coding sandbox. In each new video in these segments, we will have another document to explore different avenues regarding and realize about a specific part of Tailwind. For instance, we will have pages/recordings for colors, typography, dividing, flex classes, and considerably more. This permits us to fundamental touch on all pieces of Tailwind in a particular request, as opposed to simply bouncing directly into projects.

✔️ Smaller Projects

Then, we will take what we realize in the sandbox environment and use it to create a few little projects. These are things that will require 10 - 20 minutes to create and we will do everything in one video for each undertaking. The small projects incorporate

• Email Subscribe Card
• Pricing Grids
• Item Modal
• Picture Gallery
• Login Modal

I might try and add more smaller than normal projects later. These will assist you with considering making the plunge by making something.

✔️ Website Projects

Then, we will begin to deal with bigger point of arrival sites. This will truly scrutinize what you realized. There will be 6 distinct sites. They are exceptionally present day and clean-looking. We banded together with Frontend Mentor for the plans. A few projects will have a touch of javaScript for things like burger menus, tabs, and some approval. We should investigate the projects.

 

Clipboard Website - Simple programming item presentation page. Zeroing in generally on flexbox and arrangement. Some foundation images, and so forth.

Loopstudios - VR organization site with cool images, responsive portable menu with some JavaScript, inclination overlay impacts.

Shortly - Website for a connection shortening instrument. We will have a decent looking responsive menu and add a little JavaScript for a few structure approval and working with the DOM.

Tribute Grid - A venture where we center around utilizing Tailwind's framework classes.

Fylo - Product page with a light/dull mode highlight. We will add some JavaScript to save the variety mode to nearby capacity. We will likewise have a dynamic tab component for the FAQ.

Bookmark - Bookmark administrator augmentation point of arrival. This site will have some dynamic foundation images, a burger menu and a few tabs that will utilize JavaScript.

Who this course is for:

Anybody that needs to get better at making site and UI layout