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

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

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

عنوان دوره: دوره CSS مدرن: منطق در طراحی وب

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

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

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

• 1. مبانی طراحی رابط کاربری
• 2. اصول طراحی بصری در وب
• 3. معرفی CSS و تاریخچه آن
• 4. نحوه اتصال CSS به صفحات HTML
• 5. انتخابگرهای CSS: انواع و کاربردها
• 6. مدل جعبه‌ای (Box Model) در CSS
• 7. خاصیت نمایش (Display) و مقادیر آن
• 8. موقعیت‌دهی عناصر با CSS (Positioning)
• 9. استفاده از شناورها (Float) برای چیدمان
• 10. چیدمان چند ستونی با CSS
• 11. آشنایی با Flexbox: مفاهیم پایه
• 12. Flexbox: کنترل چیدمان در راستای اصلی
• 13. Flexbox: کنترل چیدمان در راستای فرعی
• 14. Flexbox: تراز کردن عناصر
• 15. آشنایی با Grid Layout: مفاهیم پایه
• 16. Grid Layout: تعریف سطرها و ستون‌ها
• 17. Grid Layout: موقعیت‌دهی عناصر در Grid
• 18. Grid Layout: ایجاد طرح‌بندی‌های پیچیده
• 19. آشنایی با CSS Variables (Custom Properties)
• 20. استفاده از CSS Variables برای ایجاد تم‌های رنگی
• 21. آشنایی با واحدهای اندازه‌گیری در CSS
• 22. واحدهای نسبی و مطلق در CSS
• 23. مقدمه‌ای بر Responsive Web Design
• 24. Media Queries: طراحی برای دستگاه‌های مختلف
• 25. طراحی Mobile-First
• 26. استفاده از Viewport Meta Tag
• 27. آشنایی با سیستم‌های طراحی (Design Systems)
• 28. مبانی طراحی برای دسترس‌پذیری (Accessibility)
• 29. اهمیت رنگ و کنتراست در دسترس‌پذیری
• 30. استفاده از ARIA Attributes
• 31. آشنایی با ابزارهای توسعه‌دهنده مرورگر
• 32. عیب‌یابی CSS با استفاده از DevTools
• 33. مقدمه‌ای بر پیش‌پردازنده‌های CSS (Sass, Less)
• 34. آشنایی با CSS Frameworks (Bootstrap, Tailwind CSS)
• 35. نکات بهینه‌سازی CSS برای افزایش سرعت بارگذاری
• 36. مقدمه‌ای بر CSS Modules
• 37. استفاده از CSS-in-JS
• 38. آشنایی با Shadow DOM
• 39. مفاهیم اولیه انیمیشن با CSS
• 40. انیمیشن‌های پیچیده با CSS
• 41. ترنزیشن‌ها در CSS
• 42. تبدیلات (Transforms) در CSS
• 43. آشنایی با CSS Filters
• 44. استفاده از CSS Masks
• 45. مقدمه‌ای بر CSS Houdini
• 46. آشنایی با CSS Gradientها
• 47. ایجاد الگوهای پس‌زمینه با CSS
• 48. آشنایی با CSS Shapes
• 49. مفاهیم اولیه SVG و استفاده در CSS
• 50. کاربرد SVG برای ایجاد آیکون‌ها
• 51. آشنایی با فونت‌های وب (Web Fonts)
• 52. استفاده از Google Fonts
• 53. مقدمه‌ای بر CSS Grid Template Areas
• 54. Grid Layout: ایجاد طرح‌بندی‌های پیچیده با نام‌گذاری
• 55. آشنایی با CSS Containment
• 56. استفاده از CSS Isolation
• 57. مفاهیم اولیه CSS Cascade و Specificity
• 58. نحوه حل مشکلات Cascade و Specificity
• 59. آشنایی با CSS Reset و Normalize
• 60. استفاده از CSS Reset برای یکنواخت‌سازی ظاهر
• 61. مقدمه‌ای بر CSS Custom Media Queries
• 62. استفاده از CSS Custom Media Queries برای طراحی адапتیو
• 63. آشنایی با CSS Pseudo-classes و Pseudo-elements
• 64. کاربرد Pseudo-classes برای تغییر حالت عناصر
• 65. آشنایی با CSS Animations Timing Functions
• 66. استفاده از Timing Functions برای کنترل سرعت انیمیشن
• 67. مقدمه‌ای بر CSS Variables و Fallbacks
• 68. آشنایی با CSS @keyframes
• 69. استفاده از @keyframes برای ایجاد انیمیشن‌های پیچیده
• 70. آشنایی با CSS Scroll Snap Points
• 71. استفاده از Scroll Snap Points برای اسکرول روان
• 72. مقدمه‌ای بر CSS Aspect Ratio
• 73. استفاده از Aspect Ratio برای حفظ تناسب تصاویر
• 74. آشنایی با CSS object-fit و object-position
• 75. استفاده از object-fit و object-position برای مدیریت تصاویر
• 76. مقدمه‌ای بر CSS backdrop-filter
• 77. استفاده از backdrop-filter برای ایجاد جلوه‌های ویژه
• 78. آشنایی با CSS writing-mode
• 79. استفاده از writing-mode برای تغییر جهت متن
• 80. مقدمه‌ای بر CSS all property
• 81. استفاده از all property برای اعمال تغییرات به تمام ویژگی‌ها
• 82. آشنایی با CSS logical properties and values
• 83. استفاده از logical properties برای طراحی چندزبانه
• 84. مقدمه‌ای بر CSS initial value
• 85. استفاده از initial value برای بازگرداندن مقادیر پیش‌فرض
• 86. آشنایی با CSS inherit value
• 87. استفاده از inherit value برای به ارث بردن مقادیر
• 88. مقدمه‌ای بر CSS unset value
• 89. استفاده از unset value برای حذف مقادیر
• 90. آشنایی با CSS revert value
• 91. استفاده از revert value برای بازگرداندن مقادیر به نسخه قبلی
• 92. مقدمه‌ای بر CSS calc()
• 93. استفاده از calc() برای محاسبات در CSS
• 94. آشنایی با CSS clamp()
• 95. استفاده از clamp() برای محدود کردن مقادیر
• 96. مقدمه‌ای بر CSS min() و max()
• 97. استفاده از min() و max() برای انتخاب مقادیر
• 98. آشنایی با CSS color-mix()
• 99. استفاده از color-mix() برای ترکیب رنگ‌ها
• 100. مقدمه‌ای بر CSS perspective()