Mastering Tailwind Css Ui/Ux With 18 Projects Examples 2024

[BaDshaH]

Published 8/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 4.83 GB | Duration: 8h 56m

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

Homepage

[To see links please register or login]

[To see links please register or login]