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

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

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

عنوان دوره: دوره CSS for Well-being

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

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

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

• 1. مبانی CSS:
• 2. آشنایی با CSS و نقش آن در طراحی وب
• 3. نحوه نوشتن و اعمال CSS (inline, internal, external)
• 4. انتخابگرها (Selectors) در CSS (عناصر، کلاس‌ها، IDها)
• 5. مفهوم Cascading و Specificity در CSS
• 6. واحد‌های اندازه‌گیری در CSS (px, em, rem, %, vw, vh)
• 7. رنگ‌ها در CSS (نام رنگ، کد HEX، RGB، RGBA، HSL، HSLA)
• 8. خواص متن در CSS (font-family, font-size, font-weight, line-height, text-align)
• 9. خواص پس‌زمینه در CSS (background-color, background-image, background-repeat, background-position)
• 10. مدل جعبه‌ای (Box Model) در CSS (content, padding, border, margin)
• 11. حاشیه (Border) در CSS (border-style, border-width, border-color)
• 12. طراحی و Layout با CSS:
• 13. نمایش (Display) در CSS (block, inline, inline-block, none)
• 14. موقعیت‌دهی (Positioning) در CSS (static, relative, absolute, fixed, sticky)
• 15. شناور سازی (Floats) در CSS (float: left, float: right, clear)
• 16. طراحی صفحه‌های چند ستونی با CSS (column-count, column-gap, column-rule)
• 17. Flexbox در CSS (flex-direction, justify-content, align-items)
• 18. Grid Layout در CSS (grid-template-columns, grid-template-rows, grid-gap)
• 19. واکنش‌گرایی (Responsive Design) با Media Queries
• 20. Viewports و مقیاس بندی صفحه در دستگاه‌های مختلف
• 21. طراحی منوهای ناوبری با CSS
• 22. طراحی فرم‌ها با CSS
• 23. ظاهر و جلوه‌های ویژه با CSS:
• 24. سایه‌ها در CSS (box-shadow, text-shadow)
• 25. گرادیان‌ها در CSS (linear-gradient, radial-gradient)
• 26. انتقال‌ها (Transitions) در CSS (transition-property, transition-duration, transition-timing-function)
• 27. تبدیل‌ها (Transforms) در CSS (translate, rotate, scale, skew)
• 28. انیمیشن‌ها در CSS (keyframes, animation-name, animation-duration, animation-iteration-count)
• 29. فیلترها (Filters) در CSS (blur, brightness, contrast, grayscale, sepia)
• 30. حالت‌های :hover, :active, :focus در CSS
• 31. استفاده از pseudo-elements (::before, ::after)
• 32. cursor در CSS (تغییر شکل نشانگر ماوس)
• 33. opacity در CSS (شفافیت)
• 34. مباحث پیشرفته CSS:
• 35. متغیرها در CSS (Custom Properties)
• 36. توابع calc() در CSS
• 37. فونت‌های سفارشی (Custom Fonts)
• 38. SVG و CSS
• 39. استفاده از CSS Sprites
• 40. مفاهیم Accessibility (A11y) در CSS
• 41. بهینه‌سازی CSS (Minification, Compression)
• 42. preprocessors CSS (Sass, Less)
• 43. PostCSS
• 44. CSS Modules
• 45. چارچوب‌های CSS:
• 46. آشنایی با چارچوب‌های CSS (Bootstrap, Tailwind CSS, Materialize)
• 47. Bootstrap: نصب و پیکربندی
• 48. Bootstrap: سیستم Grid
• 49. Bootstrap: کامپوننت‌ها (Buttons, Navbar, Forms, Cards)
• 50. Tailwind CSS: نصب و پیکربندی
• 51. Tailwind CSS: مفاهیم Utility-First
• 52. Tailwind CSS: سفارشی‌سازی
• 53. Materialize: نصب و پیکربندی
• 54. Materialize: کامپوننت‌ها
• 55. مقایسه و انتخاب چارچوب CSS مناسب
• 56. معماری و نگهداری CSS:
• 57. اصول SOLID در CSS
• 58. BEM (Block, Element, Modifier)
• 59. SMACSS (Scalable and Modular Architecture for CSS)
• 60. OOCSS (Object-Oriented CSS)
• 61. ITCSS (Inverted Triangle CSS)
• 62. CSSLint و استانداردهای کدنویسی CSS
• 63. Git و کنترل ورژن CSS
• 64. سازماندهی فایل‌های CSS
• 65. مستندسازی CSS
• 66. CSS و JavaScript:
• 67. تغییر CSS با JavaScript
• 68. استفاده از CSS Modules با JavaScript
• 69. ایجاد انیمیشن با CSS و JavaScript
• 70. Web Components و Shadow DOM
• 71. CSS و Well-being:
• 72. تأثیر رنگ‌ها در CSS بر احساسات و Well-being
• 73. استفاده از فونت‌های خوانا و Accessible برای Well-being
• 74. طراحی رابط کاربری ساده و قابل فهم با CSS
• 75. جلوگیری از خستگی چشم با استفاده از CSS
• 76. طراحی واکنش‌گرا برای Well-being کاربران موبایل
• 77. ایجاد حس آرامش با استفاده از فضای سفید و طرح‌های ساده در CSS
• 78. استفاده از انیمیشن‌های ظریف و غیر مزاحم در CSS
• 79. تأثیر کنتراست رنگی بر Accessibility و Well-being
• 80. ایجاد حس مثبت با استفاده از تصاویر و آیکون‌های مناسب در CSS
• 81. بهینه‌سازی سرعت بارگذاری صفحه برای Well-being کاربران
• 82. پروژه‌های عملی:
• 83. طراحی یک صفحه فرود ساده
• 84. طراحی یک وبلاگ
• 85. طراحی یک فروشگاه اینترنتی
• 86. طراحی یک پنل مدیریت
• 87. طراحی یک پورتفولیو
• 88. طراحی یک صفحه ۴۰۴
• 89. بهینه‌سازی CSS یک پروژه موجود
• 90. طراحی یک وبسایت با Bootstrap
• 91. طراحی یک وبسایت با Tailwind CSS
• 92. طراحی یک وبسایت با Materialize
• 93. در اینجا 8 سرفصل اضافی برای دوره "CSS for Well-being" ارائه شده است:
• 94. **اصول انعطاف‌پذیری و دسترس‌پذیری در CSS**
• 95. **طراحی واکنش‌گرا (Responsive Design) با رویکرد سلامتی**
• 96. **استفاده از رنگ‌ها برای ایجاد آرامش و تمرکز (روانشناسی رنگ در وب)**
• 97. **بهینه‌سازی خوانایی متن با تنظیمات پیشرفته فونت و فاصله‌گذاری**
• 98. **ایجاد رابط‌های کاربری حسی (Sensory UI) با CSS**
• 99. **مدیریت انیمیشن‌ها و افکت‌های بصری برای جلوگیری از خستگی کاربر**
• 100. **کاربرد CSS در بهبود تجربه کاربری (UX) و ایجاد حس مثبت**