کتاب صوتی Mastering Flexbox for Complex Layouts

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

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

عنوان دوره: دوره Mastering Flexbox for Complex Layouts

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

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

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

• 1. مقدمه‌ای بر CSS Layouts
• 2. چرا Flexbox؟
• 3. مقایسه Flexbox با روش‌های قدیمی‌تر (Float, Inline-block)
• 4. اصول اولیه Flexbox: کانتینر و آیتم‌ها
• 5. خاصیت `display: flex`
• 6. خاصیت `flex-direction` (row, row-reverse, column, column-reverse)
• 7. خاصیت `justify-content` (flex-start, flex-end, center, space-between, space-around, space-evenly)
• 8. خاصیت `align-items` (stretch, flex-start, flex-end, center, baseline)
• 9. خاصیت `align-content` (stretch, flex-start, flex-end, center, space-between, space-around)
• 10. `flex-wrap` (nowrap, wrap, wrap-reverse)
• 11. نکات مهم در مورد `align-content` و `align-items`
• 12. مفهوم Main Axis و Cross Axis
• 13. مثال‌های کاربردی از Layout های ساده با Flexbox
• 14. استفاده از `order` برای تغییر ترتیب آیتم‌ها
• 15. خاصیت `flex-grow`
• 16. خاصیت `flex-shrink`
• 17. خاصیت `flex-basis`
• 18. ترکیب `flex-grow`, `flex-shrink`, `flex-basis` با `flex` shorthand
• 19. `flex: 0 1 auto` (مفهوم و کاربرد)
• 20. `flex: 1` (مفهوم و کاربرد)
• 21. `flex: 0 0 auto` (مفهوم و کاربرد)
• 22. خاصیت `align-self` برای آیتم‌های تکی
• 23. درک بهتر `align-items` در مقابل `align-self`
• 24. چالش‌های رایج در استفاده از Flexbox
• 25. راهکارهای مقابله با چالش‌ها
• 26. Flexbox برای ساخت Navbars عمودی
• 27. Flexbox برای ساخت Navbars افقی
• 28. Flexbox برای ساخت Header و Footer
• 29. Flexbox برای ساخت Sidebar
• 30. Flexbox برای ساخت Card Layouts
• 31. Flexbox برای ساخت Gallery Layouts
• 32. Flexbox برای ساخت Form Layouts
• 33. Flexbox برای ساخت Table-like Layouts
• 34. Flexbox برای ساخت Responsive Layouts
• 35. استفاده از Media Queries با Flexbox
• 36. طراحی Layout های دو ستونه با Flexbox
• 37. طراحی Layout های سه ستونه با Flexbox
• 38. ایجاد Grid-like Layouts با Flexbox
• 39. انعطاف‌پذیری Flexbox در اندازه‌دهی
• 40. تنظیم ارتفاع و عرض آیتم‌ها با Flexbox
• 41. مدیریت فضای خالی در Flexbox
• 42. نکات پیشرفته در `justify-content` (توزیع فاصله)
• 43. نکات پیشرفته در `align-items` (هم‌ترازی عمودی)
• 44. نکات پیشرفته در `align-content` (توزیع محتوا در خطوط چندگانه)
• 45. استفاده از `gap` property در Flexbox (آینده)
• 46. تفاوت `gap` با `margin` در Flexbox
• 47. CSS Grid در مقابل Flexbox: چه زمانی از کدام استفاده کنیم؟
• 48. ادغام Flexbox با CSS Grid
• 49. مثال‌های پیچیده ساخت Layout با ترکیب Flexbox و Grid
• 50. ساخت Layout های Hero Section
• 51. ساخت Layout های Pricing Tables
• 52. ساخت Layout های Product Listings
• 53. ساخت Layout های Testimonial Sections
• 54. ساخت Layout های Accordions با Flexbox
• 55. ساخت Layout های Modals با Flexbox
• 56. استفاده از Flexbox برای فوکوس بر محتوا
• 57. مدیریت Overflow در Flexbox
• 58. بررسی مرورگرها و پشتیبانی Flexbox
• 59. نکات تکمیلی برای سازگاری مرورگرها
• 60. ابزارهای توسعه‌دهنده مرورگر برای دیباگ کردن Flexbox
• 61. پلاگین‌ها و افزونه‌های مفید برای Flexbox
• 62. مفهوم Intrinsic Sizing در Flexbox
• 63. تأثیر `min-width`/`max-width` بر Flex Items
• 64. تأثیر `min-height`/`max-height` بر Flex Items
• 65. ملاحظات دسترسی‌پذیری (Accessibility) در Flexbox
• 66. استفاده از `aria-*` attributes در کنار Flexbox
• 67. نکات بهینه‌سازی عملکرد با Flexbox
• 68. بهترین روش‌ها (Best Practices) برای استفاده از Flexbox
• 69. تمرینات عملی ساخت Layout های پیچیده
• 70. پروژه عملی: ساخت یک داشبورد ساده با Flexbox
• 71. پروژه عملی: ساخت یک صفحه فرود (Landing Page) با Flexbox
• 72. بررسی Layout های پیچیده در وب‌سایت‌های واقعی
• 73. اصلاح Layout های موجود با Flexbox
• 74. مقدمه‌ای بر Flexbox Inspector
• 75. استفاده پیشرفته از Flexbox Inspector
• 76. نکات امنیتی در طراحی Layout
• 77. ملاحظات طراحی واکنش‌گرا (Responsive Design)
• 78. تکنیک‌های پیشرفته Resizing با Flexbox
• 79. مدیریت محتوای دینامیک با Flexbox
• 80. Flexbox و ایجاد انیمیشن‌های CSS
• 81. ملاحظات مربوط به Mobile-First Design
• 82. تفاوت Flexbox در رابط‌های کاربری مختلف (وب، اپلیکیشن)
• 83. معماری CSS در پروژه‌های بزرگ با Flexbox
• 84. اشتباهات رایج در پیاده‌سازی Flexbox
• 85. راهنمای رفع اشکالات رایج Flexbox
• 86. مقدمه‌ای بر CSS Containment Property و ارتباط آن با Flexbox
• 87. استفاده از `break-inside` در Flexbox
• 88. استفاده از `page-break-after`/`before` در Flexbox
• 89. چالش‌های Flexbox در پرینت
• 90. مفهوم `float` و `clear` در دوران Flexbox
• 91. نگاهی به آینده CSS Layouts
• 92. جمع‌بندی مباحث Flexbox
• 93. مروری بر مفاهیم کلیدی Flexbox
• 94. سوالات متداول در مورد Flexbox
• 95. منابع تکمیلی و آموزشی بیشتر
• 96. پروژه پایانی: ساخت یک وب‌سایت کامل با استفاده از Flexbox
• 97. Flexbox برای چیدمان‌های Responsive و Mobile-First
• 98. ترکیب Flexbox با Grid برای طرح‌بندی‌های پیشرفته
• 99. آشنایی با خواص `flex-grow`, `flex-shrink` و `flex-basis`
• 100. عیب‌یابی و رفع مشکلات رایج Flexbox