آموزش Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2024

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

معرفی Introduction

• مهم! قبل از شروع این دوره این را بخوانید Important! Read this before you begin this course

• معرفی Introduction

• راه اندازی ویرایشگر Editor setup

• رتبه بندی و بررسی Udemy Udemy ratings & reviews

• راه اندازی پروژه و نمای کلی css tailwind Project setup & tailwind css overview

ساخت نوار ناوبری Building the navbar

• نوار ناوبری و لوگو را ایجاد کنید (با فاصله، فلکس باکس و گرادیان) Create the navbar and logo (with spacing, flexbox, and gradients)

• فونت های گوگل را در پروژه tailwind اعمال کنید Apply Google Fonts to tailwind project

• اولین آیتم منو را ایجاد کنید، کلاس‌ها را در شناور اضافه کنید و انتقال‌ها را اضافه کنید Create the first menu item, add classes on hover, & add transitions

• آیتم های منو، تکنیک های ویرایش، و اجزای tailwind css را تمام کنید Finish the menu items, editing techniques, & tailwind css components

• آیتم های منوی فرعی را ایجاد کنید و از عملکرد گروه tailwind css استفاده کنید Create the sub menu items & use tailwind css group functionality

• نماد منوی موبایل را ایجاد کنید Create the mobile menu icon

• نماد منوی تلفن همراه را متحرک کنید و افزونه نوع سفارشی را با "addVariant" ایجاد کنید Animate mobile menu icon & create custom variant plugin with "addVariant"

• نوع باز سفارشی tailwind css را گسترش دهید و عملکرد منوی تلفن همراه را اجرا کنید Extend tailwind css custom open variant & implement mobile menu functionality

• منوی فرعی موبایل را با گروه سفارشی نوع باز tailwind پیاده سازی کنید Implement mobile sub menu with custom group open tailwind variant

ساخت بخش قهرمان Building the Hero section

• بخش Hero و تصویر پس زمینه را ایجاد کنید Create the Hero section and background image

• محتوای قهرمان را اضافه کنید Add the hero content

• انیمیشن لوگوی شکل موج را ایجاد کنید Create the waveform logo animation

• ایجاد پلاگین تاخیری انیمیشن سفارشی tailwind css با "matchUtilities" Create custom animation delay tailwind css plugin with "matchUtilities"

ساخت بخش سرفصل ها و چرخ فلک Building the headliners section & carousel

• سبک های پایه پیش فرض برای سرفصل ها Default base styles for headings

• یک چرخ فلک قابل پیمایش و snappable در tailwind css ایجاد کنید Create a scrollable & snappable carousel in tailwind css

• اضافه کردن فلش های چپ و راست به چرخ فلک Adding left and right arrows to the carousel

حالت روشن و تاریک Light and dark mode

• اجرای حالت روشن و تاریک بر اساس تنظیمات ماشین محلی کاربر Implement light and dark mode based on user's local machine settings

• tailwind css light & dark mode را با دکمه جابجایی اجرا کنید Implement tailwind css light & dark mode with toggle button

ساخت بخش‌های جدول زمانی بلیط‌ها و خط‌آپ Building the tickets & lineup timeline sections

• جدول بلیط و افزونه tailwind سفارشی را با "addUtilities" ایجاد کنید Create the tickets table & custom tailwind plugin with "addUtilities"

• خط زمانی خط را شروع کنید (با گرادیان های پس زمینه پیشرفته در tailwind) Start the lineup timeline (with advanced background gradients in tailwind)

• جدول زمانی ترکیب را تمام کنید Finish the lineup timeline

• پلاگین های پیشرفته tailwind css و ایجاد افزونه مؤلفه دکمه پویا Advanced tailwind css plugins & creating dynamic button component plugin

مستقر کنید Deploy

• کد را در github آپلود و در vercel مستقر کنید Upload code to github and deploy to vercel

• جایزه! BONUS!