Master Tailwind Css For Beginners

Tailwind CSS For Beginners

What you'll learn

Learn how to set up a dev environment using the Tailwind CLI

Learn the Tailwind utility classes

Learn to create and edit layouts super fast

Configure your styles to create custom layouts

Requirements

You should know the basics of CSS

Description

Improve your skills and increase your value as a front end web developer by learning the ins and outs of Tailwind CSS!Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.No more trying to think of appropriate class names, no more creating wrapper classes and inner classes, no more wasting resources with unecessarily large CSS files. Tailwind CSS makes building designs incredibly fast and easy, not to mention has built-in optimisation out of the box. Not using a particular class in your HTML files? Then Tailwind CSS won't include it in the final build of your CSS!In this course we'll be creating a mobile-first landing page for a music festival website. We'll be covering layouts with flexbox and grid, Hero and Navbar components with menu and sub menu items, targeting different states like hover and focus states, targeting different screen sizes, and extending beyond Tailwind's built-in theme and classes.After getting comfortable with Tailwind CSS's utility classes, we'll be creating our own base, utility, and component classes, and even writing our own Tailwind CSS plugins! This course is packed with an incredibly amount of value in such a short amount of time!Increase your value as a front end web developer today by learning a more advanced way of styling your websites using Tailwind CSS.

Overview

Section 1: ntro & Setup

Lecture 1 Introduction

Lecture 2 What is Atomic CSS?

Lecture 3 Tailwind CSS – A Utility First CSS Framework

Lecture 4 How to Set Up Tailwind CSS

Section 2: Fonts & Colors

Lecture 5 Fonts & Colors

Section 3: Margin, Padding & Borders

Lecture 6 Margin, Padding & Border

Section 4: Custom Fonts

Lecture 7 Custom Fonts

Section 5: Flexbox

Lecture 8 Using Flexbox

Section 6: Cards

Lecture 9 Cards

Section 7: Badges

Lecture 10 Badges

Section 8: Grids.

Lecture 11 Grids

Section 9: Buttons

Lecture 12 Buttons

Section 10: Icons

Lecture 13 Icons

Section 11: Hover Effects

Lecture 14 Hover Effects

Section 12: Group Hover Effects

Lecture 15 Group Hover Effects

Anyone that wants to get better at creating website and UI layouts