• Post category:StudyBullet-16
  • Reading time:6 mins read


Learn Utility-first Tailwind CSS framework from scratch & Build Multiple Projects using Tailwind CSS with best practice

What you will learn

You will learn Tailwind CSS core concepts

You will become confident Tailwind CSS

How to plan a website from sketch

You will able to build real world website

How to make websites work on every possible mobile device (responsive design)

Downloadable source code

Description

Welcome to Tailwind CSS From Scratch: With Multiple Projects. In this course, you will learn the latest Tailwind step by step. After completing the basics, I will create some projects so you know how to create projects with the skills, and if I missed something in the course it will cover also the project. Always after learning skills we should create some projects for solid learning. This course covers all the different parts of the latest version of the world’s most popular front-end framework, Tailwind. It has been used on millions of websites around the world and has been carefully developed to cover a wide range of typical user interfaces.

What to learn before tailwind CSS?

If you are interested to learn tailwind CSS you must have an excellent understanding in

  • HTML (Hyper Text Markup Language)
  • CSS (Cascading Style Sheets)
  • JavaScript (not mandatory)
  • NPM (not mandatory)

You do not need to learn older technologies like Tailwind v2 or others.


Get Instant Notification of New Courses on our Telegram channel.


What to do with tailwind CSS?

  • Utility-first framework
  • Easily customizable
  • Faster styling process
  • Responsiveness
  • Small file size
  • Don’t have to name classes

Increase your value as a front-end web developer today by learning a more advanced way of styling your websites using Tailwind CSS.

I also uploaded all resources, if you stack them anywhere, you can check them. So what are you waiting for? Enroll and learn the world’s most popular front-end framework Tailwind.

English
language

Content

Introduction

What is Tailwind CSS?
Development Environment Setup
VS Code Keyboard Shortcuts
First Tailwind APP
Tailwind CSS Installation and set up

Project Overview

Project One Overview
Project Two Overview

Core Concepts

Understanding the utility-first approach
Plugins and configuration settings
Handling Hover, Focus, and Other States
Responsive design with Tailwind CSS
Light & Dark Mode
Tailwind Customizations
Arbitrary Values
Tailwind @apply
Tailwind @layers

Fundamental Section

Tailwind Colors
Tailwind Spacing
Tailwind Typography
Tailwind Sizing
Tailwind Backgrounds
Tailwind Gradient
Tailwind Borders
Tailwind Effects
Tailwind Flexbox & Grid
Tailwind Container
Tailwind Components
Tailwind Build
Tailwind Resources

Building complete project with Tailwind CSS

Building complete project with Tailwind CSS

Building Custom project with Tailwind CSS

Top Hero Area
Header Area
Light Mood and Dark Mode
Main Menu
Hero Area
Service Area
Brand Area
Project Area
Contact Area
Footer Area
Build The Project
Hosting the project

Quiz

Quiz

Conclusion

Next steps and resources for continued learning