Tailwind CSS Tutorial - Beginner to Expert Course.
Enroll to get access to the full course and certificate of completion:
https://www.udemy.com/course/tailwind-css-from-beginner-to-expert-tutorial-and-projects/?referralCode=73A63B176D653FB0D112
Course materials: https://github.com/toyosiola/YT-Tailwind-CSS-Course
Are you looking to master Tailwind CSS and build beautiful and modern websites with ease? This course is designed for anyone who wants to learn Tailwind CSS from scratch to advance level. Tailwind CSS is a popular utility-first framework that helps you create responsive, customizable, and clean designs without writing long custom CSS.
In this course, you will start with the basics of Tailwind CSS, learning how to set up your environment and understand its utility-first approach. You’ll explore how to use utility classes to create responsive layouts quickly, without needing complex CSS. As you progress, you'll learn to create custom themes, giving your projects a unique and consistent look. We'll also go into advanced topics like customizing Tailwind for specific needs.
In addition to learning Tailwind CSS, this course also emphasizes practical learning by building real-world projects, including several mini-projects, landing page, and e-commerce websites. By the end of this course, you will have the skills to build beautiful, responsive, and professional websites using Tailwind CSS, making you confident to tackle any web development project.
#tailwindcss #tailwind #tailwindcourse #tailwindtutorial #coding_atlas #webdevelopment #webdeveloper #softwaredeveloper #softwaredevelopment #coding #codingtutorial #softwareengineer #softwareengineering #html #css
Chapters:
00:00:00 Intro
00:02:08 Course contents and Projects
00:11:22 Overview of Tailwind CSS
00:16:59 Setting up Development Environment
00:26:09 VS Code Settings
00:28:34 Tailwind Playgound
00:32:03 Tailwind CDN
00:36:37 Installing Tailwind CLI
00:45:44 Setting up "dev" script
00:48:39 Understanding Utility-First
00:55:00 Font Family
01:03:59 Font Sizes
01:13:19 Line Height
01:20:26 Font Weight
01:23:42 Text Alignment
01:26:44 Font Color
01:33:32 Text Decoration
01:40:04 List Style
01:47:19 Utilities Customization
01:49:27 Tailwind Spacing
01:54:02 Padding
01:59:15 Margin
02:01:33 Space Between
02:06:27 Width
02:09:58 Min-width
02:12:08 Max-width
02:18:19 Height, Min-height, Max-height
02:24:43 Size
02:27:48 Background
02:43:03 Border
02:52:19 Divide
02:58:35 Outline
03:02:59 States: Intro
03:11:09 States: Hover, Focus, Active, Disabled
03:15:24 group Keyword - Parent State
03:23:24 peer Keyword - Sibling State
03:30:34 * Direct Children Modifier
03:35:09 Responsive Designs
03:47:33 Other Tailwind CSS Modifiers
03:49:55 Dark Mode
03:57:25 Display
04:04:26 Positioning
04:11:22 Container
04:16:59 Flex box
04:43:51 Grid
05:00:52 Column and Row Span
05:08:48 Box Shadow
05:15:08 Opacity
05:19:05 Filters
05:23:16 Transform
05:35:48 Transition
05:44:02 Animations
05:54:51 Tailwind Directives
06:24:14 Tailwind Functions
06:31:15 Preflight
06:37:17 Mini-projects: Overview and Setup
06:45:25 Responsive Card - Mini-project 1
06:54:14 Pricing Plans - Mini-project 2
07:12:12 Prettier Plugin
07:17:08 Image Gallery - Mini-project 3
07:36:21 Registration Form - Mini-project 4
07:59:47 Feature Comparison Table - Mini-project 5
08:15:05 Roundup and Full Course