آموزش Tailwind CSS: روشی مدرن برای ساخت وب سایت با استفاده از CSS

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

مقدمه ای بر دوره آموزشی و نصب ابزارهای مورد نیاز Introduction To Course & Installing Required Tools

• معرفی دوره Course Introduction

• معرفی دوره Course Introduction

• مقدمه ای بر Tailwind Introduction To Tailwind

• در حال نصب Node Installing Node

• در حال نصب Node Installing Node

• نصب VS Code Installing VS Code

• منابع قابل دانلود Downloadable Resources

• منابع قابل دانلود Downloadable Resources

مقدمه ای بر دوره آموزشی و نصب ابزارهای مورد نیاز Introduction To Course & Installing Required Tools

• مقدمه ای بر Tailwind Introduction To Tailwind

• نصب VS Code Installing VS Code

اصول اولیه باد دم Tailwind Basics

• راه اندازی یک پروژه Tailwind Setting Up A Tailwind Project

• راه اندازی یک پروژه Tailwind Setting Up A Tailwind Project

• پیوست کردن Tailwind CSS با HTML Attaching Tailwind CSS With HTML

• پیوست کردن Tailwind CSS با HTML Attaching Tailwind CSS With HTML

• ایجاد کانتینر با کلاس های کاربردی Creating Containers With Utility Classes

• ایجاد کانتینر با کلاس های کاربردی Creating Containers With Utility Classes

• افزودن ویژگی های عرض و ارتفاع به عناصر Adding Width & Height Properties To Elements

• افزودن ویژگی های عرض و ارتفاع به عناصر Adding Width & Height Properties To Elements

• درک نحوه عملکرد Flexbox در Tailwind Understanding How Flexbox Works In Tailwind

• بسته بندی اقلام فلکس Wrapping Flex Items

• بسته بندی اقلام فلکس Wrapping Flex Items

• رشد و کوچک کردن اقلام فلکس Making Flex Items Grow & Shrink

• رشد و کوچک کردن اقلام فلکس Making Flex Items Grow & Shrink

• ایجاد طرح بندی شبکه ای Creating A Grid Layout

• ایجاد طرح بندی شبکه ای Creating A Grid Layout

• ایجاد طرح بندی ردیف Creating A Row Layout

• ایجاد طرح بندی ردیف Creating A Row Layout

• تنظیم جریان عناصر در طرح بندی شبکه Adjusting Flow Of Elements In Grid Layout

• تنظیم جریان عناصر در طرح بندی شبکه Adjusting Flow Of Elements In Grid Layout

• افزودن شکاف بین و توجیه موارد Adding Gap Between & Justifying Items

• افزودن شکاف بین و توجیه موارد Adding Gap Between & Justifying Items

• موارد فردی را توجیه کنید Justify Individual Items

• موارد فردی را توجیه کنید Justify Individual Items

• اضافه کردن Padding & Margin به عناصر Adding Padding & Margin To Elements

• تایپوگرافی: استایل دادن به متن با استفاده از کلاس های کاربردی Tailwind Typography: Styling Text Using Tailwind Utility Classes

• تایپوگرافی: استایل دادن به متن با استفاده از کلاس های کاربردی Tailwind Typography: Styling Text Using Tailwind Utility Classes

• افزودن شعاع مرزی به عناصر Adding Border Radius To Elements

• یک ظاهر طراحی شده مرزها Styling Borders

• اضافه کردن سایه ها به Elemetns Adding Shadows To Elemetns

• استفاده از نقاط شکست برای افزودن رفتار پاسخگو Using Breakpoints To Add Responsive Behaviour

• استفاده از نقاط شکست برای افزودن رفتار پاسخگو Using Breakpoints To Add Responsive Behaviour

• درک و استفاده از انتخابگرهای کاذب Understanding & Using Pseudo Selectors

• درک و استفاده از انتخابگرهای کاذب Understanding & Using Pseudo Selectors

• Layer & Apply Directives Layer & Apply Directives

• استفاده مجدد از کد با استفاده از کامپوننت ها Code Reuse By Using Components

• درک نحوه کار کلاس های Utility در Tailwind Understanding How Utility Classes Work In Tailwind

• درک نحوه کار کلاس های Utility در Tailwind Understanding How Utility Classes Work In Tailwind

• چگونه Apply Directive کار می کند How Apply Directive Works

• چگونه Apply Directive کار می کند How Apply Directive Works

• درک دستورالعمل لایه Understanding Layer Directive

اصول اولیه باد دم Tailwind Basics

• درک نحوه عملکرد Flexbox در Tailwind Understanding How Flexbox Works In Tailwind

• اضافه کردن Padding & Margin به عناصر Adding Padding & Margin To Elements

• افزودن شعاع مرزی به عناصر Adding Border Radius To Elements

• یک ظاهر طراحی شده مرزها Styling Borders

• اضافه کردن سایه ها به Elemetns Adding Shadows To Elemetns

• Layer & Apply Directives Layer & Apply Directives

• استفاده مجدد از کد با استفاده از کامپوننت ها Code Reuse By Using Components

• درک دستورالعمل لایه Understanding Layer Directive

