فلش‌کارت‌های آموزشی طراحی حرفه‌ای صفحات وب با Flexbox و CSS Grid در المنتور

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

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

عنوان دوره: دوره طراحی حرفه‌ای صفحات وب با Flexbox و CSS Grid در المنتور

موضوع کلی: طراحی و توسعه وب‌سایت

موضوع میانی: تکنیک‌های پیشرفته CSS برای طراحی واکنش‌گرا

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

• 1. مبانی طراحی وب‌سایت در المنتور
• 2. مقدمه‌ای بر المنتور و پنل آن
• 3. آشنایی با مفاهیم پایه CSS
• 4. کاربرد CSS در المنتور
• 5. اصول طراحی واکنش‌گرا (Responsive Design)
• 6. مقدمه‌ای بر Flexbox
• 7. ساختار اصلی Flexbox: کانتینر و آیتم‌ها
• 8. ویژگی‌های کلیدی Flexbox: display, flex-direction
• 9. تنظیم جهت‌دهی آیتم‌ها در Flexbox
• 10. خاصیت justify-content برای تراز افقی
• 11. خاصیت align-items برای تراز عمودی
• 12. خاصیت align-content برای تراز خطوط در Flexbox
• 13. قابلیت flex-wrap برای شکستن خطوط
• 14. خاصیت flex-grow برای رشد آیتم‌ها
• 15. خاصیت flex-shrink برای انقباض آیتم‌ها
• 16. خاصیت flex-basis برای اندازه اولیه آیتم‌ها
• 17. ترکیب flex-grow, flex-shrink, flex-basis
• 18. خاصیت order برای تغییر ترتیب آیتم‌ها
• 19. مقدمه‌ای بر CSS Grid
• 20. ساختار اصلی Grid: کانتینر و آیتم‌ها
• 21. تعریف ستون‌ها در Grid: grid-template-columns
• 22. تعریف ردیف‌ها در Grid: grid-template-rows
• 23. واحد FR برای تعریف اندازه‌های نسبی در Grid
• 24. خاصیت grid-gap برای فاصله بین آیتم‌ها
• 25. خاصیت justify-items برای تراز افقی آیتم‌ها
• 26. خاصیت align-items برای تراز عمودی آیتم‌ها
• 27. خاصیت justify-content برای تراز کل محتوای Grid
• 28. خاصیت align-content برای تراز کل محتوای Grid
• 29. تعریف نواحی در Grid: grid-template-areas
• 30. قرار دادن آیتم‌ها در نواحی مشخص
• 31. خاصیت grid-column برای تعیین موقعیت ستونی آیتم
• 32. خاصیت grid-row برای تعیین موقعیت ردیفی آیتم
• 33. ترکیب grid-column و grid-row
• 34. استفاده از Grid برای چیدمان پیچیده
• 35. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 36. طراحی هدر واکنش‌گرا با Flexbox
• 37. طراحی فوتر واکنش‌گرا با Flexbox
• 38. چیدمان کارت‌ها با Flexbox
• 39. طراحی منوی ناوبری واکنش‌گرا
• 40. استفاده از Grid برای چیدمان اصلی صفحه
• 41. ساخت گالری تصاویر با CSS Grid
• 42. طراحی فرم‌های واکنش‌گرا با Flexbox و Grid
• 43. استفاده از Grid برای ساخت Layoutهای چند ستونی
• 44. طراحی بخش‌های محتوایی با Grid
• 45. مدیریت فضاهای خالی (Whitespace) در Grid
• 46. بهینه‌سازی چیدمان برای دستگاه‌های مختلف
• 47. تکنیک‌های پیشرفته Flexbox برای تراز دقیق
• 48. تکنیک‌های پیشرفته Grid برای کنترل چیدمان
• 49. استفاده از کلاس‌های کمکی المنتور با CSS
• 50. کدنویسی CSS سفارشی در المنتور
• 51. اشکال‌زدایی (Debugging) چیدمان‌های Flexbox و Grid
• 52. استفاده از ابزارهای توسعه‌دهنده مرورگر
• 53. بررسی سازگاری چیدمان در مرورگرهای مختلف
• 54. اصول دسترسی‌پذیری (Accessibility) در طراحی وب
• 55. بهینه‌سازی عملکرد (Performance) چیدمان‌ها
• 56. استفاده از واحدهای نسبی (%, vw, vh)
• 57. تکنیک‌های انیمیشن ساده در المنتور
• 58. استفاده از Transition در CSS
• 59. کاربرد Animation در CSS
• 60. طراحی لایه‌های زنده (Parallax) در المنتور
• 61. مبانی طراحی UI/UX در المنتور
• 62. اصول انتخاب رنگ و تایپوگرافی
• 63. طراحی دکمه‌های واکنش‌گرا
• 64. ساخت اسلایدرهای سفارشی
• 65. طراحی جداول واکنش‌گرا
• 66. کاربرد CSS Variables (Custom Properties)
• 67. مدیریت CSS در پروژه‌های بزرگ
• 68. اصول طراحی برای موبایل اول (Mobile-First)
• 69. پیاده‌سازی طرح‌بندی‌های پیچیده با Grid
• 70. استفاده از Pseudo-elements در CSS
• 71. کاربرد Pseudo-classes در CSS
• 72. طراحی هدرهای شناور (Sticky Headers)
• 73. ساخت منوهای همبرگری واکنش‌گرا
• 74. پیاده‌سازی چیدمان‌های ستونی پویا
• 75. مدیریت responsive images
• 76. طراحی بخش‌های FAQ واکنش‌گرا
• 77. استفاده از Flexbox برای چیدمان عمودی
• 78. استفاده از Grid برای چیدمان افقی
• 79. تکنیک‌های پیشرفته justify-content
• 80. تکنیک‌های پیشرفته align-items
• 81. استفاده از `min-content` و `max-content` در Grid
• 82. تنظیم `grid-auto-flow`
• 83. مدیریت `grid-auto-rows` و `grid-auto-columns`
• 84. کاربرد `fit-content()` در Grid
• 85. طراحی کامپوننت‌های تکرارشونده
• 86. استفاده از Mixins در Sass (اگر در المنتور پشتیبانی شود)
• 87. مدیریت فونت‌های سفارشی
• 88. اصول بهینه‌سازی سئو (SEO) در طراحی وب
• 89. تست چیدمان در دستگاه‌های واقعی
• 90. مقدمه‌ای بر JavaScript در المنتور
• 91. افزودن تعاملات ساده با JavaScript
• 92. نکات تکمیلی در طراحی واکنش‌گرا
• 93. مرور کلی بر Flexbox و Grid
• 94. پروژه‌های عملی طراحی با Flexbox و Grid
• 95. مبانی طراحی رابط کاربری (UI)
• 96. اصول طراحی تجربه کاربری (UX)
• 97. چیدمان‌های مدرن با استفاده از Grid
• 98. بررسی نمونه‌های موفق طراحی وب
• 99. جمع‌بندی و گام‌های بعدی در طراحی وب