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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در داشبوردهای مدیریت ناوگان
• 2. ارتباط بین HTML، CSS و جاوا اسکریپت
• 3. روش‌های افزودن CSS به صفحه: Inline, Internal, External
• 4. آشنایی با سینتکس CSS: انتخابگرها، خصوصیات و مقادیر
• 5. راه‌اندازی محیط توسعه و ابزارهای مورد نیاز
• 6. اولین استایل‌دهی: تغییر رنگ و فونت یک عنوان
• 7. کامنت‌گذاری در CSS و اهمیت آن
• 8. آشنایی با انتخابگرهای اصلی: Element, Class, ID
• 9. انتخابگرهای ترکیبی: Descendant, Child, Adjacent Sibling
• 10. انتخابگرهای Attribute برای وضعیت خودروها (مثلاً data-status)
• 11. آشنایی با -کلاس‌ها (Pseudo-classes): hover, active, focus
• 12. مفهوم Box Model: محتوا، Padding، Border، Margin
• 13. خصوصیت box-sizing و کاربرد border-box
• 14. تنظیم ارتفاع و عرض عناصر (Height & Width)
• 15. استفاده از max-width برای طراحی واکنش‌گرا
• 16. خصوصیت display: block, inline, inline-block
• 17. تفاوت display: none و visibility: hidden
• 18. مفهوم اولویت و آبشاری بودن در CSS (Specificity & Cascade)
• 19. واحد‌های اندازه‌گیری مطلق: px, pt
• 20. واحد‌های اندازه‌گیری نسبی: em, rem, %, vw, vh
• 21. کار با رنگ‌ها: نام‌های کلیدی، HEX، RGB و HSL
• 22. تنظیم رنگ پس‌زمینه (background-color)
• 23. استفاده از تصاویر پس‌زمینه (background-image)
• 24. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 25. مبانی تایپوگرافی: font-family و فونت‌های وب
• 26. تنظیم اندازه، وزن و استایل فونت (font-size, weight, style)
• 27. ترازبندی متن و دکوراسیون آن (text-align, text-decoration)
• 28. تنظیم فاصله بین خطوط و حروف (line-height, letter-spacing)
• 29. استایل‌دهی به لیست‌ها برای نمایش لاگ‌ها و تاریخچه سفر
• 30. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن‌ها
• 31. مفهوم جریان عادی سند (Normal Document Flow)
• 32. خصوصیت position: static و relative
• 33. خصوصیت position: absolute و کاربرد آن در نقشه
• 34. خصوصیت position: fixed برای هدر و منوهای ثابت
• 35. خصوصیت position: sticky
• 36. مفهوم z-index و مدیریت لایه‌ها
• 37. مقدمه‌ای بر Flexbox: ابزار مدرن چیدمان
• 38. مفهوم Flex Container و Flex Items
• 39. کار با flex-direction: چیدمان افقی و عمودی
• 40. ترازبندی در محور اصلی با justify-content
• 41. ترازبندی در محور متقاطع با align-items
• 42. مدیریت اندازه آیتم‌ها: flex-grow, flex-shrink, flex-basis
• 43. مقدمه‌ای بر CSS Grid Layout
• 44. تعریف ستون‌ها و ردیف‌ها در گرید (grid-template-columns/rows)
• 45. قرار دادن آیتم‌ها در گرید با grid-column و grid-row
• 46. ایجاد گپ بین آیتم‌های گرید (gap)
• 47. ترکیب Flexbox و Grid برای ساخت داشبوردهای پیچیده
• 48. مفهوم طراحی واکنش‌گرا (Responsive Web Design)
• 49. استفاده از متا تگ viewport
• 50. آشنایی با Media Queries برای نمایش در دستگاه‌های مختلف
• 51. رویکرد Mobile-First در طراحی واکنش‌گرا
• 52. تعریف Breakpointهای رایج برای موبایل، تبلت و دسکتاپ
• 53. واکنش‌گرا کردن تصاویر
• 54. واکنش‌گرا کردن جداول داده
• 55. ساخت منوی ناوبری واکنش‌گرا (همبرگری)
• 56. تست واکنش‌گرایی با ابزارهای مرورگر
• 57. استایل‌دهی به فرم‌ها: input, textarea, button
• 58. شخصی‌سازی Checkbox و Radio Button
• 59. استایل‌دهی به select dropdown
• 60. پ-کلاس‌های مرتبط با فرم‌ها: required, valid, invalid
• 61. استفاده از -المان‌ها (Pseudo-elements): before:: و after::
• 62. ساخت نشانگر وضعیت آنلاین/آفلاین با -المان‌ها
• 63. آشنایی با CSS Transitions برای انیمیشن‌های نرم
• 64. خصوصیت transform: توابع translate, scale, rotate
• 65. آشنایی با CSS Animations و keyframes@
• 66. ایجاد یک آیکون متحرک برای خودروی در حال حرکت
• 67. ایجاد سایه برای جعبه‌ها و متون (box-shadow, text-shadow)
• 68. استفاده از گرادیان‌های خطی و شعاعی
• 69. فیلترهای CSS برای افکت‌های تصویری (filter)
• 70. ساخت tooltip سفارشی با CSS
• 71. ساختاربندی HTML یک داشبورد مدیریت ناوگان
• 72. طراحی کارت‌های KPI (شاخص کلیدی عملکرد)
• 73. استایل‌دهی جداول داده برای لیست خودروها و رانندگان
• 74. افزودن قابلیت مرتب‌سازی ظاهری به هدر جداول
• 75. استایل‌دهی به محفظه نقشه (Map Container)
• 76. شخصی‌سازی پنجره اطلاعات روی نقشه (InfoWindow) با CSS
• 77. طراحی نوارهای پیشرفت (Progress Bars) برای سوخت و مسافت
• 78. ساخت یک تایم‌لاین برای نمایش تاریخچه سفر خودرو
• 79. طراحی کامپوننت‌های هشدار و نوتیفیکیشن
• 80. استایل‌دهی بر اساس وضعیت با Attribute Selectors (مثلا [data-status="moving"])
• 81. ساخت منوی کناری (Sidebar) برای ناوبری داشبورد
• 82. استایل‌دهی اولیه به نمودارها و گراف‌ها
• 83. ایجاد استایل‌های مخصوص چاپ برای گزارش‌ها
• 84. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌سازی
• 85. پیاده‌سازی تم روشن و تاریک (Light/Dark Mode)
• 86. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 87. استفاده از متغیرها و تودرتویی (Nesting) در Sass
• 88. آشنایی با Mixinها در Sass برای کدهای قابل استفاده مجدد
• 89. معماری و سازماندهی فایل‌های CSS
• 90. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 91. استفاده از تابع ()calc برای محاسبات دینامیک
• 92. کار با واحدهای منطقی CSS (Logical Properties)
• 93. آشنایی با Container Queries
• 94. بهینه‌سازی عملکرد CSS: کاهش Render-Blocking
• 95. روش‌های کاهش حجم فایل‌های CSS (Minification)
• 96. استفاده از ابزارهای مرورگر برای دیباگ کردن CSS
• 97. مفهوم سازگاری بین مرورگرها (Cross-browser Compatibility)
• 98. مبانی دسترسی‌پذیری وب (Accessibility) در CSS
• 99. پروژه نهایی: ساخت کامل صفحه داشبورد مدیریت ناوگان
• 100. جمع‌بندی دوره و مسیرهای یادگیری آینده