Mastering Tailwind Css Ui/Ux With 18 Projects Examples 2024

Design 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

Requirements

Little or no CSS experience required

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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Advantage of Tailwind CSS

Lecture 3 Tailwind Development Environment

Lecture 4 CLI Installation

Lecture 5 Tailwind Input - Output CSS

Lecture 6 Introduction to HTML Emmet

Lecture 7 Project Files

Section 2: Typography

Lecture 8 Font Size

Lecture 9 Font Family

Lecture 10 Style and Decoration

Lecture 11 Lines, Color and Style

Lecture 12 Tailwind Colors

Lecture 13 Border, Outline, Ring

Lecture 14 Theme Config

Section 3: Padding, Margins, Lines

Lecture 15 Line, Padding, Margins 1

Lecture 16 Line, Padding, Margins 2

Lecture 17 Rounded Edge

Lecture 18 Start End Logic Properties

Section 4: Sizing, Interactivity, more Typography

Lecture 19 Sizing - Width & Height

Lecture 20 Sizing - Width& Height 2

Lecture 21 Breakpoints

Lecture 22 Interactivity

Lecture 23 Shadow

Lecture 24 Custom CSS Directive

Lecture 25 More on Typography

Lecture 26 More on Typography 2

Section 5: Background and Images

Lecture 27 Background & Gradient

Lecture 28 Background Image & Positioning

Lecture 29 Image Attachement

Lecture 30 Object Fit & Position

Lecture 31 Element Positioning

Section 6: Layout

Lecture 32 Container

Lecture 33 Columns

Lecture 34 Flex Layout 01

Lecture 35 Flex Layout 02

Lecture 36 Grid Layout 01

Lecture 37 Grid Layout 01

Lecture 38 Grid Layout 02

Section 7: Transition, Transformation and Animation

Lecture 39 Filters

Lecture 40 Backdrop Filters

Lecture 41 Element Transformation

Lecture 42 Transitions

Lecture 43 Animations

Lecture 44 Custom Animation 01

Lecture 45 Custom Animation 02 - Advanced

Section 8: Forms

Lecture 46 Working With Forms

Section 9: Advanced Features

Lecture 47 Plugin Static Functions

Lecture 48 Add Utilities Theme Function

Lecture 49 Plugin Dynamic Function

Lecture 50 External Plugins

Lecture 51 External Pluggins- Official

Lecture 52 External Plugin - Flowbite

Section 10: Projects 01 - Components Designs

Lecture 53 Introduction

Lecture 54 Buttons

Lecture 55 Avatars

Lecture 56 Badges

Lecture 57 Card 01

Lecture 58 Card 02

Lecture 59 Card 03

Lecture 60 Menu

Lecture 61 Vertical Menu Bar

Lecture 62 Dark Mode

Lecture 63 Dropdown Menu

Lecture 64 Footer

Lecture 65 Accordion

Lecture 66 Modal

Lecture 67 Price List

Lecture 68 Login Form

Section 11: Project 02 - Website

Lecture 69 Top Menu - Salespecks Websites

Lecture 70 Top Banner - Salespecks Website

Lecture 71 Top Grid Card - Salespecks Website

Lecture 72 Technology Section - Salespecks Website

Lecture 73 Products & Services - Salespecks Website

Lecture 74 Testimonial Section - Salespecks Website

Lecture 75 Footer Section - Salespecks Website

Section 12: Project 03- Chat UI

Lecture 76 Contact List - Chat UI

Lecture 77 Chat Room - Chat UI

Beginner to Advanced UI and website designers