دوره آموزشی یادگیری جامع Tailwind CSS 4
3 ساعت 3 دقیقهمتوسط2025-01-29
مدرسین

Shruti Balasa
Full-Stack Web Developer and Tech Educator
جزئیات دوره
Tailwind CSS 4 توسعه فرانتاند را سرعت میبخشد و تجربهای ساده و لذتبخش از استایلدهی به صفحات وب را فراهم میکند. در این دوره مبتدیپسند، شرودی بالاسا شما را با مفاهیم اساسی این فریمورک مبتنی بر کلاسهای کمکی (Utility-First) آشنا میکند. ابتدا با نحوه نصب و راهاندازی Tailwind CSS شروع کرده و سپس یاد میگیرید چگونه متنها را استایل دهید، رنگها را اعمال کنید و چیدمانهای حرفهای ایجاد کنید. در ادامه، اصول طراحی صفحات ریسپانسیو (واکنشگرا) و سفارشیسازی فریمورک نیز پوشش داده میشود.
در پایان این دوره، مهارتهای پایهای برای استایلدهی سریع و کارآمد به صفحات وب را خواهید داشت و میتوانید طراحیهای زیبا و حرفهای ایجاد کنید.
اهداف یادگیری:
✅ درک مفهوم کلاسهای کمکی (Utility Classes) در Tailwind CSS
✅ نصب و راهاندازی Tailwind CSS در پروژههای توسعه وب
✅ استایلدهی به کامپوننتها و چیدمانها با استفاده از کلاسهای Tailwind CSS
✅ ایجاد صفحات ریسپانسیو و تطبیقپذیر با این فریمورک
✅ سفارشیسازی Tailwind CSS متناسب با نیازهای پروژه
در پایان این دوره، مهارتهای پایهای برای استایلدهی سریع و کارآمد به صفحات وب را خواهید داشت و میتوانید طراحیهای زیبا و حرفهای ایجاد کنید.
اهداف یادگیری:
✅ درک مفهوم کلاسهای کمکی (Utility Classes) در Tailwind CSS
✅ نصب و راهاندازی Tailwind CSS در پروژههای توسعه وب
✅ استایلدهی به کامپوننتها و چیدمانها با استفاده از کلاسهای Tailwind CSS
✅ ایجاد صفحات ریسپانسیو و تطبیقپذیر با این فریمورک
✅ سفارشیسازی Tailwind CSS متناسب با نیازهای پروژه
مهارت ها
Tailwind CSSWeb StandardsWeb DesignFront-End Web DevelopmentEssential TrainingWeb DevelopmentOpen Source
سرفصل ها
مقدمه
- با Tailwind CSS آشنا شوید
- آنچه باید بدانید
- استفاده از Codespace برای این دوره
- درک رویکرد اول ابزار
تایپوگرافی و رنگ ها
- درک پیش از پرواز
- اعمال سبکهای متن و فونت
- استفاده از رنگ ها
- اعمال رنگهای پس زمینه و شیب
- افزودن مرزها و سایه ها
- چالش - به یک کارت گواهی استایل بسازید
- راه حل - به یک کارت گواهی استایل بسازید
اصول چیدمان
- تنظیم عرض و ارتفاع
- اضافه کردن حاشیه و بالشتک
- ایجاد طرح بندی فلکس باکس
- اندازه اقلام فلکس و تودرتو
- ایجاد طرح بندی شبکه ای
- اندازه و مرتب سازی مجدد آیتمهای شبکه
- استفاده از ابزارهای نمایش، موقعیت و z-index
- چالش - به بخش صفحه رویداد سبک دهید
- راه حل - به بخش صفحه رویداد سبک دهید
طراحی وب سایت واکنش گرا
- درک رویکرد اول موبایل
- استفاده از اصلاح کنندههای واکنش گرا
- ساخت چیدمانهای پاسخگو مشترک
- چالش - کارت اطلاعات با تصویر
- راه حل - کارت اطلاعات با تصویر
تعامل و انواع
- عناصر سبک روی شناور و فوکوس
- استفاده از اصلاح کنندههای شبه کلاس
- شبه عناصر یک ظاهر طراحی شده
- افزودن حالت تاریک
- تبدیل ها , انتقالها و انیمیشن ها
- چالش - یک دکمه تعاملی بسازید
- راه حل - یک دکمه تعاملی بسازید
سبکهای سفارشی در Tailwind
- تغییر موضوع
- استفاده از مقادیر دلخواه
- ایجاد برنامههای کاربردی سفارشی
- استخراج سبکهای رایج
نتیجه گیری
- تنظیم محیط خود
- بعدش چی؟