Tailwind CSS: Build and Deploy Responsive Real-world Website

Learn TailwindCSS, style your HTML easily and faster.

This course is a Tailwind Course that suits the interests of both Developers who are new to TailwindCSS and Developers who wish to sharpen their already existing TailwindCSS skills.

What you’ll learn

  • Introduction to Tailwind.
  • Adding TailwindCSS to Your Project.
  • Setting Up TailwindCSS Config File.
  • Responsive Design in TailwindCSS.
  • Customizing Breakpoints in TailwindCSS.
  • Padding in TailwindCSS.
  • Margin in TailwindCSS.
  • Font Family in TailwindCSS.
  • Font Size in TailwindCSS.
  • Font Style and Weight in TailwindCSS.
  • Letter Spacing and Line Height in TailwindCSS.
  • Text Align, Text Color, Text Opacity, Text Decoration.
  • Background Image in TailwindCSS.
  • Background Size, Background Repeat, Background Attachment.
  • Sizing and Hover TailwindCSS.
  • Border in TailwindCSS.
  • Box Shadow and Table in TailwindCSS.
  • Display in TailwindCSS.
  • Flexbox in TailwindCSS.
  • Grid in TailwindCSS.
  • Transform in TailwindCSS.
  • Transition and Animation in TailwindCSS.
  • Customizing Animation in TailwindCSS.
  • Project: Building a responsive Website using TailwindCSS.
  • Push The Website to Github.
  • Deploy the Website using Netlify.

Course Content

  • Introduction –> 5 lectures • 29min.
  • Responsive Design in Tailwind –> 2 lectures • 21min.
  • Spacing in Tailwind –> 2 lectures • 18min.
  • Typography –> 5 lectures • 35min.
  • Background –> 2 lectures • 31min.
  • Sizing and Hover –> 1 lecture • 6min.
  • Borders, Box Shadow, and Table –> 2 lectures • 23min.
  • Display, Flexbox, and Grid –> 3 lectures • 45min.
  • Transform, Transition, and Animation –> 4 lectures • 45min.
  • A project on Building a Responsive Website –> 1 lecture • 1hr 16min.
  • Git and Netlify –> 1 lecture • 14min.
  • Conclusion –> 1 lecture • 2min.

Tailwind CSS: Build and Deploy Responsive Real-world Website

Requirements

  • To be able to follow along, you should have good enough knowledge of HTML and CSS.

This course is a Tailwind Course that suits the interests of both Developers who are new to TailwindCSS and Developers who wish to sharpen their already existing TailwindCSS skills.

Tailwind is  utility-first CSS framework packed with classes  that can be composed to build any design, directly in your markup thereby enabling you to rapidly build modern websites without ever leaving your HTML. With Tailwind, you do not need to write a single line of CSS.

In this course, you will learn how to setup the Development Environment for Tailwind, where you will install Tailwind using Node Package Manager (NPM), create a package.json file as well as a Tailwind.config.js file.

This course also teaches Tailwind utilities related to Container, Display, Color, Backgrounds, Padding, Margin, Typography, Borders, Flexbox, Grid, Shadow, Tables, Transform, Transition, Animation and lots more.

In this course, you will learn how to push your website to github and then deploy to the web using Netlify.

At the end of it all, you will be able to use TailwindCSS to apply styles to your HTML without writing a single line of CSS.

This course promises to be worth your while.

Below are the topics that this course offers:

1. Introduction to Tailwind

2. Adding Tailwind to your project

3. Tailwind Config.js file

4. Padding in Tailwind

5. Margin in Tailwind

6. Font Family in Tailwind

7. Font Style and Weight

8. Letter Spacing and Line Height

9. Text Align, Text Color, Text Opacity

10. Background Image

11. Background Size

12. Sizing and Hover in Tailwind

13. Borders

14. Box Shadow and Table

15. Transform

16. Transition and Animation

17. Customizing Animation

18. Display

19. Flexbox

20. Grid

21. Git and Netlify