دوره CSS for Gamification همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره CSS for Gamification

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

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

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

• 1. مقدمه ای بر CSS و اهمیت آن در Gamification
• 2. مفاهیم پایه CSS: انتخابگرها، ویژگی ها و مقادیر
• 3. نصب و راه‌اندازی ابزارهای لازم برای CSS
• 4. مرور کلی بر نحوه عملکرد CSS در مرورگر
• 5. انتخابگرهای ساده (تگ، کلاس، آیدی)
• 6. انتخابگرهای ترکیبی (فرزند، برادر، همسایه)
• 7. انتخابگرهای ویژگی (Attribute Selectors)
• 8. انتخابگرهای شبه کلاس (Pseudo-classes)
• 9. انتخابگرهای شبه المان (Pseudo-elements)
• 10. اولویت انتخابگرها (Specificity)
• 11. قاعده !important و نحوه استفاده درست از آن
• 12. مدیریت ارث بری (Inheritance) در CSS
• 13. واحدها در CSS (px, em, rem, %, vw, vh)
• 14. رنگ ها در CSS (نام رنگ ها، HEX، RGB، RGBA، HSL، HSLA)
• 15. شفافیت (Opacity) و ترنسپرنسی (Transparency)
• 16. پس زمینه (Background) و خصوصیات آن (background-color, background-image)
• 17. خصوصیت background-repeat
• 18. خصوصیت background-position
• 19. خصوصیت background-size
• 20. خصوصیت background-attachment
• 21. استفاده از تصاویر پس زمینه برای المان های Gamified
• 22. مدیریت فونت ها (Font Properties)
• 23. خصوصیت font-family
• 24. خصوصیت font-size
• 25. خصوصیت font-weight
• 26. خصوصیت font-style
• 27. وب فونت ها (Web Fonts) و نحوه استفاده از آنها
• 28. مدیریت متن (Text Properties)
• 29. خصوصیت text-align
• 30. خصوصیت text-decoration
• 31. خصوصیت text-transform
• 32. خصوصیت line-height
• 33. خصوصیت letter-spacing
• 34. خصوصیت word-spacing
• 35. مدیریت کادربندی (Box Model)
• 36. خصوصیت width و height
• 37. خصوصیت padding
• 38. خصوصیت border
• 39. خصوصیت margin
• 40. مدیریت نمایش (Display Property)
• 41. مقادیر display (block, inline, inline-block, none, flex, grid)
• 42. مفهوم Flexbox و کاربردهای آن
• 43. اصول Flexbox (container و items)
• 44. خصوصیات Flex Container (display, flex-direction, justify-content)
• 45. خصوصیات Flex Container (align-items, flex-wrap, align-content)
• 46. خصوصیات Flex Items (order, flex-grow, flex-shrink, flex-basis, align-self)
• 47. کاربردهای Flexbox در طراحی رابط کاربری Gamified
• 48. مفهوم Grid Layout و کاربردهای آن
• 49. اصول Grid Layout (container و items)
• 50. خصوصیات Grid Container (display, grid-template-columns, grid-template-rows)
• 51. خصوصیات Grid Container (grid-gap, justify-items, align-items)
• 52. خصوصیات Grid Items (grid-column, grid-row, grid-area)
• 53. کاربردهای Grid Layout در طراحی رابط کاربری Gamified
• 54. تکنیک های موقعیت دهی (Positioning)
• 55. مقادیر position (static, relative, absolute, fixed, sticky)
• 56. خصوصیات top, bottom, left, right
• 57. مدیریت z-index برای لایه بندی المان ها
• 58. استفاده از positioning در ایجاد انیمیشن های Gamified
• 59. مفهوم Overlays و Modals برای Gamification
• 60. استفاده از CSS برای ایجاد دکمه ها و عناصر تعاملی
• 61. استایل دهی به دکمه ها (Button Styling)
• 62. افزودن آیکون ها به دکمه ها
• 63. استفاده از Pseudo-elements برای جلوه های دکمه
• 64. ایجاد دکمه های پیشرفته و سفارشی
• 65. طراحی کارت ها (Cards) برای نمایش اطلاعات در Gamification
• 66. استایل دهی به کارت ها با استفاده از Box Shadow و Border Radius
• 67. ایجاد انیمیشن برای کارت ها (Hover Effects)
• 68. استفاده از Grid و Flexbox برای چیدمان کارت ها
• 69. طراحی نوتیفیکیشن ها (Notifications) و پیام ها
• 70. استفاده از CSS برای ایجاد انیمیشن های ساده
• 71. مفهوم Transitions در CSS
• 72. خصوصیات transition-property, transition-duration, transition-timing-function, transition-delay
• 73. کاربرد Transitions در تغییر حالت المان ها
• 74. مفهوم Animations در CSS
• 75. تعریف Keyframes (@keyframes)
• 76. دستور animation-name, animation-duration, animation-timing-function
• 77. دستور animation-delay, animation-iteration-count, animation-direction
• 78. دستور animation-fill-mode, animation-play-state
• 79. ایجاد انیمیشن های پیچیده برای عناصر Gamified (مانند بارگذاری، پیشرفت)
• 80. مدیریت انیمیشن ها با شبه کلاس ها (hover, active)
• 81. مفهوم Transform در CSS
• 82. خصوصیت transform (scale, rotate, translate, skew)
• 83. ترکیب Transform ها
• 84. استفاده از Transform ها برای جلوه های بصری جذاب
• 85. مفهوم Filter در CSS
• 86. خصوصیت filter (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia)
• 87. کاربرد Filter ها در Gamification (مانند افکت های تصویری)
• 88. مدیریت Scrollbar ها در CSS
• 89. استفاده از CSS Custom Properties (Variables)
• 90. مزایای استفاده از Variables در Gamification
• 91. نحوه تعریف و استفاده از Variables
• 92. مدیریت تم ها (Themes) با استفاده از Variables
• 93. طراحی ریسپانسیو (Responsive Design) با Media Queries
• 94. کاربرد Media Queries در Gamification برای دستگاه های مختلف
• 95. انتقال المان ها (Floating Elements) و مدیریت آن
• 96. استفاده از Clip-path برای ایجاد اشکال سفارشی
• 97. استفاده از Masking برای ایجاد جلوه های خاص
• 98. ساخت عناصر Gamified مانند نوار پیشرفت (Progress Bars)
• 99. ساخت المان های امتیاز دهی (Score Displays)
• 100. طراحی نشان ها (Badges) و دستاوردها