آموزش Tailwind CSS از ابتدا | با ساختن پروژه ها بیاموزید

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

معرفی Introduction

• معرفی Introduction

• معرفی Introduction

• طرح و پروژه های دوره Course Outline & Projects

• لینک های پروژه Project Links

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

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

• تنظیم اولیه محیط Basic Environment Setup

• تنظیم اولیه محیط Basic Environment Setup

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

معرفی Introduction

• طرح و پروژه های دوره Course Outline & Projects

• لینک های پروژه Project Links

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

اصول Tailwind - قسمت 1 Tailwind Fundamentals - Part 1

• Utility-First مثال Utility-First Example

• کار با رنگ ها Working With Colors

• ظرف و فاصله Container & Spacing

• ظرف و فاصله Container & Spacing

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

• عرض ارتفاع Width & Height

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

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

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

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

• مرزها و شعاع مرزی Borders & Border Radius

• فیلترها Filters

• فیلترها Filters

اصول Tailwind - قسمت 1 Tailwind Fundamentals - Part 1

• Utility-First مثال Utility-First Example

• کار با رنگ ها Working With Colors

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

• عرض ارتفاع Width & Height

• مرزها و شعاع مرزی Borders & Border Radius

اصول Tailwind - قسمت 2 Tailwind Fundamentals - Part 2

• تعامل Interactivity

• کلاس های نقطه انفصال و پرسش های رسانه ای Breakpoint Classes & Media Queries

• کلاس های نقطه انفصال و پرسش های رسانه ای Breakpoint Classes & Media Queries

• ستون ها Columns

• فلکس باکس Flexbox

• توری Grid

• انتقال و تبدیل Transition & Transform

• کلاس های انیمیشن و فریم های کلیدی Animation Classes & Keyframes

• کلاس های انیمیشن و فریم های کلیدی Animation Classes & Keyframes

• پیکربندی و سفارشی سازی Config & Customization

• حالت تاریک Dark Mode

اصول Tailwind - قسمت 2 Tailwind Fundamentals - Part 2

• تعامل Interactivity

• ستون ها Columns

• فلکس باکس Flexbox

• توری Grid

• انتقال و تبدیل Transition & Transform

• پیکربندی و سفارشی سازی Config & Customization

• حالت تاریک Dark Mode

یک محیط توسعه بهتر A Better Development Environment

• با Tailwind CLI یک محیط ایجاد کنید Create An Environment With Tailwind CLI

• با Tailwind CLI یک محیط ایجاد کنید Create An Environment With Tailwind CLI

• دستورالعمل ها و توابع Directives & Functions

• دستورالعمل ها و توابع Directives & Functions

• اختیاری - Webpack & PostCSS Environment Optional - Webpack & PostCSS Environment

یک محیط توسعه بهتر A Better Development Environment

• اختیاری - Webpack & PostCSS Environment Optional - Webpack & PostCSS Environment

Tailwind CSS Mini-Projects Tailwind CSS Mini-Projects

• معرفی پروژه های کوچک Mini-Projects Introduction

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

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

• مینی پروژه 2 - شبکه های قیمت گذاری Mini-Project 2 - Pricing Grids

• Mini-Project 3 - Product Modal Mini-Project 3 - Product Modal

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

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

• Mini-Project 5 - Login Modal Mini-Project 5 - Login Modal

• Mini-Project 5 - Login Modal Mini-Project 5 - Login Modal

Tailwind CSS Mini-Projects Tailwind CSS Mini-Projects

• معرفی پروژه های کوچک Mini-Projects Introduction

• مینی پروژه 2 - شبکه های قیمت گذاری Mini-Project 2 - Pricing Grids

• Mini-Project 3 - Product Modal Mini-Project 3 - Product Modal

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

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

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

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

• بخش قهرمان و تصویر پس زمینه Hero Section & Background Image

• 4 - بخش Snippets & Using Directives 4 - Snippets Section & Using Directives

• 4 - بخش Snippets & Using Directives 4 - Snippets Section & Using Directives

• بخش ویژگی ها و موارد Features Section & Items

• بخش سوپرشارژ Supercharge Section

• مراجع و پاورقی References & Footer

• مستقر در Netlify Deploy To Netlify

• مستقر در Netlify Deploy To Netlify

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

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

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

• بخش قهرمان و تصویر پس زمینه Hero Section & Background Image

• بخش ویژگی ها و موارد Features Section & Items

• بخش سوپرشارژ Supercharge Section

• مراجع و پاورقی References & Footer

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

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

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

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

• قهرمان با پیمایش دسکتاپ Hero With Desktop Navigation

• بخش ویژگی Feature Section

• بخش خلاقیت ها با پوشش های گرادیان Creations Section With Gradient Overlays

• پاورقی Footer

• پاورقی Footer

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

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

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

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

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

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

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

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

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

• قهرمان با پیمایش دسکتاپ Hero With Desktop Navigation

• بخش ویژگی Feature Section

• بخش خلاقیت ها با پوشش های گرادیان Creations Section With Gradient Overlays

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

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

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

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

• بخش قهرمان Hero Section

• کوتاه کردن فرم و پیوندها Shorten Form & Links

• کوتاه کردن فرم و پیوندها Shorten Form & Links

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

• جعبه های ویژگی Feature Boxes

• جعبه های ویژگی Feature Boxes

• CTA و پاورقی CTA & Footer

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

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

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

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

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

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

• CTA و پاورقی CTA & Footer

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

پروژه 4 - پروژه شبکه گواهی Project 4 - Testimonial Grid Project

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

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

• جعبه اول FIrst Box

• جعبه های باقی مانده Remaining Boxes

• کلاس های Grid را اضافه کنید Add Grid Classes

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

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

پروژه 4 - پروژه شبکه گواهی Project 4 - Testimonial Grid Project

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

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

• جعبه اول FIrst Box

• جعبه های باقی مانده Remaining Boxes

• کلاس های Grid را اضافه کنید Add Grid Classes

پروژه 5 - وب سایت فایلو با انتخابگر رنگ Project 5 - Fylo Website With Color Picker

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

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

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

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

• بخش قهرمان Hero Section

• ویژگی ها و بخش های تولیدی Features & Productive Sections

• ویژگی ها و بخش های تولیدی Features & Productive Sections

• توصیفات و دسترسی اولیه Testimonials & Early Access

• توصیفات و دسترسی اولیه Testimonials & Early Access

• اسکرول و پاورقی صاف Smooth Scroll & Footer

پروژه 5 - وب سایت فایلو با انتخابگر رنگ Project 5 - Fylo Website With Color Picker

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

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

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

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

• بخش قهرمان Hero Section

• اسکرول و پاورقی صاف Smooth Scroll & Footer

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

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

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

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

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

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

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

• بخش قهرمان Hero Section

• بخش قهرمان Hero Section

• طرح‌بندی برگه‌ها و پنل Tabs & Panel Layout

• طرح‌بندی برگه‌ها و پنل Tabs & Panel Layout

• جاوا اسکریپت برای برگه ها JavaScript For Tabs

• جاوا اسکریپت برای برگه ها JavaScript For Tabs

• دانلود جعبه ها Download Boxes

• دانلود جعبه ها Download Boxes

• سوالات متداول آکاردئون FAQ Accordion

• سوالات متداول آکاردئون FAQ Accordion

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

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

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

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

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

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

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

• بخش قهرمان Hero Section

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

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