Tailwind CSS 3.0: Fundamentals

Learn to build modern websites with TailwindCSS 3.0 step by step and with examples.

4.44 (78 reviews)
Udemy
platform
English
language
Web Development
category
instructor
489
students
1.5 hours
content
Jan 2022
last update
$94.99
regular price

What you will learn

Install and configure the ideal environment for working with Tailwind CSS

Build a landing page from scratch, following the latest standards of web development

Adapt the page to different screen sizes (responsive design)

Apply CSS states

Implement an automatic dark mode

Reuse classes (don't repeat yourself principle)

Learn to use the 4 first-party Tailwind CSS plugins

Configura and use the new Just-in-Time engine

Description

You will learn about Tailwind CSS, the CSS framework that is changing how you work with CSS. You will discover and experience what makes it different from others.

This course will save you the work of study and research, and you will learn the basics from scratch to build any website you set your mind to.

Learn how to use Tailwind CSS in this comprehensive course.

  • Adapt the page to different screen sizes (responsive design)

  • Apply CSS states

  • Design a dark mode

  • Reuse your styles (don't repeat yourself principle)

  • Learn how to install and use plugins

Tailwind CSS is the most popular CSS framework of the moment, with a very different approach to standard CSS.

Usually, you have written CSS when you want to style your web pages. Tailwind CSS gives you predefined classes that you can include in your HTML directly.

The framework covers everything you might need: colors, sizes, font types, margins, spacing, flexbox, rounded corners, shadows, etc. So you can write a fully customized design without having to write any CSS.

This way of working gives you several advantages. For example:

  • You don't spend energy choosing class names.

  • You don't have a CSS file to maintain.

  • The styles are local to each page.

Frameworks based on utility classes, such as Tailwind CSS, are already being used by well-known companies like GitHub, Heroku, Twitch, or Kickstarter. Netflix is already using Tailwind CSS on its top 10 lists of the most-watched TV and films. The usage trend is growing in the market.

You will build a landing page for a Netflix-like website using the Tailwind CSS utility classes as a course project. You will improve and complete it little by little.

Course overview:

  • Installing Node. It is the base to install the necessary packages.

  • Configuring Visual Studio Code, and I will show you the plugins I use to work comfortably.

  • Installing Tailwind CSS and its dependencies, getting everything ready to start working.

  • Building a Netflix-like landing page with a mobile-first approach.

  • Adapting the page to different screen sizes, known as responsive design.

  • Adding CSS states, such as when you hover the mouse over a button.

  • Configuring your page with an automatic dark mode.

  • Creating custom classes that you can reuse, to avoid repeating code.

You will also control the 4 official Tailwind CSS plugins:

  • Typography: to style texts (for example, those coming from a database).

  • Forms: for styling forms

  • Aspect-Ratio: to control the aspect ratio of images

  • Line-Clamp: to limit text and achieve visual harmony

In addition:

  • After each module of lessons, you will take a quiz to check that you haven't missed anything important.

  • The course is alive, and I will update it as Tailwind CSS evolves. You also have access to the repository where I publish the pages' source code.

With this course, I make it easy and practical for you to have a good base and build any page you want, with clear and practical lessons.

If you haven't decided yet, you can watch for free the lesson where we build a page from scratch. So you can see the whole process.

And of course, if you have any questions, you can post them in the questions and answers section, where I will answer them.

See you inside!

Screenshots

Tailwind CSS 3.0: Fundamentals - Screenshot_01Tailwind CSS 3.0: Fundamentals - Screenshot_02Tailwind CSS 3.0: Fundamentals - Screenshot_03Tailwind CSS 3.0: Fundamentals - Screenshot_04

Content

Introduction

Introduction

Installation and configuration

Installing Node.js
Configuring Visual Studio Code
Basic configuration of Tailwind CSS
Basic configuration quiz

Building the page

Building a page from scratch
Making the page responsive
Applying CSS states
Adding dark mode
Classes reuse with @apply
Tailwind CSS general knowledge quiz

The 4 official plugins

Using the Typography plugin
Using the Forms plugin
Using the Aspect Ratio plugin
Using the Line Clamp plugin
Quiz on official Tailwind CSS plugins

Continue learning

A look at advanced concepts
Next steps

Reviews

Arthur
April 16, 2022
It was genuinely helpful and detailed where it needed to be in order to understand and use Tailwind in my next project. Thanks David!!!
Eik
April 6, 2022
I honestly think it's a bit short on how to use the tailwind framework and best practices. But the teacher is great, I just wish there were more content, more deep diving into the framework
Maicon
March 10, 2022
Great course. I could learn basics that was confused by doing my own in the Tailwind documentation. Some times you need someone to guide basics, and it was done smoothy by David. Thanks!
Patrick
March 2, 2022
A short and sweet run-through of the main features and usage of tailwindcss. A suggestion is to have the before and after HTML files for the different lessons in Section 4.
Jahmal
February 19, 2022
Enjoy TailwindCSS as a newb in the Web Development space. I heard of TailwindCSS and was told to stay away from it as a new person in the space but I really don't regret taking on the challenge anyway. This course made it straight forward to understand. Straight to the point!
Janice
February 15, 2022
I appreciated mostly that the course wasn't too long, but at the same time full of very practical teaching. JIT for starting my new simple project!
Justin
February 15, 2022
I enjoyed completing this course - it met all of my expectations in terms of finding out what Tailwind CSS is all about. As a matter of fact I should point out that since the course is titled 'Tailwind CSS 3.0: Fundamentals', I was quite impressed that David went a little further to demonstrate how to extend the framework with plugins. The code walk throughs were well structured and flowed well from topic to topic starting with the basic concepts and leading into more advanced concepts. I now have a good idea of what this framework is capable of and based on the content David delivered can apply it to whatever framework I wish. All in all it was well worth it - I'd rather go through a demo than just head straight for the docs - I certainly got what I needed and to that end - thanks David, much appreciated!
Angie
January 6, 2022
Nice and quick without unnecessary explanations of css itself, or repeating explanations like some other courses out there. Recommended!
Nina
December 28, 2021
Great course and great teacher. Very useful information and explained step by step. I highly recommend it!
Ivan
December 9, 2021
This is the kind of course that I like to take when first learning a new piece of tech. The author's hands-on style throughout the lectures was very helpful for me to understand how Tailwind CSS works and what are the benefits of using it, all inside ~1 hour (I viewed it at 1.25x speed). The lectures are very well paced, and broken into appropriately sized chunks. I cannot honestly claim I 'know' Tailwind CSS after passing this course, but now I know that I *want* to learn it, because I see how it will help me create better looking websites more easily and without jumping between HTML and CSS files. I am very happy with my purchase; definitely got my money's worth out of it. To others considering to buy this course: if you know nothing about Tailwind CSS and want to decide whether it will work for you, or if you're just starting with it, this course will put you on the right path.
章祺
October 21, 2021
Well, obviously this course definitely it is a great getting started to learn Tailwind CSS, you can learned about needs to know basic, but hope can know how to use on modern frontend framework, maybe like React.
Dave
October 6, 2021
Good course that covers all aspects of getting started with Tailwind CSS. Could have been better if it covered more on its use with JS frameworks
Mark
September 30, 2021
I am really happy I was able to take this course. It was well thought out and clearly presented. David provided solid examples that are easy to build upon. He gave me the information I needed to get setup and running with Visual Studio Code. It gave me the highlights and the backbone I needed to move forward in learning Tailwind CSS. I am more than happy I took this course and give it a solid 5 stars because it covers a lot a ground in a short amount of time. Thanks David

Charts

Price

Tailwind CSS 3.0: Fundamentals - Price chart

Rating

Tailwind CSS 3.0: Fundamentals - Ratings chart

Enrollment distribution

Tailwind CSS 3.0: Fundamentals - Distribution chart

Related Topics

4315998
udemy ID
9/24/2021
course created date
10/1/2021
course indexed date
Bot
course submited by