Tailwind CSS From Scratch | With Multiple Projects

Focused View

Ali Hossain

4:18:43

116 View

1 - Introduction

1 - What is Tailwind CSS.mp4

02:04

2 - Development Environment Setup.mp4

13:02

2 - Development-Environment-Setup.pdf

3 - VS Code Keyboard Shortcuts.mp4

06:45

3 - VS-Code-Keyboard-Shortcuts.pdf

4 - First Tailwind APP.mp4

06:40

4 - projects.zip

5 - Tailwind CSS Installation and set up.mp4

09:31

5 - Tailwind-CSS-Installation.pdf

5 - tailwindCSS.zip

2 - Project Overview

6 - Project One Overview.mp4

00:45

7 - Project Two Overview.mp4

01:08

3 - Core Concepts

8 - Understanding the utilityfirst approach.mp4

15:45

8 - learnTailwind.zip

9 - Plugins and configuration settings.mp4

03:01

9 - extension-name.zip

10 - Handling Hover Focus and Other States.mp4

13:49

10 - learnTailwind.zip

11 - Responsive design with Tailwind CSS.mp4

07:11

11 - learnTailwind.zip

12 - Light Dark Mode.mp4

09:14

12 - learnTailwind.zip

13 - Tailwind Customizations.mp4

07:19

13 - learnTailwind.zip

14 - Arbitrary Values.mp4

03:08

15 - Tailwind apply.mp4

04:05

15 - Tailwind-apply.mp4

04:05

16 - Tailwind layers.mp4

05:20

16 - learnTailwind.zip

4 - Fundamental Section

17 - Tailwind Colors.mp4

04:33

17 - learnTailwind.zip

18 - Tailwind Spacing.mp4

04:22

18 - learnTailwind.zip

19 - Tailwind Typography.mp4

10:35

19 - learnTailwind.zip

20 - Tailwind Sizing.mp4

03:47

20 - learnTailwind.zip

21 - Tailwind Backgrounds.mp4

03:09

21 - learnTailwind.zip

22 - Tailwind Gradient.mp4

01:55

22 - learnTailwind.zip

23 - Tailwind Borders.mp4

05:41

23 - learnTailwind.zip

24 - Tailwind Effects.mp4

02:10

24 - learnTailwind.zip

25 - Tailwind Flexbox Grid.mp4

04:41

25 - learnTailwind.zip

26 - Tailwind Container.mp4

03:03

26 - learnTailwind.zip

27 - Tailwind Components.mp4

03:05

27 - learnTailwind.zip

28 - Tailwind Build.mp4

06:41

28 - Tailwind-CSS-Installation.pdf

28 - learnTailwind.zip

29 - Tailwind Resources.mp4

02:48

5 - Building complete project with Tailwind CSS

30 - Building complete project with Tailwind CSS.mp4

11:35

30 - learnTailwind.zip

6 - Building Custom project with Tailwind CSS

31 - Top Hero Area.mp4

08:30

31 - learnTailwind.zip

32 - Header Area.mp4

08:01

32 - learnTailwind.zip

33 - Light Mood and Dark Mode.mp4

06:26

33 - learnTailwind.zip

34 - Main Menu.mp4

09:39

34 - learnTailwind.zip

35 - Hero Area.mp4

06:42

35 - learnTailwind.zip

36 - Service Area.mp4

07:35

36 - learnTailwind.zip

37 - Brand Area.mp4

04:00

37 - learnTailwind.zip

38 - Project Area.mp4

04:34

38 - learnTailwind.zip

39 - Contact Area.mp4

11:46

39 - learnTailwind.zip

40 - Footer Area.mp4

04:12

40 - learnTailwind.zip

41 - Build The Project.mp4

03:38

41 - learnTailwind.zip

42 - Hosting the project.mp4

02:15

7 - Conclusion

43 - Next steps and resources for continued learning.mp4

00:28

Description

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

What You'll 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

Who is this for?

If you know HTML and CSS a bit but do not know how to build real-world projects, this course is perfect for you.

Web developers of all levels who want to increase their value by learning a more advanced way of styling their apps & sites

Anyone that wants to get better at creating website and UI layouts

More details

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.

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.
Who this course is for:
If you know HTML and CSS a bit but do not know how to build real-world projects, this course is perfect for you.
Web developers of all levels who want to increase their value by learning a more advanced way of styling their apps & sites
Anyone that wants to get better at creating website and UI layouts

User Reviews

Rating

average 0

Total votes0

Focused display

tailwind css

Ali Hossain

Instructor's Courses

Hello, my name is Ali Hossain, and I am a seasoned web developer with a passion for teaching others the art of coding. With over 10 years of experience in the industry, I have honed my skills in HTML, CSS, JavaScript, PHP, and WordPress, among others.Throughout my career, I have worked on countless web development projects and have gained a wealth of knowledge and expertise in the field. I love nothing more than sharing my knowledge and helping others discover their potential as web developers.As a Udemy instructor, I am dedicated to providing high-quality, engaging courses that cater to all levels of learners. Whether you are a complete beginner or an experienced developer looking to refine your skills, my courses are designed to help you achieve your goals.My approach to teaching is focused on practicality and relevance. I believe that the best way to learn is by doing, which is why my courses are structured around hands-on exercises and real-world examples. By the end of each course, you will have the skills and confidence to tackle your own web development projects with ease.So, if you're ready to take your coding skills to the next level, join me on Udemy, and let's get started!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.