کتاب صوتی CSS for Fleet Management Ecosystem

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

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

عنوان دوره: دوره CSS for Fleet Management Ecosystem

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

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

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

• 1. مقدمه: نقش CSS در اکوسیستم مدیریت ناوگان
• 2. آشنایی با سینتکس و قوانین CSS
• 3. روش‌های افزودن CSS به یک صفحه وب
• 4. درک مفهوم Cascade، Specificity و Inheritance
• 5. کار با رنگ‌ها: HEX، RGB، HSL و RGBA
• 6. استفاده از گرادیان‌های خطی و شعاعی
• 7. مبانی تایپوگرافی: font-family, font-size, font-weight
• 8. استایل‌دهی به متن: text-align, line-height, text-decoration
• 9. مفهوم Box Model: محتوا، Padding، Border و Margin
• 10. کار با واحدهای اندازه‌گیری مطلق: px, pt
• 11. کار با واحدهای اندازه‌گیری نسبی: %, em, rem
• 12. واحدهای Viewport: vh, vw, vmin, vmax
• 13. کنترل Overflow محتوا
• 14. استایل‌دهی پس‌زمینه: background-color, background-image
• 15. کنترل تصاویر پس‌زمینه: background-repeat, position, size
• 16. ویژگی display: block, inline, inline-block
• 17. مفهوم Positioning: static, relative
• 18. Positioning پیشرفته: absolute, fixed
• 19. Positioning چسبنده: sticky
• 20. مدیریت لایه‌ها با Z-index و Stacking Context
• 21. چیدمان با Float و Clear (مفاهیم پایه)
• 22. مقدمه‌ای بر Flexbox برای ساخت داشبورد
• 23. کانتینر Flexbox و ویژگی‌های اصلی آن
• 24. جهت‌دهی و چینش آیتم‌ها در Flexbox: justify-content, align-items
• 25. کنترل شکست خط و چینش چندخطی در Flexbox
• 26. اندازه‌دهی آیتم‌ها در Flexbox: flex-grow, flex-shrink, flex-basis
• 27. مقدمه‌ای بر CSS Grid Layout
• 28. تعریف سطرها و ستون‌ها در Grid
• 29. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 30. Grid در برابر Flexbox: چه زمانی از کدام استفاده کنیم؟
• 31. استایل‌دهی به دکمه‌ها و لینک‌ها
• 32. طراحی فرم‌ها: استایل‌دهی به Input و Textarea
• 33. شخصی‌سازی Checkbox و Radio Button
• 34. استایل‌دهی به منوهای کشویی (Select)
• 35. ساخت Layoutهای پیچیده برای فرم‌های ورود داده
• 36. استایل‌دهی به جداول داده (Table)
• 37. ایجاد جداول راه‌راه و واکنش‌گرا برای نمایش داده‌های خودرو
• 38. استایل‌دهی به لیست‌ها و منوهای ناوبری
• 39. ساخت سایدبار (Sidebar) برای داشبورد
• 40. طراحی کامپوننت کارت (Card) برای نمایش خلاصه وضعیت
• 41. ایجاد نشان‌ها (Badges) برای وضعیت خودرو (فعال، متوقف)
• 42. استایل‌دهی به پنجره‌های Modal و Pop-up
• 43. طراحی بنرهای اطلاع‌رسانی و هشدار (Alerts)
• 44. ساخت Tooltip برای آیکون‌ها و نشانگرهای روی نقشه
• 45. استایل‌دهی به نوارهای پیشرفت (Progress Bars)
• 46. طراحی Breadcrumbs برای ناوبری بهتر
• 47. شخصی‌سازی اسکرول‌بار برای جداول طولانی
• 48. استفاده از کتابخانه‌های آیکون (Icon Fonts)
• 49. کار با آیکون‌های SVG برای نمایش انواع خودرو
• 50. ساخت کامپوننت آکاردئون (Accordion)
• 51. مقدمه‌ای بر طراحی وب واکنش‌گرا (Responsive)
• 52. تگ متا Viewport و اهمیت آن
• 53. استراتژی Mobile-First در برابر Desktop-First
• 54. استفاده از Media Queries برای تعریف Breakpointها
• 55. مدیریت تصاویر واکنش‌گرا با srcset و تگ picture
• 56. تایپوگرافی واکنش‌گرا با تابع clamp()
• 57. تطبیق Layout داشبورد برای تبلت‌ها
• 58. طراحی نمای موبایل برای رانندگان
• 59. نمایش یا مخفی کردن عناصر در اندازه‌های مختلف صفحه
• 60. ابزارهای تست طراحی واکنش‌گرا در مرورگرها
• 61. انتخابگرهای ترکیبی (Combinators): فرزند، نسل و همسایه
• 62. شبه‌کلاس‌های تعاملی: :hover, :focus, :active
• 63. شبه‌کلاس‌های ساختاری: :first-child, :last-child
• 64. انتخاب فرزند nام با :nth-child و :nth-of-type
• 65. استایل‌دهی به سطرهای زوج و فرد جدول
• 66. استثنا قائل شدن با شبه‌کلاس :not()
• 67. شبه‌کلاس‌های مربوط به وضعیت UI: :checked, :disabled, :valid
• 68. مقدمه‌ای بر شبه‌عنصرها (Pseudo-elements): ::before و ::after
• 69. استفاده از ::before و ::after برای ایجاد آیکون‌ها و لیبل‌های سفارشی
• 70. انتخابگرهای ویژگی (Attribute Selectors)
• 71. ایجاد افکت‌های گذار نرم با CSS Transitions
• 72. کنترل زمان‌بندی و تاخیر در Transitions
• 73. تبدیلات دوبعدی (2D Transforms): translate, rotate, scale
• 74. ایجاد بازخورد بصری با Transform در حالت Hover
• 75. تبدیلات سه‌بعدی (3D Transforms) و Perspective
• 76. مقدمه‌ای بر انیمیشن با @keyframes
• 77. ساخت انیمیشن لودینگ (Loading Spinner)
• 78. متحرک‌سازی آیکون خودروها روی نقشه
• 79. کنترل تکرار و جهت انیمیشن
• 80. بهینه‌سازی انیمیشن‌ها با ویژگی will-change
• 81. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 82. پیاده‌سازی تم روشن و تاریک برای داشبورد
• 83. استفاده از تابع calc() برای محاسبات دینامیک
• 84. توابع ریاضی پیشرفته: min(), max(), clamp()
• 85. روش‌های مدیریت و محدوده‌بندی استایل‌ها (Scoping)
• 86. معرفی متدولوژی نام‌گذاری BEM
• 87. مقدمه‌ای بر پیش‌پردازنده‌های CSS: آشنایی با Sass/SCSS
• 88. متغیرها و تودرتویی (Nesting) در SCSS
• 89. استفاده از Mixin و Function در SCSS
• 90. معماری و سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 91. فیلترها و حالت‌های ترکیبی (Filters and Blend Modes)
• 92. مقدمه‌ای مفهومی بر CSS-in-JS
• 93. مقدمه‌ای مفهومی بر Utility-First CSS (مانند Tailwind)
• 94. مدیریت سازگاری بین مرورگرها (Cross-browser Compatibility)
• 95. استفاده از @supports برای تشخیص پشتیبانی مرورگر (Feature Queries)
• 96. بهینه‌سازی CSS: فشرده‌سازی (Minification)
• 97. شناسایی و حذف CSS استفاده‌نشده
• 98. مبانی دسترسی‌پذیری وب (Accessibility) در CSS
• 99. احترام به تنظیمات کاربر با prefers-reduced-motion
• 100. پروژه نهایی: ساخت کامل رابط کاربری داشبورد مدیریت ناوگان