کتاب استفاده از Custom Properties (CSS Variables) در طراحی واکنش‌گرا

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

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

عنوان دوره: دوره استفاده از Custom Properties (CSS Variables) در طراحی واکنش‌گرا

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

موضوع میانی: طراحی واکنش‌گرا (Responsive Design)

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر CSS و اهمیت آن در طراحی وب
• 2. آشنایی با مفاهیم اساسی CSS
• 3. انتخابگرها در CSS: انواع و کاربردها
• 4. خاصیت (Property) و مقدار (Value) در CSS
• 5. قوانین اولویت‌بندی (Cascade) و وراثت (Inheritance)
• 6. واحدها در CSS: پیکسل، em، rem، vw، vh
• 7. رنگ‌ها و پس‌زمینه‌ها در CSS
• 8. تایپوگرافی و فونت‌ها در CSS
• 9. کادربندی (Box Model) در CSS: مارجین، پدینگ، بوردر
• 10. نمایش عناصر (Display) و موقعیت‌دهی (Position)
• 11. فلکس‌باکس (Flexbox) برای چیدمان عناصر
• 12. گریدهای CSS (CSS Grid) برای چیدمان پیچیده
• 13. رسپانسیو دیزاین: اصول و مبانی
• 14. مفهوم طراحی واکنش‌گرا (Responsive Design)
• 15. هدف از طراحی واکنش‌گرا
• 16. مزایای طراحی واکنش‌گرا
• 17. تفاوت طراحی واکنش‌گرا و طراحی تطبیقی (Adaptive Design)
• 18. تکنیک‌های کلیدی در طراحی واکنش‌گرا
• 19. استفاده از Viewport Meta Tag
• 20. واحد‌های نسبی در CSS برای واکنش‌گرایی
• 21. Media Queries: ابزار اصلی واکنش‌گرایی
• 22. نحو و ساختار Media Queries
• 23. انواع شرط‌ها در Media Queries (عرض، ارتفاع، جهت، رزولوشن)
• 24. Media Queries بر اساس عرض صفحه (Width-based Media Queries)
• 25. Media Queries بر اساس ارتفاع صفحه (Height-based Media Queries)
• 26. Media Queries بر اساس جهت صفحه (Orientation-based Media Queries)
• 27. Media Queries بر اساس رزولوشن صفحه (Resolution-based Media Queries)
• 28. استفاده از Feature Queries
• 29. طراحی Mobile-First در مقابل Desktop-First
• 30. مفهوم Mobile-First
• 31. مزایای رویکرد Mobile-First
• 32. پیاده‌سازی Mobile-First با CSS
• 33. مفهوم Desktop-First
• 34. معایب رویکرد Desktop-First
• 35. انتخاب رویکرد مناسب
• 36. استفاده از واحدهای نسبی برای عرض و ارتفاع
• 37. واحد vw (Viewport Width)
• 38. واحد vh (Viewport Height)
• 39. واحد vmin و vmax
• 40. کاربرد واحدهای نسبی در طراحی واکنش‌گرا
• 41. تنظیم فونت‌ها به صورت واکنش‌گرا
• 42. استفاده از rem برای اندازه‌گیری فونت
• 43. تغییر اندازه فونت در Media Queries
• 44. تنظیم خطوط و فاصله‌ها به صورت واکنش‌گرا
• 45. مدیریت تصاویر واکنش‌گرا
• 46. تکنیک `max-width: 100%` برای تصاویر
• 47. عنصر `<picture>` و تگ `<img>` با `srcset`
• 48. تصاویر با رزولوشن بالا (High-Resolution Images)
• 49. مدیریت ویدئوهای واکنش‌گرا
• 50. چیدمان واکنش‌گرا با Flexbox
• 51. تنظیمات اصلی Flexbox برای واکنش‌گرایی
• 52. تنظیم `flex-wrap` برای شکست خطوط
• 53. مدیریت چیدمان با Flexbox در دستگاه‌های مختلف
• 54. چیدمان واکنش‌گرا با CSS Grid
• 55. مفاهیم اولیه CSS Grid
• 56. طراحی Grid انعطاف‌پذیر
• 57. مدیریت Layout با CSS Grid در Media Queries
• 58. نکات پیشرفته در Media Queries
• 59. استفاده از Grouping Media Queries
• 60. استفاده از `prefers-color-scheme`
• 61. استفاده از `prefers-reduced-motion`
• 62. تست و اشکال‌زدایی طراحی واکنش‌گرا
• 63. ابزارهای مرورگر برای تست واکنش‌گرایی
• 64. شبیه‌ساز دستگاه‌های موبایل در مرورگر
• 65. تست دستی بر روی دستگاه‌های واقعی
• 66. بهینه‌سازی عملکرد در طراحی واکنش‌گرا
• 67. فشرده‌سازی تصاویر
• 68. بارگذاری تنبل (Lazy Loading)
• 69. کاهش حجم کدهای CSS و JavaScript
• 70. استفاده از Custom Properties (CSS Variables)
• 71. مقدمه‌ای بر Custom Properties
• 72. نحو تعریف Custom Properties
• 73. کاربرد Custom Properties در طراحی واکنش‌گرا
• 74. تغییر مقادیر Custom Properties با Media Queries
• 75. مزایای استفاده از Custom Properties
• 76. مدیریت تم‌های رنگی با Custom Properties
• 77. مدیریت فونت‌ها با Custom Properties
• 78. مدیریت فاصله‌ها و اندازه‌ها با Custom Properties
• 79. طراحی فرم‌های واکنش‌گرا
• 80. اندازه‌دهی ورودی‌ها و لیبل‌ها
• 81. چیدمان اجزای فرم به صورت واکنش‌گرا
• 82. استفاده از Grid یا Flexbox برای فرم‌ها
• 83. طراحی جداول واکنش‌گرا
• 84. تکنیک‌های مختلف برای جداول واکنش‌گرا
• 85. مدیریت ستون‌ها و ردیف‌ها
• 86. استفاده از Scroll برای جداول بزرگ
• 87. طراحی منوهای واکنش‌گرا
• 88. منوهای همبرگری (Hamburger Menus)
• 89. منوهای کشویی (Off-canvas Menus)
• 90. چیدمان منو در دستگاه‌های مختلف
• 91. بهترین شیوه‌ها (Best Practices) در طراحی واکنش‌گرا
• 92. اصول طراحی کاربر محور (User-Centered Design)
• 93. دسترسی‌پذیری (Accessibility) در طراحی واکنش‌گرا
• 94. اهمیت تست کاربر (User Testing)
• 95. ملاحظات مربوط به عملکرد (Performance Considerations)
• 96. استفاده از پیش‌پردازنده‌های CSS (مانند Sass)
• 97. کاربرد Sass در مدیریت متغیرها و Mixins
• 98. مدیریت Media Queries با Sass
• 99. ساختاردهی کد CSS واکنش‌گرا
• 100. پروژه‌های عملی و نمونه‌ها