Mastering Tailwind CSS UI/UX with 18 Project Examples 2024

Focused View

Emmanuel Bakare

8:56:46

0 View

1 - Introduction

1 - Introduction.mp4

01:41

2 - Advantage of Tailwind CSS.mp4

02:46

3 - Tailwind Development Environment.mp4

07:34

4 - CLI Installation.mp4

03:38

5 - Tailwind Input Output CSS.mp4

06:05

6 - Introduction to HTML Emmet.mp4

07:44

7 - Project Files.html

2 - Typography

8 - Font Size.mp4

01:59

9 - Font Family.mp4

02:58

10 - Style and Decoration.mp4

05:41

11 - Lines Color and Style.mp4

04:10

12 - Tailwind Colors.mp4

05:59

13 - Border Outline Ring.mp4

03:07

14 - Theme Config.mp4

08:04

3 - Padding Margins Lines

15 - Line Padding Margins 1.mp4

06:29

16 - Line Padding Margins 2.mp4

04:29

17 - Rounded Edge.mp4

03:18

18 - Start End Logic Properties.mp4

02:48

4 - Sizing Interactivity more Typography

19 - Sizing Width Height.mp4

07:10

20 - Sizing Width Height 2.mp4

05:52

21 - Breakpoints.mp4

03:15

22 - Interactivity.mp4

06:47

23 - Shadow.mp4

03:20

24 - Custom CSS Directive.mp4

07:50

25 - More on Typography.mp4

06:07

26 - More on Typography 2.mp4

07:09

5 - Background and Images

27 - Background Gradient.mp4

05:50

28 - Background Image Positioning.mp4

05:43

29 - Image Attachement.mp4

02:35

30 - Object Fit Position.mp4

03:04

31 - Element Positioning.mp4

05:45

6 - Layout

32 - Container.mp4

02:29

33 - Columns.mp4

01:33

34 - Flex Layout 01.mp4

10:31

35 - Flex Layout 02.mp4

09:30

36 - Grid Layout 01.mp4

06:44

37 - Grid Layout 01.mp4

06:44

38 - Grid Layout 02.mp4

10:19

7 - Transition Transformation and Animation

39 - Filters.mp4

07:10

40 - Backdrop Filters.mp4

04:56

41 - Element Transformation.mp4

06:42

42 - Transitions.mp4

07:50

43 - Animations.mp4

01:22

44 - Custom Animation 01.mp4

04:46

45 - Custom Animation 02 Advanced.mp4

06:09

8 - Forms

46 - Working With Forms.mp4

09:24

9 - Advanced Features

47 - Plugin Static Functions.mp4

03:55

48 - Add Utilities Theme Function.mp4

05:18

49 - Plugin Dynamic Function.mp4

05:40

50 - External Plugins.mp4

02:14

51 - External Pluggins Official.mp4

01:52

52 - External Plugin Flowbite.mp4

03:04

10 - Projects 01 Components Designs

53 - Introduction.mp4

03:42

54 - Buttons.mp4

11:37

55 - Avatars.mp4

06:58

56 - Badges.mp4

10:23

57 - Card 01.mp4

04:55

58 - Card 02.mp4

11:19

59 - Card 03.mp4

21:20

60 - Menu.mp4

17:51

61 - Vertical Menu Bar.mp4

20:15

62 - Dark Mode.mp4

08:13

63 - Dropdown Menu.mp4

10:30

64 - Footer.mp4

14:26

65 - Accordion.mp4

10:33

66 - Modal.mp4

08:41

67 - Price List.mp4

18:33

68 - Login Form.mp4

12:12

11 - Project 02 Website

69 - Top Menu Salespecks Websites.mp4

06:57

70 - Top Banner Salespecks Website.mp4

05:31

71 - Top Grid Card Salespecks Website.mp4

06:53

72 - Technology Section Salespecks Website.mp4

05:06

73 - Products Services Salespecks Website.mp4

07:07

74 - Testimonial Section Salespecks Website.mp4

08:37

75 - Footer Section Salespecks Website.mp4

03:36

12 - Project 03 Chat UI

76 - Contact List Chat UI.mp4

19:55

77 - Chat Room Chat UI.mp4

14:27

Description

Beginner to Mastering Tailwind with different professional UI component using Tailwind CSS

What You'll Learn?

Start with Tailwind basics working with paddings, typograhpy, images, animation, transformations and transitions, building great flex and grid layouts
Design buttons, avatars, badges, cards, menu system, vertical bar,design website modes,dropdown menu, footer, accordion, modal
Design a full website project, price list, login forms, Chat UI etc
Add advanced features with javascript, internal and external plugins and many more

Who is this for?

Beginner to Advanced UI and website designers

What You Need to Know?

Little or no CSS experience required

More details

Description
Tailwind CSS is a highly popular utility-first CSS framework that has revolutionized the way web developers approach front-end design. In this comprehensive Udemy course, you'll dive deep into the world of Tailwind CSS, learning how to leverage its powerful features to create stunning and responsive user interfaces.
Throughout the course, you'll start with the basics of Tailwind CSS, exploring its classes and understanding how to work with paddings, typography, images, animations, transformations, and transitions. You'll then progress to building more advanced components, such as buttons, avatars, badges, cards, menu systems, vertical bars, and dropdown menus. Additionally, you'll learn how to design website modes, footers, accordions, and modals, all while keeping the focus on creating visually appealing and user-friendly designs.
One of the highlights of this course is the implementation of real-world projects. You'll follow along as the instructor guides you through the development of a full website project, a price list, login forms,Â chat UI and many more. These practical exercises will not only reinforce your understanding of Tailwind CSS but also equip you with the skills to apply what you've learned in your own projects.
By the end of this course, you'll be a confident Tailwind CSS user, capable of designing and building responsive, visually stunning websites and web applications. Whether you're a beginner or an experienced web developer, this course is designed to take your front-end development skills to new heights.
Who this course is for:
Beginner to Advanced UI and website designers

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Emmanuel Bakare

Instructor's Courses

With a computer science decree, I have been programming for Over 2 decades using Java, PHP, Python, Django, Vuem Quasar, Database Administration, Project Management, Business Process development, Software Architect, LMS, CMS, Videography, Learning content creation and much more. I have worked for the Oil and Gas, Telecommucation organization during these years with vast experience in implementing different solutions. This is an opportunity to throw out my technical know how for the benefit of up coming great developers the world is yet to know.

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.