فلش‌کارت‌های آموزشی اصول طراحی واکنش‌گرا با CSS Media Queries

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

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

عنوان دوره: دوره اصول طراحی واکنش‌گرا با CSS Media Queries

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

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

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

• 1. مقدمه‌ای بر طراحی وب واکنش‌گرا
• 2. مبانی طراحی وب مدرن
• 3. معرفی CSS3 و قابلیت‌های آن
• 4. چرا طراحی واکنش‌گرا مهم است؟
• 5. اصول طراحی ریسپانسیو
• 6. آشنایی با Viewport در طراحی وب
• 7. تنظیم Viewport برای دستگاه‌های مختلف
• 8. مفهوم Pixel و Pixel چگالی
• 9. واحد اندازه‌گیری px در CSS
• 10. واحد اندازه‌گیری em و rem
• 11. واحد اندازه‌گیری vw و vh
• 12. اندازه‌گیری نسبی در CSS
• 13. اندازه‌گیری مطلق در CSS
• 14. مزایای استفاده از واحدهای نسبی
• 15. مقدمه‌ای بر Media Queries
• 16. نحو کلی Media Queries
• 17. انواع Media Features
• 18. Media Type: screen, print, all
• 19. Media Feature: width, height
• 20. Media Feature: orientation
• 21. Media Feature: resolution
• 22. Media Feature: aspect-ratio
• 23. Media Feature: color
• 24. Media Feature: hover
• 25. Media Feature: pointer
• 26. استفاده از Media Queries برای تغییر Layout
• 27. تنظیم عرض ستون‌ها با Media Queries
• 28. تغییر اندازه فونت با Media Queries
• 29. تنظیم تصاویر برای صفحات مختلف
• 30. طراحی منوهای واکنش‌گرا
• 31. طراحی فرم‌های واکنش‌گرا
• 32. استفاده از Flexbox برای Layout واکنش‌گرا
• 33. مبانی Flexbox
• 34. Container و Items در Flexbox
• 35. جهت‌دهی در Flexbox
• 36. ترازبندی Items در Flexbox
• 37. توزیع فضای خالی در Flexbox
• 38. استفاده از Grid CSS برای Layout واکنش‌گرا
• 39. مبانی Grid CSS
• 40. Grid Container و Grid Items
• 41. تعریف Rows و Columns
• 42. فضای بین Row و Column
• 43. تراز کردن Items در Grid
• 44. طراحی Layout با Grid
• 45. استفاده از تکنیک‌های پیشرفته‌تر Media Queries
• 46. دسته‌بندی Media Queries بر اساس دستگاه
• 47. استفاده از Max-width و Min-width
• 48. استفاده از Max-height و Min-height
• 49. ترکیب Media Features
• 50. استفاده از `and` و `or` در Media Queries
• 51. اولویت‌بندی Media Queries
• 52. بهینه‌سازی تصاویر برای طراحی واکنش‌گرا
• 53. فرمت‌های تصویر مناسب برای وب
• 54. فشرده‌سازی تصاویر
• 55. استفاده از `srcset` و `sizes`
• 56. تصاویر با وضوح بالا (High-DPI)
• 57. تکنیک‌های پیشرفته‌تر برای تصاویر
• 58. طراحی فونت‌های واکنش‌گرا
• 59. انتخاب فونت مناسب
• 60. تنظیم اندازه فونت با واحدهای نسبی
• 61. استفاده از `font-face` برای فونت‌های سفارشی
• 62. بهینه‌سازی بارگذاری فونت
• 63. تست و دیباگ کردن طراحی واکنش‌گرا
• 64. ابزارهای توسعه‌دهنده مرورگر
• 65. شبیه‌سازی دستگاه‌های مختلف
• 66. بررسی عملکرد در مرورگرهای مختلف
• 67. عیب‌یابی مشکلات Layout
• 68. بهینه‌سازی سرعت بارگذاری صفحات
• 69. معرفی ابزارهای تست آنلاین
• 70. ملاحظات دسترسی‌پذیری (Accessibility) در طراحی واکنش‌گرا
• 71. اهمیت دسترسی‌پذیری
• 72. استفاده از Semantic HTML
• 73. توضیحات Alt برای تصاویر
• 74. قابلیت پیمایش با کیبورد
• 75. تست با ابزارهای دسترسی‌پذیری
• 76. طراحی برای دستگاه‌های لمسی
• 77. رویدادهای لمسی در JavaScript
• 78. مدیریت لمس و ژست‌ها
• 79. طراحی دکمه‌ها و عناصر تعاملی
• 80. تست بر روی دستگاه‌های واقعی
• 81. کاربرد Media Queries در انیمیشن‌ها
• 82. انیمیشن‌های CSS واکنش‌گرا
• 83. تغییر انیمیشن‌ها بر اساس Viewport
• 84. ملاحظات عملکردی در طراحی واکنش‌گرا
• 85. کاهش حجم فایل‌ها
• 86. بارگذاری تنبل (Lazy Loading)
• 87. بهینه‌سازی CSS و JavaScript
• 88. تست عملکرد در شرایط مختلف شبکه
• 89. جمع‌بندی اصول طراحی واکنش‌گرا
• 90. چالش‌های رایج در طراحی واکنش‌گرا
• 91. بهترین شیوه‌ها در طراحی واکنش‌گرا
• 92. آینده طراحی وب واکنش‌گرا
• 93. پروژه‌های عملی طراحی واکنش‌گرا
• 94. طراحی صفحه اصلی یک وب‌سایت
• 95. طراحی صفحه محصول
• 96. طراحی صفحه تماس با ما
• 97. طراحی وبلاگ واکنش‌گرا
• 98. طراحی گالری تصاویر
• 99. طراحی فرم ثبت‌نام
• 100. چک لیست نهایی طراحی واکنش‌گرا