دوره آموزشی یادگیری جامع 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
سرفصل ها
0. مقدمه
- 01 - با Tailwind CSS آشنا شوید
- 02 - آنچه باید بدانید
- 03 - استفاده از Codespace برای این دوره
- 04 - درک رویکرد اول ابزار
1. تایپوگرافی و رنگ ها
- 05 - درک پیش از پرواز
- 06 - اعمال سبکهای متن و فونت
- 07 - استفاده از رنگ ها
- 08 - اعمال رنگهای پس زمینه و شیب
- 09 - افزودن مرزها و سایه ها
- 10 - چالش - به یک کارت گواهی استایل بسازید
- 11 - راه حل - به یک کارت گواهی استایل بسازید
2. اصول چیدمان
- 12 - تنظیم عرض و ارتفاع
- 13 - اضافه کردن حاشیه و بالشتک
- 14 - ایجاد طرح بندی فلکس باکس
- 15 - اندازه اقلام فلکس و تودرتو
- 16 - ایجاد طرح بندی شبکه ای
- 17 - اندازه و مرتب سازی مجدد آیتمهای شبکه
- 18 - استفاده از ابزارهای نمایش، موقعیت و z-index
- 19 - چالش - به بخش صفحه رویداد سبک دهید
- 20 - راه حل - به بخش صفحه رویداد سبک دهید
3. طراحی وب سایت واکنش گرا
- 21 - درک رویکرد اول موبایل
- 22 - استفاده از اصلاح کنندههای واکنش گرا
- 23 - ساخت چیدمانهای پاسخگو مشترک
- 24 - چالش - کارت اطلاعات با تصویر
- 25 - راه حل - کارت اطلاعات با تصویر
4. تعامل و انواع
- 26 - عناصر سبک روی شناور و فوکوس
- 27 - استفاده از اصلاح کنندههای شبه کلاس
- 28 - شبه عناصر یک ظاهر طراحی شده
- 29 - افزودن حالت تاریک
- 30 - تبدیل ها , انتقالها و انیمیشن ها
- 31 - چالش - یک دکمه تعاملی بسازید
- 32 - راه حل - یک دکمه تعاملی بسازید
5. سبکهای سفارشی در Tailwind
- 33 - تغییر موضوع
- 34 - استفاده از مقادیر دلخواه
- 35 - ایجاد برنامههای کاربردی سفارشی
- 36 - استخراج سبکهای رایج
نتیجه گیری
- 37 - تنظیم محیط خود
- 38 - بعدش چی؟