فلش‌کارت‌های آموزشی CSS for Interaction Design

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

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

عنوان دوره: دوره CSS for Interaction Design

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

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

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

• 1. آشنایی با مفاهیم پایه‌ای CSS
• 2. مقدمه‌ای بر CSS و نقش آن در طراحی تعاملی
• 3. ساختار سند HTML و ارتباط آن با CSS
• 4. انتخابگرهای CSS: انتخاب عناصر HTML
• 5. انتخابگرهای کلاس و شناسه (ID)
• 6. انتخابگرهای صفات (Attribute Selectors)
• 7. انتخابگرهای شبه‌کلاس (Pseudo-classes)
• 8. انتخابگرهای شبه‌عنصر (Pseudo-elements)
• 9. نوشتن قوانین CSS: خاصیت‌ها و مقادیر
• 10. واحدها در CSS: پیکسل، درصد، em، rem
• 11. رنگ‌ها در CSS: مقادیر هگزادسیمال، RGB، RGBA
• 12. مدیریت متن: فونت، اندازه، وزن، رنگ
• 13. مدیریت پس‌زمینه: رنگ، تصویر، تکرار
• 14. جعبه مدل (Box Model) در CSS
• 15. حاشیه‌ها (Margins)، فاصله‌ها (Paddings) و قاب‌ها (Borders)
• 16. نمایش عناصر: inline، block، inline-block
• 17. خاصیت display و کاربردهای آن
• 18. خاصیت position: static، relative، absolute، fixed
• 19. خاصیت float و کاربردهای آن در چیدمان
• 20. خاصیت clear و مدیریت جریان شناور
• 21. مدیریت طرح‌بندی با Flexbox: مفاهیم پایه
• 22. راه‌اندازی Flexbox: display: flex
• 23. خاصیت justify-content در Flexbox
• 24. خاصیت align-items در Flexbox
• 25. خاصیت flex-direction در Flexbox
• 26. خاصیت flex-wrap در Flexbox
• 27. خاصیت order در Flexbox
• 28. خاصیت flex-grow، flex-shrink، flex-basis
• 29. مدیریت طرح‌بندی با Grid: مفاهیم پایه
• 30. راه‌اندازی Grid: display: grid
• 31. تعریف سطرها و ستون‌ها در Grid
• 32. خاصیت grid-template-columns و grid-template-rows
• 33. خاصیت grid-gap (یا gap)
• 34. خاصیت justify-items و align-items در Grid
• 35. خاصیت justify-self و align-self در Grid
• 36. موقعیت‌دهی عناصر در Grid
• 37. تعاملات کاربر با CSS: hover، active، focus
• 38. انتقال‌ها (Transitions) در CSS: ایجاد حرکات نرم
• 39. خاصیت transition-property
• 40. خاصیت transition-duration
• 41. خاصیت transition-timing-function
• 42. خاصیت transition-delay
• 43. انیمیشن‌ها (Animations) در CSS: ایجاد حرکات پیچیده‌تر
• 44. تعریف Keyframes برای انیمیشن
• 45. خاصیت animation-name
• 46. خاصیت animation-duration
• 47. خاصیت animation-timing-function
• 48. خاصیت animation-delay
• 49. خاصیت animation-iteration-count
• 50. خاصیت animation-direction
• 51. خاصیت animation-fill-mode
• 52. خاصیت animation-play-state
• 53. کاربرد CSS در طراحی واکنش‌گرا (Responsive Design)
• 54. واحد viewport: vh، vw
• 55. واحد min/max-width و min/max-height
• 56. مدیریت تصاویر در طرح‌بندی واکنش‌گرا
• 57. طراحی برای دستگاه‌های مختلف با Media Queries
• 58. Media Queries: شرط‌ها و مقادیر
• 59. استفاده از Flexbox و Grid در طرح‌بندی واکنش‌گرا
• 60. نکات پیشرفته در انیمیشن‌ها و تعاملات
• 61. استفاده از CSS Variables (Custom Properties)
• 62. مدیریت فرم‌ها با CSS
• 63. طراحی دکمه‌های تعاملی
• 64. ایجاد منوهای ناوبری جذاب
• 65. استفاده از آیکون‌ها با Font Awesome (یا معادل)
• 66. بهینه‌سازی عملکرد CSS
• 67. اصول کدنویسی تمیز در CSS
• 68. اصول دسترسی‌پذیری (Accessibility) در CSS
• 69. مقدمه‌ای بر پیش‌پردازنده‌های CSS (مانند Sass/SCSS)
• 70. متغیرها در Sass/SCSS
• 71. تودرتو کردن (Nesting) در Sass/SCSS
• 72. میکسین‌ها (Mixins) در Sass/SCSS
• 73. ارث‌بری (Inheritance) در Sass/SCSS
• 74. توابع (Functions) در Sass/SCSS
• 75. سازماندهی فایل‌ها در Sass/SCSS
• 76. کار با کتابخانه‌های CSS (مانند Bootstrap/Tailwind - با رویکرد بومی)
• 77. اصول طراحی رابط کاربری (UI Design) با CSS
• 78. اصول تجربه کاربری (UX Design) و نقش CSS
• 79. تست و اشکال‌زدایی CSS
• 80. ابزارهای توسعه‌دهنده مرورگر برای CSS
• 81. آخرین روندها در CSS برای طراحی تعاملی
• 82. کاربرد CSS در ساخت رابط‌های کاربری مدرن
• 83. خلاصه‌ای از اصول طراحی تعاملی با CSS
• 84. تکنیک‌های پیشرفته برای ایجاد انیمیشن‌های پیچیده
• 85. استفاده از CSS برای ایجاد جلوه‌های بصری جذاب
• 86. مدیریت حالت‌های مختلف عناصر با CSS
• 87. اصول طراحی بصری در وب
• 88. ارتباط CSS با جاوا اسکریپت در طراحی تعاملی
• 89. نکات تکمیلی برای بهبود تجربه کاربری
• 90. ملاحظات اخلاقی در طراحی تعاملی با CSS (مثلاً عدم ایجاد حواس‌پرتی بیش از حد)
• 91. اصول طراحی برای کاربران ایرانی
• 92. ملاحظات امنیتی در استفاده از CSS (مانند جلوگیری از حملات XSS)
• 93. مدیریت منابع CSS در پروژه‌های بزرگ
• 94. ارزیابی کیفیت طراحی تعاملی با CSS
• 95. معرفی منابع یادگیری بیشتر در زمینه CSS و طراحی تعاملی
• 96. جمع‌بندی و گام‌های بعدی در مسیر یادگیری
• 97. طراحی فرم‌های پیشرفته با CSS
• 98. بهبود خوانایی و قابلیت فهم کد CSS
• 99. مدیریت تم‌ها و حالت‌های مختلف (مثلاً حالت شب)
• 100. ساخت کامپوننت‌های UI با CSS