Tailwind CSS (+ React) - The beginner guide (2024 edition)

Focused View

Robin Lebhar

4:17:07

39 View

1. Introduction

1.1 Our project.html

1. Introduction.mp4

02:34

2. Tailwind .mp4

06:34

2. Tailwind basics

1. Tailwind utilities.mp4

03:59

2. The display property.mp4

04:15

3.1 Training with css flexbox.html

3. Flex and grids.mp4

05:37

4. Responsive.mp4

05:46

5. States.mp4

07:35

6. Theme customization.mp4

08:05

7. Directives.mp4

07:29

8. Dark mode.mp4

05:15

3. Setup

1.1 Git branch.html

1. Github.mp4

02:48

2.1 assets.zip

2.2 Git branch.html

2.3 Our model.html

2. Setup React and Tailwind.mp4

09:21

3.1 Git branch.html

3.2 Our model.html

3. Setup prettier and svg.mp4

01:53

4. Lets practice Tailwind

1.1 Git branch.html

1. Header.mp4

06:57

2.1 Git branch.html

2. Mobile nav.mp4

06:35

3.1 Git branch.html

3. Responsive mobile menu.mp4

13:27

4.1 Git branch.html

4. Shoe detail layout.mp4

10:32

5.1 Git branch.html

5. Gradient and fonts.mp4

06:43

6.1 Git branch.html

6. Making the gradient responsive.mp4

07:27

7.1 Git branch.html

7. Select.mp4

11:10

8.1 Git branch.html

8. Animations.mp4

13:58

9.1 Git branch.html

9. Card.mp4

10:32

10.1 Git branch.html

10. Card grid.mp4

11:05

11.1 Git branch.html

11. Animated sidebar.mp4

16:37

12.1 Git branch.html

12. Cart item.mp4

07:29

13.1 Git branch.html

13. Cart item inputs.mp4

06:47

14.1 Git branch.html

14. Tailwind merge (tw-merge).mp4

07:04

15.1 Git branch.html

15. Cart list.mp4

08:04

16.1 Git branch.html

16. Dark mode setup.mp4

11:11

17.1 Git branch.html

17. Dark mode styling.mp4

08:42

5. Making the cart dynamic with React

1.1 Git branch.html

1. Selecting a shoe.mp4

04:35

2.1 Git branch.html

2. Add to cart.mp4

12:09

3.1 Git branch.html

3. Remove from cart.mp4

04:52

Description

Build modern and responsive websites Tailwind, combined with React. Incl : Animations, Dark mode, Responsive, Theme...

What You'll Learn?

Proficient in Building Responsive UIs
Mastering Utility-First CSS
Real-World Project Experience
Learn Tailwind animations
Learn how to setup a theme and using the tailwind config

Who is this for?

Any developper that want to learn how to get better at CSS and learn modern web development techniques with a famous css framework.

What You Need to Know?

Basic HTML and CSS Knowledge

An experience with React is highly recommended

More details

Description
Welcome to the "Tailwind CSS - The Beginner Guide" the course is designed to make you a confident and self-reliant Tailwind CSS developer in no time!

I believe in delivering results without wasting your time.
Are you ready to unlock the world of modern web design?

With our course, you won't have to commit hours on end.

I'll get straight to the point, teaching you the essentials efficiently.
What You'll Achieve:
Tailwind CSS Proficiency: Discover how to use Tailwind CSS effectively, without drowning in extensive lectures or tedious exercises. We'll get you up to speed quickly.
React Integration Made Easy: Seamlessly integrate Tailwind CSS with React, empowering you to create dynamic, responsive web applications without the unnecessary fluff.
Responsive Magic: Learn to make your websites look exceptional on all devices through streamlined lessons on responsive design principles.
Engaging Animations: Elevate your web design game with captivating animations that are easy to implement, adding that extra "wow" factor to your projects.
Swift Deployment: I'll guide you through deploying your website with no fuss, ensuring you can showcase your creations to the world efficiently.

Hands-On Project: Crafting a Super Nike Website:
Our focus is on results, not duration.

Build a Super Nike-inspired website from the ground up. Create a visually stunning, fully responsive site with captivating animations, all while gaining hands-on experience and confidence.

Each video is associated to a code branch to make it easier for you to follow along.
Finally, as alway, I'll show you what I know in a casual way and I will always answer to your questions !
Who this course is for:
Any developper that want to learn how to get better at CSS and learn modern web development techniques with a famous css framework.

User Reviews

Rating

average 0

Total votes0

Focused display

ENGLISH My name is Robin, I am a French engineer. Most specifically I am FullStack lead developper.I had the chance to work as web architect and lead developer in small and larger companies, in France, Canada and US.I am fond of modern web technologies and I really want to demistify the development. I want people to understand that , you don't need to be a code genius to be a great developer. You just need patience and motivation.I had 7 courses on Udemy France, and I was best seller thanks to my React and Redux course.My method is to move step by step with you, provide simple explanations, schemas and corrections.I try to talk with you in a casual way, like I would with a friend and not with a student.My courses are for all audiences, doesn't matter that you are a super beginner or a super experienced developer ;)--------------------------------------------------FRANCAISJe m'appel Robin, Je suis Ingénieur et plus spécifiquement je suis Lead developpeur full stack. Depuis bientôt 10 ans.J'ai eu la chance de travailler en tant qu'architecte et lead developpeur dans entreprises de toutes tailles, en France, au Canada et aux Etats-Unis.Je suis passionné par les nouvelles techno web et mobiles et je veux vraiment démistifier le developpement en général. Je veux que les gens comprenent qu'il n'y a pas besoin d'être un génie du code ou des maths pour être un super developpeur. Il faut juste de la patience et de la motivation.J'ai pour méthode d'avancer pas à pas et je m'éfforce de fournir des explications simples, d'aller à l'essentiel et de fournir des schémas et des corrections pour accompagner mes explications.Je te parlerai comme on parle a un ami et non pas comme un prof parlerai à un étudiant.Mes cours sont pour tous le monde qu'importe que tu sois un developpeur super experimenté ou grand débutant :)

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.