دوره CSS for Fleet Management Landscape همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در داشبوردهای مدیریت ناوگان
• 2. روش‌های افزودن CSS به HTML: Inline, Internal, External
• 3. آشنایی با Syntax و قوانین CSS
• 4. انتخابگرهای پایه: Element, Class, ID
• 5. انتخابگرهای ترکیبی و گروهی
• 6. استایل‌دهی به متون: font-family, font-size, font-weight
• 7. کار با رنگ‌ها: Hex, RGB, RGBA, HSL
• 8. استایل‌دهی به پس‌زمینه: background-color, background-image
• 9. مفهوم Box Model: Margin, Padding, Border
• 10. کنترل ابعاد عناصر: width, height, min/max-width
• 11. خاصیت display: block, inline, inline-block
• 12. استایل‌دهی به لیست‌ها و لینک‌ها
• 13. مفهوم Specificity و اولویت در CSS
• 14. استفاده از شبه‌کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 15. استفاده از شبه‌عناصر (Pseudo-elements): ::before, ::after
• 16. مقدمه‌ای بر Flexbox برای چیدمان کامپوننت‌ها
• 17. محورهای اصلی و متقاطع در Flexbox
• 18. تراز کردن آیتم‌ها در Flexbox با justify-content و align-items
• 19. کنترل رشد و کوچک شدن آیتم‌ها: flex-grow, flex-shrink
• 20. مقدمه‌ای بر CSS Grid برای چیدمان کلی داشبورد
• 21. تعریف ستون‌ها و ردیف‌ها در Grid
• 22. جایگذاری آیتم‌ها در Grid
• 23. مبانی طراحی واکنش‌گرا (Responsive Design)
• 24. استفاده از Media Queries برای نمایشگرهای مختلف
• 25. مفهوم Viewport و کاربرد آن
• 26. استفاده از واحدهای نسبی: %, em, rem, vw, vh
• 27. موقعیت‌دهی عناصر: position (static, relative, absolute, fixed, sticky)
• 28. مدیریت لایه‌ها با z-index برای المان‌های روی نقشه
• 29. کار با overflow برای مدیریت محتوای اضافی
• 30. استایل‌دهی به جداول ساده اطلاعات ناوگان
• 31. متغیرهای CSS (Custom Properties) برای ساخت تم
• 32. کاربرد متغیرها در پیاده‌سازی تم روشن و تاریک
• 33. مقدمه‌ای بر Transitions برای انیمیشن‌های نرم
• 34. ویژگی‌های Transform: translate, rotate, scale
• 35. مقدمه‌ای بر Animations و Keyframes
• 36. ایجاد انیمیشن‌های Loading و Spinner
• 37. استفاده از توابع محاسباتی: calc(), min(), max()
• 38. استایل‌دهی به فرم‌های ورود اطلاعات خودرو و راننده
• 39. استایل‌دهی به فیلدهای ورودی: text, password, email
• 40. استایل‌دهی به Checkbox و Radio Button سفارشی
• 41. استایل‌دهی به Dropdown (Select)
• 42. طراحی و استایل‌دهی دکمه‌ها (Buttons)
• 43. حالت‌های مختلف دکمه: Hover, Active, Disabled
• 44. استایل‌دهی به پیام‌های اعتبارسنجی فرم (Validation Messages)
• 45. ساختار کلی چیدمان داشبورد مدیریت ناوگان
• 46. طراحی هدر (Header) و نوار بالایی داشبورد
• 47. طراحی سایدبار (Sidebar) و منوی ناوبری
• 48. استایل‌دهی به آیکون‌ها (SVG و Font Icons)
• 49. طراحی کارت‌های اطلاعاتی (Info Cards) برای نمایش آمار کلیدی
• 50. استایل‌دهی به ویجت نمایش وضعیت کلی ناوگان
• 51. استایل‌دهی پایه برای نقشه (Map Container)
• 52. طراحی نشانگرهای سفارشی نقشه (Custom Map Markers)
• 53. استایل‌دهی به وضعیت‌های مختلف نشانگر: آنلاین، آفلاین، در حرکت
• 54. طراحی پاپ‌آپ (Popup) اطلاعات خودرو روی نقشه
• 55. استایل‌دهی به مسیرهای ترسیم شده (Route Lines)
• 56. استایل‌دهی به مناطق ژئوفنس (Geofence Areas) روی نقشه
• 57. طراحی و استایل‌دهی پیشرفته جداول داده (Data Tables)
• 58. ایجاد حالت Hover برای ردیف‌های جدول
• 59. استایل‌دهی به سربرگ (Header) جدول و قابلیت مرتب‌سازی
• 60. طراحی سیستم صفحه‌بندی (Pagination) برای جداول
• 61. واکنش‌گرا کردن جداول داده برای نمایش در موبایل
• 62. ایجاد افکت zebra-striping برای خوانایی بهتر جداول
• 63. استایل‌دهی به سلول‌های جدول بر اساس وضعیت داده (مثلاً وضعیت هشدار)
• 64. طراحی نمودارهای میله‌ای (Bar Charts) با CSS
• 65. طراحی نمودارهای دایره‌ای و گیج‌ها (Gauges)
• 66. استایل‌دهی به نوارهای پیشرفت (Progress Bars) برای نمایش وضعیت تعمیرات
• 67. طراحی سیستم هشدارها و نوتیفیکیشن‌ها (Alerts)
• 68. استایل‌دهی به مودال‌ها (Modals) برای نمایش جزئیات
• 69. طراحی Tooltip برای راهنمایی کاربر
• 70. انتخابگرهای پیشرفته: Attribute Selectors
• 71. انتخابگرهای پیشرفته: شبه‌کلاس‌های ساختاری (:nth-child, :first-child)
• 72. استفاده از گرادیان‌ها (Gradients) در پس‌زمینه
• 73. اعمال سایه به عناصر با box-shadow
• 74. گرد کردن گوشه‌ها با border-radius
• 75. استفاده از فیلترهای CSS برای افکت‌های تصویری
• 76. مفهوم Stacking Context و تاثیر آن بر z-index
• 77. کار با Blend Modes برای ترکیب لایه‌ها
• 78. آشنایی با پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 79. متغیرها و Mixinها در Sass
• 80. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 81. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 82. معرفی متدولوژی OOCSS و SMACSS
• 83. بهینه‌سازی کارایی CSS
• 84. تکنیک‌های کاهش حجم فایل‌های CSS
• 85. استفاده از CSS Sprites برای آیکون‌ها
• 86. ملاحظات مربوط به سازگاری بین مرورگرها (Cross-browser Compatibility)
• 87. استفاده از Autoprefixer
• 88. ابزارهای توسعه‌دهنده مرورگر برای دیباگ CSS
• 89. اصول اولیه دسترسی‌پذیری (Accessibility) در CSS
• 90. استفاده از ویژگی‌های ARIA برای بهبود تجربه کاربری
• 91. طراحی حالت پرینت (Print Stylesheet) برای گزارش‌ها
• 92. استفاده از prefers-reduced-motion برای کاربران حساس به حرکت
• 93. پیاده‌سازی کامل تم تاریک (Dark Mode) با متغیرهای CSS
• 94. مدیریت فونت‌های سفارشی با @font-face
• 95. بهینه‌سازی بارگذاری فونت‌ها
• 96. ایجاد یک کتابخانه کامپوننت پایه برای داشبورد
• 97. پروژه عملی: ساخت چیدمان اصلی داشبورد
• 98. پروژه عملی: استایل‌دهی کامل جدول گزارش سفرها
• 99. پروژه عملی: طراحی و پیاده‌سازی فرم افزودن خودرو
• 100. پروژه عملی: نمایش زنده موقعیت خودروها روی نقشه با استایل‌های پویا