کتاب صوتی CSS for Social Responsibility

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

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

عنوان دوره: دوره CSS for Social Responsibility

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

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

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

• 1. موضوعات و سرفصل‌های دوره CSS for Social Responsibility:
• 2. مقدمه‌ای بر برنامه‌نویسی وب و نقش CSS
• 3. آناتومی CSS: دستورات، انتخابگرها، خصوصیات، مقادیر
• 4. روش‌های اتصال CSS به HTML: Inline, Internal, External
• 5. انتخابگرهای پایه: Type, Class, ID
• 6. انتخابگرهای ترکیبی: Universal, Grouping, Descendant
• 7. آشنایی با Cascade, Specificity و Inheritance
• 8. واحدها در CSS: Pixels, EMs, REMs, Percentages
• 9. مدل‌های رنگی: RGB, HEX, HSL, RGBA و انتخاب رنگ‌های دسترس‌پذیر
• 10. اصول تایپوگرافی: انتخاب فونت و `font-family`
• 11. خصوصیات متن: `font-size`, `font-weight`, `line-height`, `text-align`
• 12. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 13. تنظیم ابعاد: `width`, `height`, `max-width`, `min-height`
• 14. خصوصیات پس‌زمینه: `background-color`, `background-image`, `background-position`
• 15. خصوصیات حاشیه (Border): `width`, `style`, `color`, `border-radius`
• 16. تنظیم مجدد CSS با Reset و Normalize
• 17. ابزارهای توسعه‌دهنده مرورگر برای اشکال‌زدایی CSS
• 18. `display` property: Block, Inline, Inline-Block
• 19. `overflow` property و مدیریت محتوای اضافی
• 20. مقدمه‌ای بر طراحی وب واکنش‌گرا (Responsive Web Design)
• 21. متا تگ Viewport و اهمیت آن در واکنش‌گرایی
• 22. Media Queries: سینتکس پایه و کاربردها
• 23. طراحی Mobile-First در مقابل Desktop-First
• 24. واحدهای واکنش‌گرا: `vw`, `vh`, `vmin`, `vmax`
• 25. مقدمه‌ای بر Flexbox: ماژول طرح‌بندی انعطاف‌پذیر
• 26. خصوصیات Flex Container: `display: flex`, `flex-direction`, `flex-wrap`
• 27. تراز بندی Flex Container: `justify-content`, `align-items`, `align-content`
• 28. خصوصیات Flex Item: `flex-grow`, `flex-shrink`, `flex-basis`, `order`
• 29. مثال‌های عملی پیاده‌سازی طرح‌بندی با Flexbox
• 30. مقدمه‌ای بر CSS Grid: سیستم طرح‌بندی دو بُعدی
• 31. خصوصیات Grid Container: `display: grid`, `grid-template-columns`, `grid-template-rows`
• 32. ایجاد Grid با `grid-template-areas`
• 33. فاصله گذاری و تراز بندی Grid: `gap`, `justify-items`, `align-items`
• 34. شبکه ضمنی و صریح: `grid-auto-columns`, `grid-auto-rows`
• 35. تعیین محل آیتم‌ها در Grid: `grid-column`, `grid-row`
• 36. مثال‌های عملی پیاده‌سازی طرح‌بندی با CSS Grid
• 37. موقعیت‌یابی عناصر: `position: static`, `relative`, `absolute`, `fixed`, `sticky`
• 38. مدیریت پشته عناصر با `z-index`
• 39. تصاویر واکنش‌گرا با `max-width` و عنصر `picture`
• 40. ویدئوهای واکنش‌گرا و embedding مسئولانه
• 41. پنهان کردن محتوا به روش مسئولانه: `display: none` در مقابل `visibility: hidden`
• 42. استایل‌دهی برای چاپ با Print Stylesheets
• 43. مقدمه‌ای بر دسترسی‌پذیری وب (Accessibility - A11y)
• 44. نقش CSS در بهبود دسترسی‌پذیری وب
• 45. آشنایی با دستورالعمل‌های WCAG برای طراحان و توسعه‌دهندگان
• 46. اهمیت کنتراست رنگ کافی و ابزارهای بررسی آن
• 47. طراحی برای اندازه‌ها و جهت‌گیری‌های مختلف صفحه نمایش
• 48. پیاده‌سازی Skip-link برای ناوبری سریع در صفحات
• 49. شبه‌کلاس‌ها (Pseudo-classes): `hover`, `focus`, `active` برای بازخورد کاربر
• 50. شبه‌کلاس‌ها برای انتخاب عناصر: `:nth-child`, `:first-child`, `:last-child`
• 51. شبه‌عناصر (Pseudo-elements): `::before`, `::after` برای تولید محتوا
• 52. خصوصیات سفارشی (CSS Variables): تعریف و کاربرد
• 53. مزایای CSS Variables برای ایجاد تم‌ها و افزایش دسترسی‌پذیری
• 54. انتقال‌ها (Transitions) در CSS: `property`, `duration`, `timing-function`, `delay`
• 55. اعمال Transitions برای بهبود تجربه کاربری (بدون حواس‌پرتی)
• 56. تغییر شکل‌ها (Transforms) در CSS: `translate`, `scale`, `rotate`, `skew`
• 57. مقدمه‌ای بر انیمیشن‌ها در CSS با `@keyframes`
• 58. خصوصیات انیمیشن: `animation-name`, `duration`, `iteration-count`, `direction`
• 59. انیمیشن‌های دسترس‌پذیر: احترام به `prefers-reduced-motion`
• 60. فیلترها (Filters) در CSS: `blur`, `grayscale`, `sepia`, `brightness`
• 61. حالت‌های ترکیب (Blend Modes) برای جلوه‌های بصری خلاقانه
• 62. `object-fit` و `object-position` برای کنترل نمایش رسانه
• 63. نوشتن CSS کارآمد: کاهش تکرار و بهبود عملکرد
• 64. معماری CSS: اصول BEM, OOCSS, SMACSS
• 65. مقدمه‌ای بر سیستم‌های طراحی (Design Systems) و CSS
• 66. اهمیت مستندسازی و کامنت‌گذاری در CSS
• 67. کنترل نسخه برای CSS با Git (اصول همکاری)
• 68. مقدمه‌ای بر Preprocessors مانند Sass/Less برای سازماندهی CSS
• 69. دسترسی‌پذیری جامع: نشانگرهای فوکوس و ناوبری با کیبورد
• 70. استایل‌دهی فرم‌های دسترس‌پذیر: لیبل‌ها، وضعیت‌های فوکوس و پیام‌های خطا
• 71. تفاوت پنهان کردن محتوا از نظر بصری و از نظر Screen Reader
• 72. طراحی برای دسترسی‌پذیری شناختی: وضوح و سادگی رابط کاربری
• 73. ایجاد سلسله‌مراتب بصری با CSS برای پردازش بهتر اطلاعات
• 74. تایپوگرافی برای خوانایی: انتخاب فونت، طول خط، فاصله حروف
• 75. استفاده از `lang` attribute و CSS برای پشتیبانی چندزبانه
• 76. طرح‌بندی‌های راست به چپ (RTL) با خصوصیات منطقی (Logical Properties)
• 77. ملاحظات بین‌المللی‌سازی و بومی‌سازی در CSS
• 78. حساسیت فرهنگی در طراحی رابط کاربری از طریق استایل‌های CSS
• 79. CSS برای دسترسی‌پذیری بصری‌سازی داده‌ها
• 80. پیاده‌سازی تم‌های قابل کنترل توسط کاربر (مانند Light/Dark Mode)
• 81. Dark Mode با `prefers-color-scheme` برای صرفه‌جویی در انرژی و راحتی چشم
• 82. بهینه‌سازی CSS برای عملکرد: Minification, Compression, Critical CSS
• 83. تأثیر زیست‌محیطی فایل‌های CSS حجیم و وب‌سایت‌های سنگین
• 84. اصول طراحی وب پایدار با CSS
• 85. کاهش نویز بصری و حواس‌پرتی برای سلامت دیجیتال
• 86. استفاده اخلاقی از انیمیشن‌ها و میکرواینتراکشن‌ها
• 87. CSS برای پشتیبانی از نوتیفیکیشن‌های حریم خصوصی و رضایت (GDPR, CCPA)
• 88. اجتناب از الگوهای تاریک (Dark Patterns) با استایل‌دهی متفکرانه CSS
• 89. CSS و سیستم‌های طراحی جامع: ساخت کامپوننت‌ها برای همه
• 90. ابزارهای تست دسترسی‌پذیری برای CSS (مانند Lighthouse, axe DevTools)
• 91. تست دستی دسترسی‌پذیری استایل‌های CSS
• 92. CSS برای بهبود تدریجی (Progressive Enhancement)
• 93. کاهش عملکرد تدریجی (Graceful Degradation) و Fallbacks برای مرورگرهای قدیمی
• 94. قابلیت‌های آینده CSS: Container Queries و مزایای دسترسی‌پذیری آن‌ها
• 95. مشارکت در پروژه‌های Open Source CSS برای تأثیرگذاری اجتماعی
• 96. پروژه نهایی: ساخت یک وب‌سایت با مسئولیت اجتماعی
• 97. یادگیری مستمر و به‌روز ماندن در CSS و دسترسی‌پذیری
• 98. آینده CSS و توسعه وب جامع و فراگیر
• 99. دسترس‌پذیری وب: طراحی حالت‌های focus: برای کیبورد و پشتیبانی از صفحه‌خوان‌ها
• 100. احترام به انتخاب کاربر با Media Queries: حالت تاریک (prefers-color-scheme) و کاهش حرکت (prefers-reduced-motion)