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

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

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

عنوان دوره: CSS for Environmental Remediation

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر CSS و نقش آن در پروژه‌های زیست‌محیطی
• 2. آشنایی با ساختار دوره و پروژه‌های پاکسازی محیط زیست
• 3. اتصال CSS به HTML: روش‌های داخلی، خارجی و درون‌خطی
• 4. سینتکس پایه CSS: انتخابگرها، خصوصیات و مقادیر
• 5. اولین استایل‌دهی: رنگ و پس‌زمینه یک گزارش آلودگی
• 6. کامنت‌گذاری در CSS برای مستندسازی داده‌ها
• 7. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools)
• 8. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 9. انتخابگرهای ترکیبی (Combinators): نسل، فرزند، برادر
• 10. انتخابگرهای صفت (Attribute Selectors) برای فیلتر داده‌های محیطی
• 11. شبه‌کلاس‌ها (Pseudo-classes): استایل‌دهی به وضعیت‌های تعاملی
• 12. استفاده از hover: برای نمایش اطلاعات تکمیلی نقاط روی نقشه
• 13. شبه‌المان‌ها (Pseudo-elements): افزودن آیکون‌های هشدار با before:: و after::
• 14. گروه‌بندی انتخابگرها برای استایل‌های مشترک
• 15. اولویت در CSS: مفهوم Specificity
• 16. وراثت (Inheritance) و نحوه کنترل آن
• 17. مفهوم Cascade و ترتیب اعمال استایل‌ها
• 18. استفاده از important! و دلایل پرهیز از آن
• 19. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 20. خصوصیت box-sizing برای کنترل ابعاد
• 21. واحدها در CSS: واحدهای مطلق (px, pt)
• 22. واحدهای نسبی (em, rem, %, vw, vh)
• 23. تنظیم عرض و ارتفاع المان‌ها
• 24. استفاده از max-width برای طراحی واکنش‌گرا
• 25. رنگ‌ها در CSS: کلمات کلیدی، HEX، RGB و RGBA
• 26. استفاده از HSL و HSLA برای شفافیت در لایه‌های نقشه
• 27. استایل‌دهی به پس‌زمینه: background-color و background-image
• 28. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 29. استفاده از گرادیان برای نمایش شاخص‌های کیفیت هوا (AQI)
• 30. استایل‌دهی به حاشیه‌ها (Borders)
• 31. گرد کردن گوشه‌ها با border-radius
• 32. ایجاد سایه برای جعبه‌ها (box-shadow) و متون (text-shadow)
• 33. مبانی تایپوگرافی: font-family و فونت‌های وب
• 34. تنظیم اندازه و وزن فونت (font-size, font-weight)
• 35. استایل‌دهی به متن: text-align, text-decoration, text-transform
• 36. فاصله بین خطوط (line-height) برای خوانایی گزارش‌ها
• 37. فاصله بین حروف و کلمات (letter-spacing, word-spacing)
• 38. استایل‌دهی به لیست‌ها برای نمایش مراحل پاکسازی
• 39. کنترل سرریز متن (text-overflow) در جداول داده
• 40. خصوصیت display: مفاهیم block, inline و inline-block
• 41. مخفی کردن المان‌ها با display: none و visibility: hidden
• 42. موقعیت‌یابی (Positioning): static و relative
• 43. موقعیت‌یابی مطلق (absolute) برای المان‌های روی نقشه
• 44. موقعیت‌یابی ثابت (fixed) و چسبان (sticky) برای هدرها
• 45. کنترل لایه‌ها با z-index برای نمایش داده‌های جغرافیایی
• 46. مقدمه‌ای بر Flexbox: یک‌بعدی
• 47. خصوصیات کانتینر Flexbox: flex-direction و flex-wrap
• 48. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 49. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 50. کنترل چندین خط با align-content
• 51. خصوصیات آیتم‌های Flexbox: order, flex-grow, flex-shrink
• 52. پایه‌گذاری اندازه آیتم‌ها با flex-basis
• 53. ساخت گالری تصاویر از مناطق تحت نظارت با Flexbox
• 54. مقدمه‌ای بر CSS Grid: دو‌بعدی
• 55. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 56. واحد fr برای ستون‌های انعطاف‌پذیر
• 57. ایجاد فاصله بین خانه‌های گرید با gap
• 58. قرار دادن آیتم‌ها در گرید با grid-column و grid-row
• 59. نام‌گذاری خطوط و نواحی گرید (Grid Lines and Areas)
• 60. چینش خودکار آیتم‌ها با grid-auto-flow
• 61. ساخت داشبورد پیچیده داده‌های محیطی با CSS Grid
• 62. طراحی واکنش‌گرا (Responsive Design): چرا و چگونه؟
• 63. تنظیم Viewport برای دستگاه‌های موبایل
• 64. مبانی Media Queries برای تعریف Breakpointها
• 65. رویکرد Mobile-First در طراحی صفحات گزارش‌دهی
• 66. استایل‌دهی واکنش‌گرا به تصاویر و ویدئوها
• 67. استفاده از Flexbox و Grid در طراحی واکنش‌گرا
• 68. مقدمه‌ای بر Transitionها برای ایجاد تغییرات نرم
• 69. کنترل مدت زمان، تأخیر و تابع زمانی Transition
• 70. ترکیب Transition با شبه‌کلاس hover: برای افکت‌های تعاملی
• 71. مقدمه‌ای بر Transformهای دو‌بعدی: translate, rotate, scale
• 72. مقدمه‌ای بر Transformهای سه‌بعدی
• 73. انیمیشن‌های سفارشی با keyframes@
• 74. خصوصیت animation و کنترل کامل انیمیشن‌ها
• 75. ایجاد یک نمودار متحرک برای نمایش روند کاهش آلاینده‌ها
• 76. متغیرها در CSS (Custom Properties) برای تم‌بندی داشبورد
• 77. استفاده از تابع ()calc برای محاسبات دینامیک
• 78. فیلترهای CSS: اعمال افکت‌های بصری مانند blur و grayscale
• 79. ترکیب حالت‌های مختلف با blend-mode
• 80. برش المان‌ها به اشکال سفارشی با clip-path
• 81. استایل‌دهی به فرم‌ها: طراحی فرم‌های ورود داده میدانی
• 82. زیباسازی دکمه‌ها و فیلدهای ورودی
• 83. شبه‌کلاس‌های مربوط به فرم‌ها: focus, checked, valid:
• 84. استایل‌دهی به جداول برای نمایش داده‌های عددی
• 85. طراحی جداول واکنش‌گرا
• 86. مفهوم BEM برای نام‌گذاری کلاس‌ها در پروژه‌های بزرگ
• 87. سازماندهی فایل‌های CSS برای مدیریت بهتر
• 88. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 89. استفاده از متغیرها و Nesting در SASS
• 90. مفاهیم Mixin و Extend برای کدهای قابل استفاده مجدد
• 91. بهینه‌سازی عملکرد CSS: کاهش حجم فایل و انتخابگرهای بهینه
• 92. دسترسی‌پذیری (Accessibility): طراحی برای همه کاربران
• 93. استفاده از رنگ‌های با کنتراست بالا برای خوانایی داده‌ها
• 94. پروژه اول: ساخت صفحه استاتیک "گزارش اثرات زیست‌محیطی"
• 95. پروژه دوم: طراحی داشبورد تعاملی "شاخص کیفیت هوا" با Flexbox
• 96. پروژه سوم: ایجاد نقشه واکنش‌گرای "سایت‌های پاکسازی" با Grid
• 97. پروژه چهارم: متحرک‌سازی نمودارهای "سطح خلوص آب"
• 98. جمع‌بندی نهایی و مسیر یادگیری آینده در CSS
• 99. **طراحی واکنش‌گرا (Responsive Design) با CSS: سازگاری گزارش‌های زیست‌محیطی با دستگاه‌های مختلف و بهینه‌سازی برای موبایل**
• 100. **انیمیشن و ترنزیشن در CSS: نمایش بصری تغییرات داده‌های محیطی و بهبود تجربه کاربری**