English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 79 lectures (9h 9m) | 5.01 GB
Beginner to Mastering Tailwindcss with different professional UI component using Tailwind CSS
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 TailwindCSS, 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.
What you’ll learn
- Start with Tailwind css basics working with paddings, typograhpy, images, animation, transformations and transitions, building great flex and grid layouts
- Tailwindcss 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
Table of Contents
Introduction
1 Introduction
2 Advantage of Tailwind CSS
3 Tailwind Development Environment
4 CLI Installation
5 Tailwind Input – Output CSS
6 Introduction to HTML Emmet
7 Project Files
8 Setting Up Exercise File -01
9 OPTIONAL- Setting Up Exercise File -Advanced
Typography
10 Font Size
11 Font Family
12 Style and Decoration
13 Lines, Color and Style
14 Tailwind Colors
15 Border, Outline, Ring
16 Theme Config
Padding, Margins, Lines
17 Line, Padding, Margins 1
18 Line, Padding, Margins 2
19 Rounded Edge
20 Start End Logic Properties
Sizing, Interactivity, more Typography
21 Sizing – Width & Height
22 Sizing – Width& Height 2
23 Breakpoints
24 Interactivity
25 Shadow
26 Custom CSS Directive
27 More on Typography
28 More on Typography 2
Background and Images
29 Background & Gradient
30 Background Image & Positioning
31 Image Attachement
32 Object Fit & Position
33 Element Positioning
Layout
34 Container
35 Columns
36 Flex Layout 01
37 Flex Layout 02
38 Grid Layout 01
39 Grid Layout 01
40 Grid Layout 02
Transition, Transformation and Animation
41 Filters
42 Backdrop Filters
43 Element Transformation
44 Transitions
45 Animations
46 Custom Animation 01
47 Custom Animation 02 – Advanced
Forms
48 Working With Forms
Advanced Features
49 Plugin Static Functions
50 Add Utilities Theme Function
51 Plugin Dynamic Function
52 External Plugins
53 External Pluggins- Official
54 External Plugin – Flowbite
Projects – Components Designs – 15 Projects Designs
55 Introduction
56 Buttons
57 Avatars
58 Badges
59 Card 01
60 Card 02
61 Card 03
62 Menu
63 Vertical Menu Bar
64 Dark Mode
65 Dropdown Menu
66 Footer
67 Accordion
68 Modal
69 Price List
70 Login Form
Project – Website – 1+ Project Design
71 Top Menu – Salespecks Websites
72 Top Banner – Salespecks Website
73 Top Grid Card – Salespecks Website
74 Technology Section – Salespecks Website
75 Products & Services – Salespecks Website
76 Testimonial Section – Salespecks Website
77 Footer Section – Salespecks Website
Project 03- Chat UI – 2 Projects Designs
78 Contact List – Chat UI
79 Chat Room – Chat UI
Resolve the captcha to access the links!