Tailwind CSS از ابتدا - آموزش با ساختن پروژه ها [ویدئو]

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

معرفی Introduction

• معرفی Introduction

• معرفی Introduction

• طرح کلی دوره و پروژه ها Course Outline and Projects

• طرح کلی دوره و پروژه ها Course Outline and Projects

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• فیلترها Filters

• فیلترها Filters

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

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

• تعامل Interactivity

• تعامل Interactivity

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

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

• ستون ها Columns

• ستون ها Columns

• فلکس باکس Flexbox

• فلکس باکس Flexbox

• توری Grid

• توری Grid

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

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

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

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

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

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

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

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

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

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

• با Tailwind CLI یک محیط ایجاد کنید Create an Environment with Tailwind CLI

• با Tailwind CLI یک محیط ایجاد کنید Create an Environment with Tailwind CLI

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

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

• Webpack و PostCSS Environment Webpack and PostCSS Environment

• Webpack و PostCSS Environment Webpack and PostCSS Environment

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

Tailwind CSS Mini Projects Tailwind CSS Mini Projects

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

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

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

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

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

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

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

• 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• در Netlify مستقر شوید Deploy to Netlify

• در Netlify مستقر شوید Deploy to Netlify

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

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

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

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

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

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

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

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

• بخش ویژگی Feature Section

• بخش ویژگی Feature Section

• بخش Creations with Gradient Overlays Creations Section with Gradient Overlays

• بخش Creations with Gradient Overlays Creations Section with Gradient Overlays

• پاورقی Footer

• پاورقی Footer

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

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

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

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

• به Vercel مستقر شوید Deploy to Vercel

• به Vercel مستقر شوید Deploy to Vercel

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• جعبه اول First Box

• جعبه اول First Box

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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