Learn Tailwind CSS - React JS with Hands On Projects 2022

Learn the most popular utility css framwork tailwind css framework

4.15 (11 reviews)
Udemy
platform
English
language
Web Development
category
46
students
5.5 hours
content
Jan 2022
last update
$19.99
regular price

What you will learn

Utility CSS framework

Differences between Plain CSS , Bootstrap , Tailwind

How Tailwind Works

All important styling concepts for beginners with examples

Three Hand on projects

Description

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript

Tailwind CSS can be used to make websites in the fastest and the easiest way.

Tailwind CSS is basically a 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 specification or how your site should look like, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, processes this CSS file over a configuration file, and produces an output.

Advantages of Tailwind CSS:

  • No more silly names for CSS classes and Id’s.

  • Minimum lines of Code in CSS file.

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

Topics we will cover in this course

  • Tailwind Introduction

  • Differences between Plain CSS , Bootstrap , Tailwind CSS

  • React Tailwind Integration

  • Typography

  • Colours and Background Colours

  • Heights and Widths

  • Spacing (Margin and Padding)

  • Flexboxes

  • Alignment with Flexboxes

  • Curser and Hover Effects

  • Positions (Static , Fixed , Absolute , Relative)

  • Alignment with Positions

  • Grid System

  • Media Queries

  • Responsive Views

  • Customising Tailwind Classes

  • 3 Hands On Projects



Screenshots

Learn Tailwind CSS - React JS with Hands On Projects 2022 - Screenshot_01Learn Tailwind CSS - React JS with Hands On Projects 2022 - Screenshot_02Learn Tailwind CSS - React JS with Hands On Projects 2022 - Screenshot_03Learn Tailwind CSS - React JS with Hands On Projects 2022 - Screenshot_04

Content

Introduction

Promo
Tailwind Introduction
Tailwind Integration

Typography and colors

Fontsize
Fontweight
Colors
Background colors

Height and Width

Heights and Widths classes

Borders and border radius

Borders
Border Radius

Project 1

Custom Button - Part1
Custom Button Part-2

Spacing and Backgrounds

Margins and backgrounds
Backgrounds - 1
Backgrounds-2

Flexbox

Flex Part-1
Flex Part-2

Project 2

Login page Part-1
Login page part-2

Hover and Curser Effects

Hover
Curser

Tailwind positions

Fixed Position
Absolute and Relative
Center align with absolute position

Media Queries and Grid

Media Queries -1
Media Queries part-2
Grid system

Tailwind class customisation

Customizing colors
Customsizing sizes

Final Project

Project intro
Header
Developer intro
Techonlogies used
Developer info
Footer

Charts

Price

Learn Tailwind CSS - React JS with Hands On Projects 2022 - Price chart

Rating

Learn Tailwind CSS - React JS with Hands On Projects 2022 - Ratings chart

Enrollment distribution

Learn Tailwind CSS - React JS with Hands On Projects 2022 - Distribution chart
4481998
udemy ID
1/7/2022
course created date
1/9/2022
course indexed date
Bot
course submited by