Tailwind CSS : A Modern Way To Build Websites Using CSS

Learn Tailwind by building a fully responsive real estate portal & interactive dashboard. Become a TailwindCSS expert

4.44 (183 reviews)
Udemy
platform
English
language
Web Development
category
instructor
1,280
students
6.5 hours
content
Feb 2022
last update
$189.99
regular price

What you will learn

Learn A Modern Way To Style Websites & Never Go Back To Using Regular CSS

Learn & Understand How To Use Tailwind Utility Classes To Style Elements

Build Full Responsive Websites Using Breakpoints

Learn To Build A Real Estate Website

Learn To Build Interactive Dashboards With Components Like Charts

Learn How To Use Tailwind Classes To Create Components

Description

Tailwind CSS : A Modern Way To Build Websites Using CSS

Here Is What You Get By Enrolling In This Course:

Word-By-Word Explanation: In the entire course, I explain each line of code, without skipping a single line of code.

Awesome Quality Content: Over 6+ hours of HD(1080p) Videos.

Well Structured & Easy To Learn: Course has been specially designed to make it easy for the students to learn how to build modern and responsive web layouts using Tailwind CSS.

24 X 7 Support: I will always be there to guide you in your journey to become Tailwind CSS expert.

_________________________________________________________________________

Here Is A Brief Introduction About This Complete Course:

Tailwind CSS is a framework that provides a way to style your website right in the HTML itself without having to write external CSS.

Let's face it, CSS is hard to write and maintain, all those class names will leave you confused and styling elements is quite complex with regular CSS.

On the other hand, using frameworks like Bootstrap makes your website look like every other website that uses one.

Tailwind provides a perfect solution to both the problems, it provides you with utility classes which provide a more granular level control over how your website looks like so that your website design stands apart from the rest.

On the other hand, styling a webpage becomes much easier as you just have to use pre-defined Tailwind utility classes in your HTML and would never have to fiddle with an external CSS file.

Once you use Tailwind you will never go back to the older way of just using plain simple CSS.

The entire course is divided into 4 sections as follows:


Section 1: Introduction & Installation.

This section covers what Tailwind is, how it is different from bootstrap and the pros and cons of using Tailwind over other frameworks or regular CSS. We also learn how to setup tailwind in our web project.

Section 2: Tailwind Basics.

Before jumping into building projects, we first get acquainted with Tailwind basics. We learn how to use containers, flex box and grid layouts to place elements on webpage. We learn how to add margin, padding and spacing between these elements just by using Tailwind utility classes.

We also learn how to add borders, shadows and border radius to elements like buttons.

Section 3: Building A Fully Responsive Real Estate Portal.

After learning Tailwind CSS basics, we jump into building a real-estate portal using tailwind. We build a responsive navigation bar, a site banner with buttons which. adjust itself as per breakpoints. We also learn how to create card components to display property images and property details in a modern way. We also create a client testimonial section using the card layout in which the cards are fully responsive. Finally we create a contact form and a site footer to wrap up the project.

Section 4: Building A Modern Admin Dashboard.

In this section we learn how to build a modern looking site administrator dashboard which displays statistical data with dynamic charts. The entire dashboard will be built with pure Tailwind CSS utility classes.


So let's begin the journey of becoming a Tailwind CSS expert.

In addition to the Udemy 30-day money back guarantee, you have my personal guarantee that you will love what you learn in this course. If you ever have any questions please feel free to message me directly and I will do my best to get back to you as soon as possible!

_________________________________________________________________________

Make sure to enroll in the course before the price changes.

Take yourself one step closer towards becoming a professional API developer by clicking the "take this course button" now!

Join the journey.

Sincerely,

Ashutosh Pawar

Screenshots

Tailwind CSS : A Modern Way To Build Websites Using CSS - Screenshot_01Tailwind CSS : A Modern Way To Build Websites Using CSS - Screenshot_02Tailwind CSS : A Modern Way To Build Websites Using CSS - Screenshot_03Tailwind CSS : A Modern Way To Build Websites Using CSS - Screenshot_04

Content

Introduction To Course & Installing Required Tools

Course Introduction
Introduction To Tailwind
Installing Node
Installing VS Code
Downloadable Resources

Tailwind Basics

Setting Up A Tailwind Project
Attaching Tailwind CSS With HTML
Creating Containers With Utility Classes
Adding With & Height Properties To Elements
Understanding How Flexbox Works In Tailwind
Wrapping Flex Items
Making Flex Items Grow & Shrink
Creating A Grid Layout
Creating A Row Layout
Adjusting Flow Of Elements In Grid Layout
Adding Gap Between & Justifying Items
Justify Individual Items
Adding Padding & Margin To Elements
Typography: Styling Text Using Tailwind Utility Classes
Adding Border Radius To Elements
Styling Borders
Adding Shadows To Elemetns
Using Breakpoints To Add Responsive Behaviour
Understanding & Using Pseudo Selectors
Layer & Apply Directives
Code Reuse By Using Components
Understanding How Utility Classes Work In Tailwind
How Apply Directive Works
Understanding Layer Directive

Building A Real Estate Portal With Tailwind

