کتاب صوتی CSS for Educational Technology

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

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

عنوان دوره: دوره CSS for Educational Technology

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در فناوری آموزشی
• 2. چرا CSS برای محتوای آموزشی ضروری است؟
• 3. آشنایی با ساختار و سینتکس CSS
• 4. روش‌های اعمال CSS: درون‌خطی، داخلی، خارجی
• 5. انتخابگرهای پایه: نوع، کلاس و شناسه
• 6. انتخابگر عمومی (*) و انتخابگر گروهی
• 7. مفهوم Cascade، Specificity و Inheritance
• 8. کار با واحدها در CSS: px, em, rem, %, vw, vh
• 9. مدل‌های رنگی: Hex, RGB, RGBA, HSL, HSLA
• 10. تنظیم رنگ متن و پس‌زمینه
• 11. خواص پایه فونت: font-family, font-size, font-weight, font-style
• 12. آشنایی با Box Model در CSS
• 13. خواص Padding و کاربرد آن
• 14. خواص Border و طراحی حاشیه‌ها
• 15. خواص Margin و تنظیم فاصله‌ها
• 16. Box-sizing: content-box و border-box
• 17. خواص Display: block, inline, inline-block
• 18. کنترل Overflow محتوا
• 19. خواص Visibility و Opacity
• 20. معرفی سیستم‌های موقعیت‌دهی (Positioning): Static, Relative
• 21. موقعیت‌دهی Absolute و Fixed
• 22. موقعیت‌دهی Sticky و کاربردهای آن
• 23. کنترل لایه‌ها با Z-index
• 24. استفاده از Floats و مفهوم Clearing
• 25. مقدمه‌ای بر Flexbox برای چیدمان انعطاف‌پذیر
• 26. خواص کانتینر Flexbox: flex-direction, justify-content, align-items
• 27. خواص آیتم‌های Flexbox: flex-grow, flex-shrink, flex-basis, order
• 28. ایجاد منوهای ناوبری واکنش‌گرا با Flexbox
• 29. مقدمه‌ای بر CSS Grid Layout
• 30. خواص کانتینر Grid: grid-template-columns, grid-template-rows, grid-gap
• 31. خواص آیتم‌های Grid: grid-column, grid-row, grid-area
• 32. طراحی ساختار کلی صفحات آموزشی با Grid
• 33. انتخابگرهای ترکیبی (Combinators): فرزند، نوه، خواهر و برادر
• 34. انتخابگرهای ویژگی (Attribute Selectors)
• 35. شبه‌کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 36. شبه‌کلاس‌های ساختاری: :nth-child, :first-child, :last-child
• 37. شبه‌عناصر (Pseudo-elements): ::before, ::after
• 38. استفاده از ::selection برای استایل‌دهی متن انتخاب‌شده
• 39. استایل‌دهی پیشرفته لینک‌ها و دکمه‌های تعاملی
• 40. فونت‌های وب (@font-face) و خدمات فونت
• 41. تنظیمات پیشرفته متن: line-height, letter-spacing, word-spacing
• 42. خواص text-shadow و box-shadow
• 43. طراحی گرادیان‌های خطی و شعاعی
• 44. استفاده از تصاویر پس‌زمینه پیشرفته و blend-modes
• 45. تغییر شکل عناصر با Transforms (translate, rotate, scale, skew)
• 46. آشنایی با Transitions و ایجاد انیمیشن‌های نرم
• 47. خواص Transition: property, duration, timing-function, delay
• 48. انیمیشن با Keyframes (@keyframes)
• 49. خواص انیمیشن: animation-name, animation-duration, animation-iteration-count
• 50. کاربرد انیمیشن‌ها در بازخورد تعاملی آموزشی
• 51. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 52. Meta Viewport و تنظیمات آن
• 53. Media Queries: min-width, max-width, orientation
• 54. رویکردهای Mobile-First و Desktop-First
• 55. تصاویر واکنش‌گرا با srcset و sizes
• 56. فونت‌ها و تایپوگرافی واکنش‌گرا
• 57. پنهان کردن و نمایش محتوا بر اساس دستگاه
• 58. استایل‌دهی برای چاپ (Print Styles)
• 59. مقدمه‌ای بر دسترسی‌پذیری (Accessibility - A11y) در EdTech
• 60. نقش HTML معنایی (Semantic HTML) در CSS
• 61. رنگ‌ها و کنتراست برای دسترسی‌پذیری (WCAG)
• 62. استایل‌دهی حالت فوکوس برای ناوبری کیبورد
• 63. CSS برای کاربران صفحه‌خوان (Screen Reader) و محتوای مخفی
• 64. کاهش حرکت (Motion) برای کاربران با اختلالات وستیبولار
• 65. استایل‌دهی فرم‌های قابل دسترس در EdTech
• 66. پیاده‌سازی حالت تاریک (Dark Mode) برای محتوای آموزشی
• 67. پشتیبانی از زبان‌های راست به چپ (RTL) با CSS
• 68. متغیرهای CSS (Custom Properties) و مزایای آنها
• 69. استفاده از متغیرها برای تم‌بندی و برندسازی آموزشی
• 70. توابع CSS: calc(), var(), attr()
• 71. مدیریت لایه‌ها با @layer
• 72. مقدمه‌ای بر پیش‌پردازنده‌های CSS (مانند Sass/SCSS - مفهوم)
• 73. مفاهیم متغیرها، Nesting و Mixins در پیش‌پردازنده‌ها
• 74. روش‌شناسی‌های CSS: BEM, OOCSS, SMACSS (مقدمه)
• 75. استراتژی‌های CSS برای سیستم‌های طراحی آموزشی
• 76. بهینه‌سازی عملکرد CSS: لود سریع‌تر صفحات آموزشی
• 77. ابزارهای توسعه‌دهنده مرورگر برای دیباگ CSS
• 78. سازگاری مرورگرها و Vendor Prefixes
• 79. معرفی فریمورک‌های CSS (مانند Bootstrap, Tailwind CSS - مفهوم)
• 80. Purging و Minification برای کاهش حجم فایل‌های CSS
• 81. CSS Critical Path و بارگذاری بهینه
• 82. استفاده از Sprites و SVG برای آیکون‌های آموزشی
• 83. استایل‌دهی رابط کاربری سیستم‌های مدیریت یادگیری (LMS)
• 84. سفارشی‌سازی پلتفرم‌های آموزش الکترونیکی
• 85. طراحی داشبوردها و پنل‌های کاربری دانشجویان و اساتید
• 86. استایل‌دهی عناصر تعاملی: کوییزها، درگ‌اند‌دراپ‌ها
• 87. بهبود تجربه کاربری (UX) در محتوای آموزشی با CSS
• 88. ساخت نوارهای پیشرفت (Progress Bars) و عناصر گیمیفیکیشن
• 89. استایل‌دهی پلیرهای ویدیویی و صوتی قابل دسترس
• 90. طراحی کارت‌های محتوا و ویجت‌های آموزشی
• 91. ایجاد اسلایدرها و کاروسل‌های واکنش‌گرا برای گالری تصاویر
• 92. استایل‌دهی جداول داده و نمایش‌های پیچیده در EdTech
• 93. طراحی نمودارها و اینفوگرافیک‌های آموزشی با CSS
• 94. سفارشی‌سازی اعلان‌ها (Notifications) و Modals
• 95. استایل‌دهی پورتفولیوهای آنلاین و رزومه‌های دانشجویان
• 96. CSS برای تقویت برند و هویت بصری موسسات آموزشی
• 97. مدیریت CSS در پروژه‌های بزرگ فناوری آموزشی
• 98. نگهداری و مقیاس‌پذیری CSS در طول زمان
• 99. روندهای آینده CSS و کاربرد آنها در EdTech
• 100. بهترین شیوه‌ها و نکات نهایی برای CSS در فناوری آموزشی