آموزش جامع Tailwind CSS: طراحی مدرن رابط کاربری و چیدمان‌های واکنش‌گرا - آخرین آپدیت

مبانی و راه‌اندازی Tailwind CSS Tailwind CSS Fundamentals & Setup

• مقدمه دوره Course Introduction

• Tailwind CSS چیست؟ What is Tailwind CSS?

• مبانی Tailwind CSS Tailwind CSS Basics

• نمایش عملی: نصب و ادغام Tailwind CSS در HTML Demo: Installing and Integrating Tailwind CSS in HTML

• دکمه‌ها، تایپوگرافی و کلاس‌های کمکی (متن، رنگ، حاشیه) Buttons, Typography & Utility Classes (Text, Colors, Borders)

• سیستم فاصله‌گذاری، تراز کردن (مرکزسازی Flexbox) و ابزارهای واکنش‌گرا Spacing System, Alignment (Flexbox Centering) & Responsive Utilities

• نمایش عملی: پیاده‌سازی چیدمان Grid (ستون‌ها، فاصله و استایل آیتم‌ها) Demo: Grid Layout Implementation (Columns, Gap, Item Styling)

• حاشیه‌ها، شعاع حاشیه (Border Radius) و سایه‌ها در Tailwind CSS Borders, Border Radius, and Shadows in Tailwind CSS

• استایل‌دهی سفارشی در Tailwind CSS Custom Styling in Tailwind CSS

ماژول ۲: پیاده‌سازی پورتفولیو با Tailwind Module 2: Tailwind Portfolio Implementation

• نمایش عملی: نصب Node.js، NPM و شروع پروژه Demo: Installing Node.js, NPM & Project Initialization

• نمایش عملی: راه‌اندازی Tailwind، فرآیند Build (حالت Watch) و تست تنظیمات Demo: Tailwind Setup, Build Process (Watch Mode) & Testing Setup

• نمایش عملی: افزودن طراحی وب‌سایت پورتفولیو به پروژه Demo: Adding Portfolio Website Design to the Project

• مبانی هدر (تایپوگرافی، رنگ‌ها، کانتینر و چیدمان) Header Basics (Typography, Colors, Container & Layout)

• ناوبری، فاصله‌گذاری، منوی موبایل و رفتار واکنش‌گرا Navigation, Spacing, Mobile Menu & Responsive Behavior

• وب‌سایت پورتفولیو: طراحی بخش Hero Portfolio Website: Hero Section Design

• نمایش عملی: فاصله‌گذاری بخش‌ها، کلاس‌های کمکی Tailwind (px, py, mx) و تنظیم چیدمان Demo: Section Spacing, Tailwind Utility Classes (px, py, mx) & Layout Setup

• چیدمان Flex واکنش‌گرا، اندازه تصاویر و تراز متن (Breakpoint md) Responsive Flex Layout, Image Sizing & Text Alignment (md breakpoint)

• وب‌سایت پورتفولیو: طراحی بخش مهارت‌ها با استفاده از Tailwind CSS Portfolio Website: Skills Section Design using Tailwind CSS

• نمایش عملی: تنظیم چیدمان Grid (کانتینر، ستون‌های گرید، فاصله‌ها و واکنش‌گرایی) Demo: Grid Layout Setup (Container, Grid Columns, Spacing & Responsiveness)

• استایل‌دهی کارت‌ها، افکت‌های Hover، Transition و طراحی تصویر/دکمه Card Styling, Hover Effects, Transitions & Image/Button Design

• وب‌سایت پورتفولیو: طراحی بخش تماس با ما با استفاده از Tailwind CSS Portfolio Website: Contact Section Design using Tailwind CSS

• وب‌سایت پورتفولیو: طراحی فوتر با استفاده از Tailwind CSS Portfolio Website: Footer Design using Tailwind CSS

• خلاصه دوره Course Summary