دوره آموزش Styled-Components و CSS-in-JS در React همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره آموزش Styled-Components و CSS-in-JS در React

موضوع کلی: برنامه نویسی

موضوع میانی: جاوا اسکریپت (JavaScript)

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر Styled-Components و CSS-in-JS
• 2. نصب و راه‌اندازی اولیه Styled-Components
• 3. اولین کامپوننت استایل‌دهی شده
• 4. انتخابگرها و قوانین CSS در Styled-Components
• 5. استایل‌دهی پویا بر اساس props
• 6. تمرین: استایل‌دهی دکمه با props
• 7. استفاده از template literals برای CSS
• 8. استایل‌دهی کامپوننت‌های سفارشی
• 9. کلاس‌های CSS و Styled-Components
• 10. ترکیب استایل‌های موجود
• 11. ارث‌بری استایل‌ها در Styled-Components
• 12. استایل‌دهی به کامپوننت‌های third-party
• 13. استفاده از props برای شرطی‌سازی استایل‌ها
• 14. تمرین: فرم ورود با استایل‌دهی پویا
• 15. مدیریت تم‌ها (Theming) با Styled-Components
• 16. استفاده از ThemeProvider
• 17. ایجاد و استفاده از فایل‌های تم
• 18. تغییر تم در حین اجرا
• 19. تمرین: پیاده‌سازی حالت تاریک/روشن
• 20. استایل‌دهی به لیست‌ها و جداول
• 21. استایل‌دهی به فرم‌ها و ورودی‌ها
• 22. استایل‌دهی به کامپوننت‌های React Router
• 23. استایل‌دهی به کامپوننت‌های Modal و Dialog
• 24. استایل‌دهی به انیمیشن‌ها و transitionها
• 25. استفاده از keyframes برای انیمیشن
• 26. تمرین: انیمیشن بارگذاری (loading animation)
• 27. استفاده از GlobalStyle برای استایل‌های سراسری
• 28. ریست کردن CSS با GlobalStyle
• 29. تمرین: اعمال استایل‌های عمومی
• 30. ساخت کامپوننت‌های UI سفارشی
• 31. استفاده از Styled-Components در پروژه‌های بزرگ
• 32. بهینه‌سازی عملکرد Styled-Components
• 33. مدیریت استایل‌ها در تیم‌های بزرگ
• 34. تست واحد کامپوننت‌های استایل‌دهی شده
• 35. معرفی کتابخانه‌های CSS-in-JS دیگر (با رویکرد سازگار)
• 36. Styled-JSX در React
• 37. Emotion در React
• 38. JSS در React
• 39. مقایسه Styled-Components با روش‌های سنتی CSS
• 40. مقایسه Styled-Components با SASS/LESS
• 41. مزایای CSS-in-JS در React
• 42. معایب CSS-in-JS در React
• 43. بهترین شیوه‌ها در استفاده از Styled-Components
• 44. اصول طراحی سیستم‌های UI با React
• 45. ساخت سیستم کامپوننت
• 46. مدیریت state برای استایل‌دهی
• 47. استفاده از context API برای تم‌ها
• 48. استفاده از hooks سفارشی برای استایل‌دهی
• 49. تمرین: ساخت یک سیستم دکمه سفارشی
• 50. تمرین: ساخت یک سیستم کارت سفارشی
• 51. تمرین: پیاده‌سازی یک سیستم گرید (grid)
• 52. استایل‌دهی به آیکون‌ها
• 53. استفاده از SVG با Styled-Components
• 54. تمرین: استایل‌دهی به آیکون‌های فونت
• 55. مدیریت استایل‌ها در اپلیکیشن‌های تک‌صفحه‌ای (SPA)
• 56. استفاده از Styled-Components با Server-Side Rendering (SSR)
• 57. تنظیمات SSR با Styled-Components
• 58. تمرین: پیاده‌سازی SSR با Styled-Components
• 59. استفاده از Styled-Components در React Native (اشاره کوتاه و سازگار)
• 60. استایل‌دهی به عناصر HTML خاص
• 61. استفاده از mixins و extend در Styled-Components (با معادل‌سازی)
• 62. مدیریت متغیرهای CSS
• 63. قابلیت دسترسی (Accessibility) در استایل‌دهی
• 64. استفاده از CSS variables با Styled-Components
• 65. بهینه‌سازی حجم CSS تولیدی
• 66. دیباگ کردن استایل‌ها
• 67. ابزارهای توسعه Styled-Components
• 68. تمرین: ساخت یک کامپوننت سفارشی با استایل‌های پیچیده
• 69. تمرین: پیاده‌سازی یک صفحه کامل با استفاده از Styled-Components
• 70. اصول طراحی واکنش‌گرا (Responsive Design)
• 71. استفاده از media queries در Styled-Components
• 72. پیاده‌سازی طراحی واکنش‌گرا برای موبایل، تبلت و دسکتاپ
• 73. تمرین: طراحی صفحه فرود واکنش‌گرا
• 74. استفاده از props برای کنترل breakpointها
• 75. استایل‌دهی به عناصر فرم با اعتبارسنجی
• 76. تمرین: فرم ثبت‌نام با استایل‌دهی واکنش‌گرا
• 77. مدیریت استایل‌ها در کتابخانه‌های UI
• 78. استفاده از Styled-Components در پروژه‌های متن‌باز
• 79. ملاحظات امنیتی در استایل‌دهی
• 80. آینده CSS-in-JS
• 81. مرور مفاهیم کلیدی Styled-Components
• 82. نکات پیشرفته برای استایل‌دهی
• 83. جمع‌بندی و کاربردهای عملی
• 84. تمرین نهایی: ساخت یک داشبورد کوچک
• 85. مبانی طراحی رابط کاربری (UI Design)
• 86. اصول تجربه کاربری (UX Design)
• 87. کاربرد طراحی در توسعه وب
• 88. اهمیت خوانایی و زیبایی در کد
• 89. نقش رنگ‌ها در طراحی وب
• 90. تایپوگرافی و انتخاب فونت
• 91. ساختار بصری و چیدمان المان‌ها
• 92. بازخورد بصری به کاربر
• 93. اهمیت ثبات در طراحی
• 94. ارتباط بین طراحی و کدنویسی
• 95. فرهنگ طراحی در تیم‌های توسعه
• 96. مستندسازی طراحی و استایل‌ها
• 97. اهمیت بازنگری و بهبود مستمر
• 98. اخلاق حرفه‌ای در طراحی و توسعه
• 99. آینده طراحی رابط کاربری و تعامل انسان و کامپیوتر