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

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

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

عنوان دوره: دوره CSS for Global Challenges

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

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

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

• 1. مقدمه: چرا CSS برای چالش‌های جهانی اهمیت دارد؟
• 2. آشنایی با نقش CSS در وب
• 3. نحوه افزودن CSS به یک صفحه وب: Inline, Internal, External
• 4. ساختار یک قانون CSS: انتخابگر، اعلان، ویژگی و مقدار
• 5. کامنت‌گذاری در CSS
• 6. انتخابگرهای اصلی: Element, Class, ID
• 7. انتخابگرهای Attribute
• 8. انتخابگرهای ترکیبی: Descendant, Child, Sibling
• 9. شبه‌کلاس‌ها (Pseudo-classes): مفاهیم اولیه مانند hover: و focus:
• 10. شبه‌المان‌ها (Pseudo-elements): مفاهیم اولیه مانند before:: و after::
• 11. اولویت در CSS: مفهوم Specificity
• 12. مفهوم وراثت (Inheritance) در CSS
• 13. آشنایی با مفهوم Cascade و ترتیب اعمال استایل‌ها
• 14. استفاده از ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای بررسی CSS
• 15. مفهوم Box Model: محتوا، Padding, Border, Margin
• 16. واحدها در CSS: واحدهای مطلق (px, pt)
• 17. واحدها در CSS: واحدهای نسبی (em, rem, %)
• 18. کنترل ابعاد: ویژگی‌های width و height
• 19. ویژگی padding برای ایجاد فاصله داخلی
• 20. ویژگی border و استایل‌های مختلف آن
• 21. ویژگی margin و مفهوم Margin Collapsing
• 22. ویژگی box-sizing: border-box و اهمیت آن
• 23. ویژگی display: درک مقادیر block, inline, و inline-block
• 24. کنترل سرریز محتوا با ویژگی overflow
• 25. مدل‌های رنگ در CSS: نام رنگ، HEX, RGB, RGBA
• 26. مدل رنگ HSL و HSLA
• 27. تنظیم رنگ پس‌زمینه با background-color
• 28. استفاده از تصویر پس‌زمینه با background-image
• 29. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 30. ویژگی background-size برای کنترل اندازه تصویر پس‌زمینه
• 31. ایجاد گرادینت‌های خطی و شعاعی
• 32. ویژگی font-family و فونت‌های امن وب
• 33. بارگذاری فونت‌های سفارشی با font-face@
• 34. کنترل اندازه و وزن فونت با font-size و font-weight
• 35. ویژگی‌های font-style و text-decoration
• 36. تنظیم ارتفاع خط با line-height برای خوانایی بهتر
• 37. تراز کردن متن با text-align
• 38. فاصله‌گذاری بین حروف و کلمات
• 39. ایجاد سایه برای متن با text-shadow
• 40. ویژگی opacity برای کنترل شفافیت المان‌ها
• 41. مفهوم طراحی وب واکنش‌گرا (Responsive Web Design)
• 42. استفاده از متا تگ viewport
• 43. مقدمه‌ای بر Media Queries
• 44. استراتژی Mobile-First در طراحی واکنش‌گرا
• 45. ساخت شبکه‌بندی‌های سیال (Fluid Grids) با درصد
• 46. واکنش‌گرا کردن تصاویر و ویدئوها
• 47. واحدهای وابسته به Viewport: vw, vh, vmin, vmax
• 48. استفاده از min-width و max-width در طراحی
• 49. ترکیب شرط‌ها در Media Queries
• 50. تایپوگرافی واکنش‌گرا با تابع ()clamp
• 51. موقعیت‌یابی در CSS: ویژگی position
• 52. موقعیت‌یابی Relative و Absolute
• 53. موقعیت‌یابی Fixed و Sticky
• 54. کنترل لایه‌ها با z-index و مفهوم Stacking Context
• 55. مقدمه‌ای بر Flexbox: چیدمان تک‌بعدی
• 56. ویژگی‌های Flex Container: جهت، چینش و شکستن خط
• 57. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 58. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 59. ویژگی‌های Flex Items: رشد، کوچک شدن و مبنا
• 60. استفاده از ویژگی order برای تغییر ترتیب آیتم‌ها
• 61. مقدمه‌ای بر CSS Grid: چیدمان دو‌بعدی
• 62. تعریف ستون‌ها و ردیف‌ها در Grid
• 63. جایگذاری آیتم‌ها بر اساس خطوط Grid
• 64. استفاده از واحد fr برای تقسیم‌بندی فضا
• 65. ایجاد فاصله بین آیتم‌ها با ویژگی gap
• 66. نام‌گذاری نواحی در Grid برای چیدمان ساده‌تر
• 67. ترکیب هوشمندانه Flexbox و Grid
• 68. شبه‌کلاس‌های ساختاری: first-child, last-child, nth-child:
• 69. شبه‌کلاس‌های مربوط به فرم‌ها: checked, disabled, required:
• 70. انتخابگرهای پیشرفته: not, is, where:():
• 71. استفاده از Transitions برای انیمیشن‌های نرم
• 72. کنترل زمان‌بندی و تاخیر در Transitions
• 73. انیمیشن‌های پیچیده‌تر با Animations و keyframes@
• 74. ویژگی‌های Transform: توابع translate, rotate, scale
• 75. ترنسفورم‌های سه‌بعدی (3D Transforms)
• 76. مقدمه‌ای بر متغیرهای CSS (Custom Properties)
• 77. کاربردهای عملی متغیرها: ساخت تم (Theming)
• 78. استفاده از تابع ()calc برای محاسبات پویا
• 79. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass
• 80. مفهوم BEM برای نام‌گذاری کلاس‌ها و سازماندهی کد
• 81. مقدمه‌ای بر CSS-in-JS
• 82. بهینه‌سازی کارایی CSS: درک Critical Rendering Path
• 83. فشرده‌سازی (Minification) فایل‌های CSS
• 84. چالش جهانی دسترسی‌پذیری (Accessibility) و نقش CSS
• 85. طراحی برای صفحه‌خوان‌ها: پنهان‌سازی محتوا به روش صحیح
• 86. اهمیت کنتراست رنگ برای کاربران کم‌بینا
• 87. استفاده از شبه‌کلاس focus-visible: برای بهبود تجربه کاربری
• 88. رسانه کوئری prefers-reduced-motion برای کاهش حرکت
• 89. چالش جهانی پشتیبانی از زبان‌های مختلف (Internationalization)
• 90. حمایت از زبان‌های راست‌به‌چپ (RTL) در CSS
• 91. معرفی Logical Properties برای طراحی چندزبانه
• 92. چالش جهانی پایداری (Sustainability) و وب سبز
• 93. پیاده‌سازی تم تیره (Dark Mode) با متغیرهای CSS و Media Query
• 94. طراحی نسخه‌های قابل چاپ (Print Stylesheets)
• 95. ساخت کامپوننت‌های قابل استفاده مجدد: کارت‌ها
• 96. ساخت کامپوننت‌های قابل استفاده مجدد: دکمه‌ها و فرم‌ها
• 97. استایل‌دهی به لیست‌ها و جداول به صورت مدرن
• 98. پروژه نهایی: ساخت یک صفحه فرود برای یک سازمان مردم‌نهاد جهانی
• 99. جمع‌بندی و گام‌های بعدی برای تسلط بر CSS
• 100. **دسترسی‌پذیری (Accessibility) و ملاحظات جهانی در CSS: رنگ، کنتراست، تایپوگرافی، و رسپانسیو بودن**