ساخت پورتال املاک و مستغلات با Tailwind Building A Real Estate Portal With Tailwind

• پورتال فهرست املاک: بررسی اجمالی پروژه Real Estate Listing Portal: Project Overview

• طراحی ناوبری قسمت 1 Designing Navigation Part 1

• طراحی ناوبری قسمت 2 Designing Navigation Part 2

• طراحی ناوبری قسمت 2 Designing Navigation Part 2

• طراحی ناوبری قسمت 3 Designing Navigation Part 3

• طراحی بنر قسمت 1 Designing Banner Part 1

• طراحی بنر قسمت 2 Designing Banner Part 2

• طراحی بنر قسمت 2 Designing Banner Part 2

• رفع مشکل تراز Fixing Alignment Issue

• کارت قسمت 1 Card Part 1

• کارت قسمت 2 Card Part 2

• کارت قسمت 2 Card Part 2

• کارت قسمت 3 Card Part 3

• بنر سایت Site Banner

• بنر سایت Site Banner

• اضافه کردن یک کارت دیگر Adding Another Card

• اضافه کردن یک بنر دیگر Adding Another Banner

• اضافه کردن یک بنر دیگر Adding Another Banner

• توصیفات مشتری Client Testimonials

• فرم تماس با بخش 1 Contact Form Part 1

• فرم تماس قسمت 2 Contact Form Part 2

• شکل کوچک شدن Shrinking Form

• ایجاد عنوان پاورقی Creating Footer Heading

• ایجاد عنوان پاورقی Creating Footer Heading

• ایجاد منوی پاورقی قسمت 1 Creating Footer Menu Part 1

• ایجاد منوی پاورقی قسمت 1 Creating Footer Menu Part 1

• ایجاد منوی پاورقی قسمت 2 Creating Footer Menu Part 2

• ایجاد منوی پاورقی قسمت 3 Creating Footer Menu Part 3

• ایجاد منوی پاورقی قسمت 3 Creating Footer Menu Part 3

• افزودن لمس نهایی Adding Final Touches

ساخت پورتال املاک و مستغلات با Tailwind Building A Real Estate Portal With Tailwind

• پورتال فهرست املاک: بررسی اجمالی پروژه Real Estate Listing Portal: Project Overview

• طراحی ناوبری قسمت 1 Designing Navigation Part 1

• طراحی ناوبری قسمت 3 Designing Navigation Part 3

• طراحی بنر قسمت 1 Designing Banner Part 1

• رفع مشکل تراز Fixing Alignment Issue

• کارت قسمت 1 Card Part 1

• کارت قسمت 3 Card Part 3

• اضافه کردن یک کارت دیگر Adding Another Card

• توصیفات مشتری Client Testimonials

• فرم تماس با بخش 1 Contact Form Part 1

• فرم تماس قسمت 2 Contact Form Part 2

• شکل کوچک شدن Shrinking Form

• ایجاد منوی پاورقی قسمت 2 Creating Footer Menu Part 2

• افزودن لمس نهایی Adding Final Touches

ساخت داشبورد مدیریت با Tailwind Building Admin Dashboard With Tailwind

• راه اندازی پروژه Setting Up The Project

• اضافه کردن لوگو Adding Logo

• اضافه کردن لوگو Adding Logo

• طراحی Navbar Designing Navbar

• طراحی منوی بالا قسمت 1 Designing Top Menu Part 1

• طراحی منوی بالا قسمت 1 Designing Top Menu Part 1

• طراحی منوی بالا قسمت 2 Designing Top Menu Part 2

• افزودن بنر سایت Adding Site Banner

• افزودن بنر سایت Adding Site Banner

• ایجاد کانتینر کارت Creating Cards Container

• ایجاد کانتینر کارت Creating Cards Container

• اضافه کردن محتوای کارت Adding Card Content

• اضافه کردن نمودارها Adding Charts

• اضافه کردن نمودارهای بیشتر Adding More Charts

• اضافه کردن نمودارهای بیشتر Adding More Charts

• رفع مشکل Nav Fixing Nav Issue

• ظرف کارت Cards Container

• اضافه کردن نمودار به کارت Adding Chart To Card

• اضافه کردن نمودار به کارت Adding Chart To Card

• اضافه کردن سربرگ جدول Adding Table Header

• اضافه کردن سربرگ جدول Adding Table Header

• افزودن کانتینر تک کاناله Adding Single Channel Container

• افزودن بخش راست کانال Adding Right Section Of The Channel

ساخت داشبورد مدیریت با Tailwind Building Admin Dashboard With Tailwind

• راه اندازی پروژه Setting Up The Project

• طراحی Navbar Designing Navbar

• طراحی منوی بالا قسمت 2 Designing Top Menu Part 2

• اضافه کردن محتوای کارت Adding Card Content

• اضافه کردن نمودارها Adding Charts

• رفع مشکل Nav Fixing Nav Issue

• ظرف کارت Cards Container

• افزودن کانتینر تک کاناله Adding Single Channel Container

• افزودن بخش راست کانال Adding Right Section Of The Channel

نتیجه Conclusion

• نتیجه گیری دوره Course Conclusion

نتیجه Conclusion

• نتیجه گیری دوره Course Conclusion