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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در صنعت مدیریت ناوگان
• 2. چرا CSS برای داشبوردهای مدیریت ناوگان حیاتی است؟
• 3. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Browser DevTools)
• 4. نحوه افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 5. ساختار و سینتکس پایه CSS
• 6. کامنت‌گذاری در CSS
• 7. انتخابگرهای پایه: نوع، کلاس و شناسه (Type, Class, ID)
• 8. انتخابگرهای ترکیبی (Combinators)
• 9. انتخابگرهای صفت (Attribute Selectors)
• 10. شبه‌کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 11. شبه‌عناصر (Pseudo-elements): ::before, ::after
• 12. اولویت و آبشار در CSS (Specificity and the Cascade)
• 13. مفهوم وراثت (Inheritance)
• 14. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 15. ویژگی box-sizing: content-box در مقابل border-box
• 16. واحدهای اندازه‌گیری مطلق و نسبی (px, em, rem, %)
• 17. واحدهای Viewport (vw, vh, vmin, vmax)
• 18. کار با رنگ‌ها: نام، هگز، RGB و RGBA
• 19. کار با رنگ‌ها: HSL و HSLA
• 20. پس‌زمینه‌ها: رنگ، تصویر و گرادینت
• 21. تنظیمات پیشرفته پس‌زمینه (background-size, position, repeat)
• 22. تنظیمات حاشیه (Border) و گرد کردن گوشه‌ها (border-radius)
• 23. سایه‌ها: box-shadow و text-shadow
• 24. مبانی تایپوگرافی: font-family و فونت‌های وب
• 25. اندازه و وزن فونت (font-size, font-weight)
• 26. تراز و تزئین متن (text-align, text-decoration)
• 27. فاصله‌گذاری بین حروف و کلمات (letter-spacing, word-spacing)
• 28. ویژگی display: block, inline, inline-block
• 29. پنهان کردن عناصر: display: none در مقابل visibility: hidden
• 30. موقعیت‌یابی (Positioning): static, relative
• 31. موقعیت‌یابی (Positioning): absolute, fixed
• 32. موقعیت‌یابی (Positioning): sticky
• 33. کنترل لایه‌ها با z-index
• 34. مقدمه‌ای بر Flexbox برای چیدمان داشبورد
• 35. ویژگی‌های کانتینر Flexbox: flex-direction, flex-wrap
• 36. تراز افقی در Flexbox با justify-content
• 37. تراز عمودی در Flexbox با align-items
• 38. ویژگی‌های آیتم Flexbox: flex-grow, flex-shrink, flex-basis
• 39. کنترل ترتیب عناصر با order
• 40. مقدمه‌ای بر CSS Grid Layout
• 41. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 42. فاصله‌گذاری بین عناصر گرید با gap
• 43. قرار دادن آیتم‌ها در گرید: grid-column, grid-row
• 44. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 45. طراحی واکنش‌گرا (Responsive Design) چیست؟
• 46. استفاده از متا تگ Viewport
• 47. مبانی Media Queries
• 48. رویکرد Mobile-First در طراحی واسط کاربری ناوگان
• 49. نقاط شکست (Breakpoints) رایج برای دستگاه‌های مختلف
• 50. تصاویر واکنش‌گرا
• 51. تایپوگرافی واکنش‌گرا
• 52. استایل‌دهی به دکمه‌ها و وضعیت‌های مختلف آن (hover, disabled)
• 53. استایل‌دهی به فرم‌ها و ورودی‌ها (Inputs)
• 54. طراحی فیلدهای انتخاب تاریخ و زمان (Date/Time Pickers)
• 55. استایل‌دهی به لیست‌های کشویی (Dropdowns) برای انتخاب خودرو
• 56. طراحی جداول داده برای نمایش گزارشات سفر
• 57. واکنش‌گرا کردن جداول داده
• 58. استایل‌دهی به نوارهای ناوبری (Navigation Bars) و سایدبارها
• 59. ایجاد منوهای همبرگری برای نمایش موبایل
• 60. طراحی کارت‌ها (Cards) برای نمایش اطلاعات خلاصه هر خودرو
• 61. استایل‌دهی به مودال‌ها و پاپ‌آپ‌ها برای هشدارها
• 62. استفاده از آیکون‌ها (SVG و فونت‌های آیکون)
• 63. شخصی‌سازی چک‌باکس‌ها و دکمه‌های رادیویی
• 64. مقدمه‌ای بر Transition ها در CSS
• 65. کنترل زمان‌بندی و تاخیر در Transition ها
• 66. مقدمه‌ای بر Transform های دو بعدی: translate, rotate, scale
• 67. مقدمه‌ای بر Transform های سه بعدی
• 68. انیمیشن‌های کلیدی (Keyframe Animations)
• 69. ایجاد انیمیشن‌های بارگذاری (Loading Spinners)
• 70. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 71. استفاده از تابع ()calc برای محاسبات پویا
• 72. فیلترهای CSS: grayscale, blur, brightness
• 73. حالت‌های ترکیبی (Blend Modes)
• 74. شخصی‌سازی اسکرول‌بار (Scrollbar)
• 75. استایل‌دهی به عناصر نقشه: پنجره‌های اطلاعاتی (InfoWindows)
• 76. استایل‌دهی به نشانگرهای نقشه (Markers)
• 77. ایجاد نشانگرهای وضعیت خودرو با CSS (روشن، خاموش، در حال حرکت)
• 78. طراحی نمودارهای میله‌ای ساده برای نمایش مصرف سوخت
• 79. طراحی تایم‌لاین برای نمایش تاریخچه مسیر خودرو
• 80. استایل‌دهی به هشدارهای بلادرنگ (Real-time Alerts)
• 81. طراحی Tooltip برای نمایش اطلاعات اضافی روی نقشه
• 82. پیاده‌سازی تم تاریک (Dark Mode) برای داشبورد
• 83. استایل‌دهی به مسیرهای پیموده شده (Polylines) روی نقشه
• 84. طراحی صفحات قابل چاپ برای گزارشات (Print Stylesheets)
• 85. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 86. متغیرها و تودرتویی (Nesting) در Sass
• 87. استفاده از Mixin ها در Sass برای کدهای قابل استفاده مجدد
• 88. معماری و سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 89. متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 90. بهینه‌سازی عملکرد CSS: کاهش حجم و بارگذاری سریع
• 91. سازگاری بین مرورگرها و استفاده از پیشوندهای فروشنده (Vendor Prefixes)
• 92. مفهوم CSS-in-JS
• 93. مقدمه‌ای بر دسترسی‌پذیری (Accessibility) در وب
• 94. استفاده از ویژگی‌های ARIA برای بهبود تجربه کاربری
• 95. اطمینان از کنتراست رنگ مناسب برای خوانایی
• 96. طراحی حالت Focus برای ناوبری با کیبورد
• 97. پروژه عملی: ساخت هدر و نوار ناوبری داشبورد
• 98. پروژه عملی: طراحی بخش خلاصه وضعیت ناوگان
• 99. پروژه عملی: ساخت جدول لیست خودروها
• 100. پروژه عملی: واکنش‌گرا کردن داشبورد برای تبلت و موبایل