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

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

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

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

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

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

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

• 1. مقدمه به توسعه وب برای ابتکارات زیست‌محیطی
• 2. مبانی HTML برای ساختار محتوای زیست‌محیطی
• 3. CSS چیست؟ استایل‌دهی برای وبی سبزتر
• 4. روش‌های درج CSS (Inline، Internal، External)
• 5. سینتکس CSS: انتخاب‌کننده‌ها، ویژگی‌ها، مقادیر
• 6. انتخاب‌کننده‌های پایه CSS (Type، Class، ID)
• 7. انتخاب‌کننده‌های گروهی و زنجیره‌ای
• 8. آبشار (Cascade)، اختصاصی‌بودن و وراثت در تم‌های زیست‌محیطی
• 9. آشنایی با واحدهای CSS (px, em, rem, %, vw, vh, fr)
• 10. کار با رنگ‌ها برای برندسازی زیست‌محیطی (Hex, RGB, HSL, RGBA)
• 11. اعمال پس‌زمینه‌ها: رنگ‌ها، تصاویر و الگوها
• 12. استایل‌دهی متن: Font-Family، Size، Weight، Style
• 13. هم‌ترازی متن، دکوراسیون و تبدیل برای پیام‌های تاثیرگذار
• 14. Line-height، Letter-spacing و Word-spacing برای خوانایی
• 15. استایل‌دهی لینک‌ها و دکمه‌ها برای فراخوان‌های زیست‌محیطی
• 16. مدل جعبه CSS: محتوا، Padding، Border، Margin
• 17. کنترل Padding برای فضای بصری
• 18. طراحی Border برای عناصر و بخش‌ها
• 19. مدیریت Margin برای فاصله بین عناصر
• 20. Box-Sizing: content-box در مقابل border-box برای چیدمان‌های قابل پیش‌بینی
• 21. ویژگی Display: block, inline, inline-block
• 22. ویژگی Overflow برای مدیریت محتوا
• 23. مقدمه ای بر چیدمان‌های پایه برای داشبوردهای زیست‌محیطی
• 24. استفاده از Floats برای چیدمان‌های چند ستونی در گزارش‌ها
• 25. پاک کردن Floats برای کنترل چیدمان
• 26. جایگاه‌بندی عناصر: Static، Relative، Absolute
• 27. جایگاه‌بندی Fixed و Sticky برای ناوبری و هشدارها
• 28. درک Z-Index برای لایه‌بندی بصری داده‌های زیست‌محیطی
• 29. وسط‌چین کردن عناصر (Block، Inline، Text) در یک صفحه
• 30. استایل‌دهی تصاویر، اشکال و زیرنویس‌ها برای روایت داستان‌های زیست‌محیطی
• 31. مقدمه به Flexbox برای طراحی‌های منعطف و سازگار با محیط زیست
• 32. کانتینر Flex: `display: flex` و `flex-flow` به صورت مختصر
• 33. `flex-direction`: چیدمان آیتم‌ها در سطرها یا ستون‌ها
• 34. `flex-wrap`: اجازه دادن به آیتم‌ها برای شکستن به خطوط جدید
• 35. `justify-content`: هم‌ترازی آیتم‌ها در امتداد محور اصلی
• 36. `align-items`: هم‌ترازی آیتم‌ها در امتداد محور متقاطع
• 37. `align-content`: توزیع فضا بین خطوط
• 38. آیتم Flex: `order` برای مرتب‌سازی بصری
• 39. `flex-grow`: اجازه دادن به آیتم‌ها برای رشد
• 40. `flex-shrink`: اجازه دادن به آیتم‌ها برای کوچک شدن
• 41. `flex-basis`: اندازه اولیه یک آیتم Flex
• 42. `flex` کوتاه شده برای Grow، Shrink و Basis
• 43. `align-self`: بازنویسی هم‌ترازی محور متقاطع برای آیتم‌های فردی
• 44. ساخت نوار ناوبری واکنش‌گرا برای یک سازمان غیردولتی زیست‌محیطی
• 45. ایجاد شبکه‌های کارتی پویا برای نمایش پروژه‌های زیست‌محیطی
• 46. مقدمه به CSS Grid برای داشبوردهای پیچیده زیست‌محیطی
• 47. کانتینر Grid: `display: grid` و `grid-template` به صورت مختصر
• 48. `grid-template-columns` و `grid-template-rows` برای تعریف ردیف‌ها و ستون‌ها
• 49. `grid-gap` (فاصله سطر و ستون) برای فاصله بین آیتم‌های گرید
• 50. `grid-auto-columns` و `grid-auto-rows` برای گرید‌های ضمنی
• 51. `grid-auto-flow`: کنترل الگوریتم جایگذاری خودکار
• 52. `justify-items` و `align-items` برای هم‌ترازی آیتم در سلول‌ها
• 53. `justify-content` و `align-content` برای هم‌ترازی ردیف‌ها و ستون‌ها
• 54. آیتم Grid: `grid-column` و `grid-row` برای جایگذاری
• 55. `grid-area` برای نام‌گذاری و جایگذاری آیتم‌های گرید
• 56. استفاده از تابع `repeat()` برای تعریف کارآمد ردیف‌ها و ستون‌ها
• 57. تسلط بر تابع `minmax()` برای اندازه‌گذاری منعطف
• 58. واحد `fr` و کلمه کلیدی `auto` در چیدمان‌های Grid
• 59. طراحی یک چیدمان صفحه اصلی چندبخشی برای یک کمپین زیست‌محیطی
• 60. ترکیب Flexbox و Grid برای چیدمان‌های پیشرفته و تودرتو
• 61. مقدمه به طراحی واکنش‌گرا (RWD) برای دسترسی جهانی
• 62. تنظیم Viewport Meta Tag برای دستگاه‌های موبایل
• 63. درک Media Queries برای تطبیق با اندازه‌های صفحه
• 64. نقاط شکست رایج برای کمپین‌های آگاهی‌بخشی زیست‌محیطی
• 65. طراحی با رویکرد Mobile-First برای دسترسی‌پذیری
• 66. تصاویر و ویدئوهای Fluid برای نمایش بهینه در همه دستگاه‌ها
• 67. پنهان کردن و نمایش محتوا با Media Queries برای پیام‌رسانی متمرکز
• 68. استایل‌دهی فرم‌های تعاملی برای نظرسنجی‌ها و درخواست‌ها
• 69. انتقال‌های پایه: تغییرات بصری نرم با Hover
• 70. ویژگی `transform`: مقیاس، چرخش، انتقال، کج کردن عناصر
• 71. مقدمه به انیمیشن‌های CSS: Keyframes و ویژگی‌ها
• 72. ساخت آکاردئون‌ها و تب‌های تعاملی برای نمایش اطلاعات
• 73. استایل‌دهی Modals و Pop-ups برای هشدارها و ثبت‌نام‌ها
• 74. طراحی Tooltips و Info-Boxes برای واژه‌نامه‌های زیست‌محیطی
• 75. ایجاد گالری‌ها و اسلایدرهای تصاویر برای پروژه‌های حفاظتی
• 76. شبه‌کلاس‌ها: `hover`, `active`, `focus` برای بازخورد کاربر
• 77. شبه‌کلاس‌های ساختاری: `nth-child`, `first-child`, `last-child`
• 78. شبه‌عناصر: `::before` و `::after` برای محتوای تزئینی
• 79. متغیرهای CSS (ویژگی‌های سفارشی) برای تم‌بندی وب‌سایت‌های زیست‌محیطی
• 80. توابع CSS: `calc()`, `var()`, `clamp()` برای استایل‌دهی پویا
• 81. حالت‌های ترکیب و فیلترها برای جلوه‌های بصری خلاقانه (مثلاً هم‌پوشانی داده‌های آب و هوا)
• 82. Object-Fit و Object-Position برای جاسازی رسانه‌های واکنش‌گرا
• 83. نوشتن CSS قابل نگهداری با متدولوژی‌ها (اصول BEM, SMACSS)
• 84. مقدمه به پیش‌پردازنده‌های CSS (Sass/Less) برای مقیاس‌پذیری
• 85. استفاده از Mixins و Variables در پیش‌پردازنده‌ها برای کارایی
• 86. مقدمه به فریم‌ورک‌های CSS (مانند Tailwind CSS برای نمونه‌سازی سریع)
• 87. ایجاد کلاس‌های ابزار سفارشی برای کامپوننت‌های زیست‌محیطی قابل استفاده مجدد
• 88. پیاده‌سازی حالت تاریک برای بهره‌وری انرژی و ترجیح کاربر
• 89. CSS برای استایل‌شیت‌های چاپی: آماده‌سازی گزارش‌های زیست‌محیطی
• 90. بهینه‌سازی عملکرد: Minification، Critical CSS و استراتژی‌های بارگذاری
• 91. طراحی رابط‌های کاربری دسترسی‌پذیر (WCAG) برای اطلاعات زیست‌محیطی
• 92. CSS برای بین‌المللی‌سازی (RTL، پشتیبانی از فونت برای مخاطبان جهانی)
• 93. CSS اخلاقی: اصول طراحی وب پایدار (مینیمالیسم دیجیتال)
• 94. استایل‌دهی نقشه‌های تعاملی و هم‌پوشانی داده‌های GIS با CSS
• 95. بصری‌سازی داده‌های زیست‌محیطی (نمودارها، گراف‌ها) با فریم‌ورک‌های CSS
• 96. خلق اینفوگرافیک‌های جذاب و روایت داده با CSS
• 97. بهترین شیوه‌های تجربه کاربری (UX) برای پلتفرم‌های آگاهی‌بخشی زیست‌محیطی
• 98. تست و اشکال‌زدایی CSS برای برنامه‌های پیچیده زیست‌محیطی
• 99. ویژگی‌های نوظهور CSS: Container Queries و Cascade Layers (چشم‌انداز آینده)
• 100. ساخت یک حضور وب پایدار و تاثیرگذار با CSS پیشرفته