Tailwind CSS با پروژه

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

مقدمه Introduction

• مقدمه Introduction

مفاهیم اساسی Basic Concepts

• کلاس های پس زمینه و سایه ها Background Classes and Shades

• اندازه عنصر و سیستم شماره گذاری Tailwind Element Sizing & Tailwind's Numbering System

• بالشتک و حاشیه Padding & Margins

• استایل دادن به متن Styling Text

• مرزها و شعاع Borders and Radius

• حالت های نمایش Display Modes

• طراحی واکنشگرا Responsive Design

• کلاس های شبه Pseudo Classes

• انتقال، تبدیل و انیمیشن Transitions, Transforms and Animations

• گرادیان ها Gradients

• سایر ابزارهای کمکی Other Utilities

مفاهیم چیدمان Layout Concepts

• چیدمان و موقعیت یابی Layout and Positioning

• Flexbox Part-1 Flexbox Part-1

• Flexbox Part-2 Flexbox Part-2

• فضای بین ابزارها Space Between Utilities

• چالش گالری بلوک Block Gallery Challenge

• شبکه Grid

ایجاد اجزای سفارشی Creating Custom Components

• جزء اصلی کارت بدون تصویر Basic Card Component with no image

• کارت با تصویر و Card with and image

• کارت افقی و پاسخگو Horizontal and Responsive Card

• دکمه های اصلی Basic Buttons

• دکمه مشخص شده Outlined Button

• گروه بندی شده و با دکمه های آیکون Grouped and with Icon Buttons

• فرم پایه Basic Form

• حداقل فرم ورود Minimal Login Form

• فرم لیبل شناور Floating Label Form

ساخت یک پروژه دوره Building a Course Project

• نصب TailwindCSS Installing TailwindCSS

• در حال استقرار در Netlify Deploying to Netlify

• Tailwind در VS Code Tailwind in VS Code

• افزونه Debug Screen Debug Screen Plugin

هدر/بخش ناوبری Header/Navigation Section

• طرح هدر Header Layout

• سبک ناوبری Navigation Styling

• ناوبری پاسخگو Navigation Responsive

بخش قهرمان Hero Section

• طرح بندی قهرمان Hero Layout

• استایل قهرمان Hero Styling

• دکوراسیون قهرمان Hero Decoration

• Hero Responsive Hero Responsive

بخش درباره من About Me Section

• درباره Layout About Layout

• درباره استایلینگ About Styling

• درباره ریسپانسیو About Responsive

بخش آنچه یاد خواهید گرفت What You'll Learn Section

• آنچه یاد خواهید گرفت Layout What You'll Learn Layout

• آنچه شما سبک طراحی را یاد خواهید گرفت What You'll Learn Styling

• آنچه یاد خواهید گرفت پاسخگو است What You'll Learn Responsive

بخش آنچه می سازید What You'll Build Section

• چیدمان + یک ظاهر طراحی + پاسخگو Layout + Styling + Responsive

بخش قیمت گذاری Pricing Section

• چیدمان قیمت گذاری Pricing Layout

• استایل قیمت گذاری Pricing Styling

• قیمت کلاس سفارشی Pricing Custom Class

• قیمت گذاری پاسخگو Pricing Responsive

بخش لیست ویدیو Video List Section

• چیدمان + یک ظاهر طراحی + پاسخگو Layout + Styling + Responsive

بخش پرسش و پاسخ FAQ Section

• چیدمان + یک ظاهر طراحی + پاسخگو Layout + Styling + Responsive

بخش پاورقی و خبرنامه Footer & Newsletter Section

• چیدمان + یک ظاهر طراحی + پاسخگو Layout + Styling + Responsive

استفاده از Alpine.js در پروژه ما Using Alpine.js in our Project

• ایجاد منوی ما با استفاده از Alpine.js Creating our menu using Alpine.js

تنظیمات پیشرفته Advance Configuration

• سفارشی کردن تم قسمت - 1 Customising Theme Part - 1

• سفارشی کردن تم قسمت - 2 Customising Theme Part - 2

• غیرفعال کردن کل پلاگین اصلی Disabling an entire core plugin