Real Estate Listing Portal: Project Overview
Designing Navigation Part 1
Designing Navigation Part 2
Designing Navigation Part 3
Designing Banner Part 1
Designing Banner Part 2
Fixing Alignment Issue
Card Part 1
Card Part 2
Card Part 3
Site Banner
Adding Another Card
Adding Another Banner
Client Testimonials
Contact Form Part 1
Contact Form Part 2
Shrinking Form
Creating Footer Heading
Creating Footer Menu Part 1
Creating Footer Menu Part 2
Creating Footer Menu Part 3
Adding Final Touches

Building Admin Dashboard With Tailwind

Setting Up The Project
Adding Logo
Designing Navbar
Designing Top Menu Part 1
Designing Top Menu Part 2
Adding Site Banner
Creating Cards Container
Adding Card Content
Adding Charts
Adding More Charts
Fixing Nav Issue
Cards Container
Adding Chart To Card
Adding Table Header
Adding Single Channel Container
Adding Right Section Of The Channel

Conclusion

Course Conclusion

Reviews

Sinh
May 16, 2022
I'm a CS student working on a team project. Had to learn tailwind less than week and this course really hits the nail in the head, learnt tailwind in less than a day and really enjoyed these mini projects and really made me more confident in using tailwind in my team project. Many thanks to Mr Pawar! great teacher
Dadajonov
May 15, 2022
Old version is tought.I think if new version were tought,It would be a lot more better.However,The way the instructor teaches is awsome!
Jared
May 11, 2022
There is a lot of great content in this course for learning Tailwind CSS. There are some differences in times between the layouts of the site we are developing and the site in the instructor's reference site, but overall things come together pretty nicely. This course is definitely on the shorter side of things, but it does pack a respectable amount of information in. The basics sections is good to get a decent grasp on various aspects of Tailwind. The 2 projects we build in the course are decent examples and serve the purpose. If I had one suggestion for things to add it would be a section on exploring more of Tailwind's syntax/features in a sandbox environment. Possibly showing off cool design tricks and recipes that could be plugged into our designs. Great course and well worth the time and money spent.
Brennan
March 18, 2022
Good introduction to Tailwind. Allows you to learn the basic very quickly. As of this review it is for Tailwind 2 and the latest is Tailwind 3 so some of the setup will behave differently. The example projects help solidify some of the concepts but they are quite repetitive and make the course much longer than it needs to be. I wish there was more emphasis on writing more reusable code. Copy and pasting the same thing multiple times is not how someone would realistically code these in real life. Some form of abstraction would have been nice. There is a section where a "table" is made but the instructor uses manual alignment instead of actually using an HTML table. I found that very strange and a very bad practice. All in all, it is worth it if you want a quick introduction. The instructor speaks clearly and I was able to watch the lectures at 2.5x without too much difficulty.
K
March 5, 2022
**Very Important Concern**: Still waiting for a response from the instructor about this. I had to deduct 2 stars (Don't want to be too harsh), but this is very important concern for students who are not reading the documentation. Tailwind CSS uses a mobile first approach - Classes are applied from a mobile point of view and adjusted as you increase the screen size - (sm, md, lg, etc). (i.e.) You don't apply breakpoints to target smaller screens - You apply breakpoints to target larger screens. **If you are a student, please read the page on responsive design**. **Positives**: 1) For me in particular - I understand the difference and follow the documentation for responsive design. I mostly care about the class styling. 2) The instructor thoroughly goes through the basics of the classes which is great! 3) The projects are actually very nice in terms of UI/UX design compared to most courses. I would like, however, if the last project was responsive.
Billy
March 4, 2022
As I got further into this course it hit me, is he teaching the best practices with all his inline styling vs using a style sheet or to make the 1st project responsive, I saw an excuse for not doing that but its still an excuse. Original review was a 4.5. The instructor is very smart and knows what he is doing but I am not sure if he is a teacher? Please correct me if I am wrong about the inline styling statement.
Dharrsan
February 24, 2022
Good. Maybe he could add 2 more projects with tailwind 3 and those projects should be of different variety. Easily i will give 4/5 rating ! :)
Lyndon
February 17, 2022
so amazing......!!! i can't believe it that was so easy to create a responsive website!!! but still need to familiarize all of those classes :D
Dilraj
February 6, 2022
node js installation in windows is not that easy. I beleive, that also should be included in this course as windows is used by most users
Andrew
December 22, 2021
Fantastic course. Ashutosh is a great instructor. He takes the time to clearly explain all the major tailwind css classes and when to propertly use them. The two course projects are very helpful for learning how tailwind css is applied to build real applications.
Pankaj
October 27, 2021
Design with grid class was awesome and easy. Very less effort required to design webpage as compared to normal CSS

Charts

Price

Tailwind CSS : A Modern Way To Build Websites Using CSS - Price chart

Rating

Tailwind CSS : A Modern Way To Build Websites Using CSS - Ratings chart

Enrollment distribution

Tailwind CSS : A Modern Way To Build Websites Using CSS - Distribution chart

Coupons

DateDiscountStatus
3/20/202295% OFF
expired

Related Topics

4310698
udemy ID
9/21/2021
course created date
10/25/2021
course indexed date
Bot
course submited by