آموزش جامع Tailwind CSS از صفر تا صد - یادگیری پروژه محور - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

• سرفصل‌های دوره و پروژه‌ها Course Outline and Projects

• Tailwind CSS چیست؟ What Is Tailwind CSS

• راه‌اندازی اولیه محیط Basic Environment Setup

• راه‌اندازی Tailwind Sandbox Tailwind Sandbox Setup

مبانی Tailwind - بخش اول Tailwind Fundamentals - Part 1

• مثالی از رویکرد Utility-First Utility-First Example

• کار با رنگ‌ها Working with Colors

• کانتینر و فاصله‌گذاری (Spacing) Container and Spacing

• تایپوگرافی Typography

• عرض و ارتفاع Width and Height

• چیدمان و موقعیت (Layout & Position) Layout and Position

• پس‌زمینه‌ها و سایه‌ها Backgrounds and Shadows

• حاشیه‌ها و شعاع حاشیه (Border Radius) Borders and Border Radius

• فیلترها Filters

مبانی Tailwind - بخش دوم Tailwind Fundamentals - Part 2

• تعاملی کردن المان‌ها Interactivity

• کلاس‌های Breakpoint و Media Queries Breakpoint Classes and Media Queries

• ستون‌ها Columns

• Flexbox Flexbox

• Grid Grid

• انتقال و تغییر شکل (Transition & Transform) Transition and Transform

• کلاس‌های انیمیشن و Keyframes Animation Classes and Keyframes

• پیکربندی و شخصی‌سازی (Config) Config and Customization

• حالت تیره (Dark Mode) Dark Mode

بهبود محیط توسعه Better Development Environment

• ایجاد محیط توسعه با Tailwind CLI Create an Environment with Tailwind CLI

• دستورات (Directives) و توابع Directives and Functions

• محیط Webpack و PostCSS Webpack and PostCSS Environment

مینی پروژه‌های Tailwind CSS Tailwind CSS Mini Projects

• مقدمه مینی پروژه‌ها Mini Projects Introduction

• مینی پروژه اول - کارت عضویت در ایمیل Mini-Project 1 - Email Subscribe Card

• مینی پروژه دوم - جدول قیمت‌گذاری Mini-Project 2 - Pricing Grids

• مینی پروژه سوم - مودال محصول Mini-Project 3 - Product Modal

• مینی پروژه چهارم - گالری تصاویر Mini-Project 4 - Image Gallery

• مینی پروژه پنجم - مودال ورود Mini-Project 5 - Login Modal

پروژه اول - وب‌سایت Clipboard Project 1 - Clipboard Website

• معرفی پروژه Project Introduction

• راه‌اندازی و پیکربندی Setup and Config

• بخش Hero و تصویر پس‌زمینه Hero Section and Background Image

• بخش Snippets و استفاده از Directives 4 - Snippets Section and Using Directives

• بخش ویژگی‌ها و آیتم‌ها Features Section and Items

• بخش Supercharge Supercharge Section

• منابع و فوتر References and Footer

• استقرار در Netlify Deploy to Netlify

پروژه دوم - وب‌سایت Loopstudios Project 2 - Loopstudios Website

• معرفی پروژه Project Introduction

• راه‌اندازی و پیکربندی Setup and Config

• بخش Hero با ناوبری دسکتاپ Hero with Desktop Navigation

• بخش ویژگی‌ها Feature Section

• بخش آثار با لایه‌های گرادینت Creations Section with Gradient Overlays

• فوتر Footer

• دکمه همبرگری و انیمیشن Hamburger Button and Animation

• منوی موبایل و جاوااسکریپت Mobile Menu and JavaScript

• استقرار در Vercel Deploy to Vercel

پروژه سوم - وب‌سایت Shortly Project 3 - Shortly Website

• معرفی پروژه Project Introduction

• راه‌اندازی و پیکربندی Setup and Config

• نوار ناوبری (Navbar) Navbar

• بخش Hero Hero Section

• فرم کوتاه‌کننده و لینک‌ها Shorten Form and Links

• اعتبارسنجی لینک با جاوااسکریپت JavaScript Link Validation

• باکس‌های ویژگی‌ها Feature Boxes

• بخش CTA و فوتر CTA and Footer

• منوی موبایل Mobile Menu

پروژه چهارم - پروژه Testimonial Grid Project 4 - Testimonial Grid Project

• معرفی پروژه Project Introduction

• راه‌اندازی و پیکربندی Setup and Config

• باکس اول First Box

• سایر باکس‌ها Remaining Boxes

• افزودن کلاس‌های Grid Add Grid Classes

• پلاگین Line Clamp Line Clamp Plugin

پروژه پنجم - وب‌سایت Fylo با انتخابگر رنگ Project 5 - Fylo Website with Color Picker

• معرفی پروژه Project Introduction

• راه‌اندازی و پیکربندی Setup and Config

• هدر و دکمه حالت تیره Header and Dark Mode Button

• جاوااسکریپت برای تغییر حالت رنگ JavaScript for Color Mode

• بخش Hero Hero Section

• بخش ویژگی‌ها و بهره‌وری Features and Productive Sections

• نظرات کاربران و دسترسی زودهنگام Testimonials and Early Access

• اسکرول نرم و فوتر Smooth Scroll and Footer

پروژه ششم - وب‌سایت مدیریت بوک‌مارک Project 6 - Bookmark Manager Website

• معرفی پروژه Project Introduction

• راه‌اندازی و پیکربندی Setup and Config

• نوار ناوبری Navbar

• بخش Hero Hero Section

• تب‌ها و لایه‌بندی پنل Tabs and Panel Layout

• جاوااسکریپت برای تب‌ها JavaScript for Tabs

• باکس‌های دانلود Download Boxes

• آکاردئون FAQ FAQ Accordion

• خبرنامه و فوتر Newsletter and Footer

• منوی موبایل Mobile Menu