فلش‌کارت‌های آموزشی CSS Grid and Flexbox: The Ultimate Layout Duo

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

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

عنوان دوره: دوره CSS Grid and Flexbox: The Ultimate Layout Duo

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

موضوع میانی: CSS

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

• 1. مقدمه‌ای بر چیدمان در CSS
• 2. آشنایی با مفاهیم Grid و Flexbox
• 3. تاریخچه و ضرورت استفاده از Layoutهای مدرن
• 4. بررسی تفاوت‌های Grid و Flexbox
• 5. نصب و راه‌اندازی محیط توسعه
• 6. ساختار اولیه یک صفحه وب با HTML
• 7. مفهوم Box Model در CSS
• 8. تنظیمات اولیه CSS
• 9. انتخابگرها در CSS
• 10. خاصیت‌های اساسی Box Model (width, height, padding, border, margin)
• 11. خاصیت‌های نمایش (display: block, inline, inline-block)
• 12. مقدمه‌ای بر Flexbox
• 13. ویژگی‌های اصلی Flex Container
• 14. خاصیت justify-content
• 15. خاصیت align-items
• 16. خاصیت flex-direction
• 17. خاصیت flex-wrap
• 18. خاصیت align-content
• 19. ویژگی‌های Flex Item
• 20. خاصیت flex-grow
• 21. خاصیت flex-shrink
• 22. خاصیت flex-basis
• 23. خاصیت order
• 24. خاصیت align-self
• 25. چند مثال کاربردی از Flexbox
• 26. طراحی منوها با Flexbox
• 27. ساخت فرم‌ها با Flexbox
• 28. چیدمان گالری تصاویر با Flexbox
• 29. طراحی Responsive Layout با Flexbox
• 30. مقدمه‌ای بر CSS Grid
• 31. ویژگی‌های اصلی Grid Container
• 32. خاصیت grid-template-columns
• 33. خاصیت grid-template-rows
• 34. خاصیت grid-template-areas
• 35. خاصیت gap (grid-gap)
• 36. خاصیت justify-items
• 37. خاصیت align-items
• 38. خاصیت justify-content
• 39. خاصیت align-content
• 40. خاصیت grid-auto-columns
• 41. خاصیت grid-auto-rows
• 42. خاصیت grid-auto-flow
• 43. ویژگی‌های Grid Item
• 44. خاصیت grid-column
• 45. خاصیت grid-row
• 46. خاصیت grid-area
• 47. خاصیت justify-self
• 48. خاصیت align-self
• 49. چند مثال کاربردی از CSS Grid
• 50. طراحی Layoutهای پیچیده با Grid
• 51. ساخت داشبوردهای مدیریتی با Grid
• 52. چیدمان صفحات مقالات با Grid
• 53. طراحی صفحات فرود (Landing Pages) با Grid
• 54. طراحی Responsive Layout با Grid
• 55. ترکیب Grid و Flexbox
• 56. استفاده از Flexbox برای آیتم‌های داخلی Grid
• 57. استفاده از Grid برای چیدمان کلی و Flexbox برای جزئیات
• 58. مثال‌های ترکیبی پیشرفته
• 59. بهینه‌سازی عملکرد Layoutها
• 60. نکات و ترفندهای کاربردی
• 61. اشکال‌زدایی Layoutهای Grid و Flexbox
• 62. ابزارهای توسعه‌دهنده برای Layoutها
• 63. ملاحظات دسترسی‌پذیری (Accessibility) در Layoutها
• 64. طراحی برای صفحات نمایش مختلف
• 65. استفاده از واحدهای اندازه‌گیری نسبی (%, vw, vh, em, rem)
• 66. مدیریت فضا و تراز بندی در Layoutها
• 67. چیدمان محتوای متنی در Grid و Flexbox
• 68. چیدمان تصاویر و عناصر گرافیکی
• 69. طراحی جداول با Grid و Flexbox
• 70. پیاده‌سازی Layoutهای چند ستونی
• 71. ساخت Layoutهای Stacked
• 72. طراحی Layoutهای Parallax
• 73. مفهوم Z-index و اولویت‌بندی عناصر
• 74. مدیریت Layout در مرورگرهای مختلف
• 75. استفاده از پیشوندهای مرورگر (Browser Prefixes)
• 76. آشنایی با Grid Inspector و Flexbox Inspector
• 77. تست Layoutها در دستگاه‌های واقعی
• 78. مفهوم Container Queries
• 79. مفهوم :has() selector در CSS
• 80. بهترین شیوه‌ها در طراحی Layout
• 81. مستندسازی Layoutهای CSS
• 82. یادگیری مستمر و پیگیری آخرین تغییرات CSS
• 83. پروژه‌های عملی برای تمرین
• 84. طراحی یک صفحه کامل با Grid و Flexbox
• 85. ساخت یک کامپوننت UI پیچیده
• 86. بازسازی یک وب‌سایت موجود با Layoutهای مدرن
• 87. تمرین‌های حل مسئله در چیدمان
• 88. مقدمه‌ای بر مفاهیم پیشرفته‌تر چیدمان
• 89. بررسی آینده Layoutهای CSS
• 90. جمع‌بندی و مرور آموخته‌ها
• 91. منابع برای مطالعه بیشتر
• 92. مفاهیم کلیدی CSS Layout
• 93. تکنیک‌های چیدمان پیشرفته
• 94. ساخت Layoutهای پویا
• 95. تکنیک‌های بهینه‌سازی برای موبایل
• 96. چیدمان‌های سفارشی با CSS
• 97. استفاده از CSS Variables در Layoutها
• 98. مدیریت Layout در پروژه‌های بزرگ
• 99. طراحی Layoutهای تعاملی
• 100. چیدمان‌های مبتنی بر محتوا