Tailwind Css For Beginners

Learn everything you need to know about Tailwind CSS

What you'll learn

Tailwind CSS installation with CLI

Tailwind CSS Flex

Tailwind CSS Grid

Tailwind CSS Animation

How to use Tailwind CSS Documentation

How to create website from scratch using Tailwind CSS

Deploying Tailwind CSS to Github

Hosting Tailwind CSS Project on Netlify, Vercel, cPanel

Requirements

Basic knowledge of HTML and CSS

Description

Tailwind CSS is  used to style websites in the fastest and easiest way.Tailwind CSS is basically an utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.The beauty of this thing called tailwind is it doesn’t impose design specifications or how your site should look, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, process this CSS file over a configuration file, and produces an output.Why Tailwind CSS?Faster UI building processIt is na utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach.Advantages of Tailwind CSS:No more silly names for CSS classes and Id’s.Minimum lines of Code in CSS file.You can customize the designs to make the components.Makes the website responsive.Makes the changes in the desired manner. CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS we can use utility classes and make local changes.

Overview

Section 1: Introduction

Lecture 1 Setting Working Environment

Section 2: Utility First

Lecture 2 Utility First

Section 3: Text and Colors

Lecture 3 Text and Colors

Section 4: Padding, Margin and Space

Lecture 4 Padding, Margin and Space

Section 5: Font and Typography

Lecture 5 Font and Typography

Section 6: Text and Decoration

Lecture 6 Text and Decoration

Section 7: Height and Width

Lecture 7 Height and Width

Section 8: CSS Position

Lecture 8 CSS Postion

Section 9: Background Image and Shadow

Lecture 9 Background Image and Shadow

Section 10: Border and Outline

Lecture 10 Border and Outline

Section 11: Break Point and Media Query

Lecture 11 Break Point and Media Query

Section 12: Hover and Interactivity

Lecture 12 Hover and Interactivity

Section 13: Transition and Transform

Lecture 13 Transition and Transform

Section 14: Flexbox Property

Lecture 14 Flexbox Property

Section 15: Working with CSS Grid

Lecture 15 Working with CSS Grid

Section 16: Tailwind CLI Setup with VS Code

Lecture 16 Tailwind CLI Setup with VS Code

Section 17: Customizing Tailwind CSS / Functions and Derivatives

Lecture 17 Customizing Tailwind CSS / Functions and Derivatives

Section 18: Hero section with Flex

Lecture 18 Hero Section with Flex

Section 19: Single Product Page

Lecture 19 Single Product Page

Section 20: Featured Post Layout

Lecture 20 Featured Post Layout

Section 21: Featured Products

Lecture 21 Featured Products

Section 22: Featured Product Categories

Lecture 22 Featured Product Categories

Section 23: Building website from scratch using Tailwind CSS

Lecture 23 Building website from scratch using Tailwind CSS

Section 24: Deploy Tailwind CSS project to cPanel, GitHub, Netlify, Vercel

Lecture 24 Deploy Tailwind CSS project to cPanel, GitHub, Netlify, Vercel

Web Developer,Web Designer,Software Engineer,Freelancer Developer on Upwork/Fiverr,Full Stack Developer,People who want to learn how to develop website