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

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

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

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

موضوع کلی: فناوری اطلاعات و ارتباطات

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

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

• 1. مقدمه‌ای بر چیدمان صفحات وب
• 2. مبانی CSS برای توسعه وب
• 3. آشنایی با مدل جعبه‌ای در CSS
• 4. نیاز به سیستم‌های چیدمان
• 5. معرفی CSS Grid و Flexbox
• 6. هدف اصلی Flexbox: چیدمان یک‌بعدی
• 7. مفاهیم کلیدی Flexbox: کانتینر و آیتم‌ها
• 8. تعریف کانتینر فلکس (display: flex)
• 9. تنظیم جهت اصلی (flex-direction)
• 10. جهت اصلی: ردیف (row)
• 11. جهت اصلی: ستون (column)
• 12. جهت اصلی: ردیف معکوس (row-reverse)
• 13. جهت اصلی: ستون معکوس (column-reverse)
• 14. تنظیم نحوه قرارگیری آیتم‌ها در جهت اصلی (justify-content)
• 15. قرارگیری در ابتدا (flex-start)
• 16. قرارگیری در انتها (flex-end)
• 17. مرکز قرارگیری (center)
• 18. فاصله‌گذاری بین آیتم‌ها (space-between)
• 19. فاصله‌گذاری با فضای خالی اطراف (space-around)
• 20. فاصله‌گذاری با فضای خالی مساوی (space-evenly)
• 21. تنظیم نحوه قرارگیری آیتم‌ها در جهت متقاطع (align-items)
• 22. قرارگیری در ابتدا (flex-start)
• 23. قرارگیری در انتها (flex-end)
• 24. مرکز قرارگیری (center)
• 25. کشش برای پر کردن فضا (stretch)
• 26. قرارگیری بر اساس خط مبنا (baseline)
• 27. کنترل درهم‌پیچیدگی (flex-wrap)
• 28. بدون درهم‌پیچیدگی (nowrap)
• 29. درهم‌پیچیدگی به ردیف بعدی (wrap)
• 30. درهم‌پیچیدگی معکوس (wrap-reverse)
• 31. تنظیمات پیشرفته‌ی درهم‌پیچیدگی (align-content)
• 32. قرارگیری در ابتدا (flex-start)
• 33. قرارگیری در انتها (flex-end)
• 34. مرکز قرارگیری (center)
• 35. کشش برای پر کردن فضا (stretch)
• 36. فاصله‌گذاری بین خطوط (space-between)
• 37. فاصله‌گذاری با فضای خالی اطراف (space-around)
• 38. تنظیم میزان انعطاف‌پذیری آیتم‌ها (flex-grow)
• 39. عدم رشد (0)
• 40. رشد متناسب (1)
• 41. رشد با نسبت‌های مختلف
• 42. تنظیم میزان انقباض آیتم‌ها (flex-shrink)
• 43. عدم انقباض (0)
• 44. انقباض متناسب (1)
• 45. انقباض با نسبت‌های مختلف
• 46. تنظیم ابعاد اولیه آیتم‌ها (flex-basis)
• 47. ابعاد ثابت (px, em, %)
• 48. شناسه auto
• 49. ترکیب flex-grow, flex-shrink, flex-basis (shorthand)
• 50. تنظیم ترتیب نمایش آیتم‌ها (order)
• 51. اولویت‌بندی آیتم‌ها
• 52. تنظیم تراز خودکار آیتم‌ها (align-self)
• 53. اولویت‌بندی تراز یک آیتم خاص
• 54. قابلیت‌های پیشرفته‌ی Flexbox
• 55. ایجاد منوهای ناوبری انعطاف‌پذیر
• 56. طراحی فرم‌های واکنش‌گرا
• 57. چیدمان گالری تصاویر
• 58. ساخت هدر و فوترهای واکنش‌گرا
• 59. نمایش محتوا در اندازه‌های مختلف صفحه
• 60. توسعه رابط کاربری برای دستگاه‌های موبایل
• 61. پیاده‌سازی طرح‌بندی‌های ستونی
• 62. مدیریت فضاهای خالی در رابط کاربری
• 63. استفاده از Flexbox در کنار Grid
• 64. مقایسه Flexbox و Grid
• 65. انتخاب ابزار مناسب برای هر سناریو
• 66. بهینه‌سازی عملکرد با Flexbox
• 67. نکات کاربردی و ترفندهای Flexbox
• 68. عیب‌یابی مشکلات رایج Flexbox
• 69. پشتیبانی مرورگرها از Flexbox
• 70. تست واکنش‌گرایی با ابزارهای توسعه‌دهنده
• 71. مقدمه‌ای بر طراحی رابط کاربری (UI)
• 72. اصول طراحی رابط کاربری مدرن
• 73. اهمیت تجربه کاربری (UX) در طراحی وب
• 74. نقش CSS در تجربه کاربری
• 75. ایجاد تعاملات بصری با CSS
• 76. استفاده از انیمیشن‌ها و ترانزیشن‌ها
• 77. طراحی دکمه‌ها و عناصر تعاملی
• 78. کار با آیکون‌ها و فونت‌ها
• 79. بهبود دسترسی‌پذیری (Accessibility) در طراحی
• 80. اهمیت رنگ‌ها و تایپوگرافی در UI
• 81. انتخاب پالت رنگی مناسب
• 82. استفاده از فونت‌های خوانا و زیبا
• 83. طراحی ریسپانسیو (واکنش‌گرا)
• 84. مفهوم طراحی موبایل-اول (Mobile-First)
• 85. استفاده از Media Queries
• 86. مدیریت تصاویر در طراحی ریسپانسیو
• 87. تست طرح‌بندی در دستگاه‌های مختلف
• 88. اصول طراحی رابط کاربری برای وب‌اپلیکیشن‌ها
• 89. طراحی داشبوردهای مدیریتی
• 90. چیدمان صفحات فرود (Landing Pages)
• 91. ساخت اپلیکیشن‌های تک‌صفحه‌ای (SPA)
• 92. نقش چارچوب‌های CSS (مانند Bootstrap)
• 93. استفاده از سیستم‌های طراحی (Design Systems)
• 94. اصول بصری در طراحی UI
• 95. قوانین گشتالت و کاربرد آن در UI
• 96. توازن، کنتراست و سلسله مراتب بصری
• 97. ایجاد جریان بصری در صفحه
• 98. طراحی فرم‌های کاربرپسند
• 99. اعتبارسنجی فرم‌ها با CSS
• 100. استفاده از انیمیشن‌ها برای بازخورد