فلش‌کارت‌های آموزشی CSS for Fleet Management Systems

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. نحوه اتصال CSS به HTML (داخلی، خارجی، درون‌خطی)
• 3. آشنایی با سینتکس CSS و قواعد آن
• 4. انتخابگرها: انتخابگر نوع (Type Selector)
• 5. انتخابگرها: انتخابگر کلاس (Class Selector)
• 6. انتخابگرها: انتخابگر ID (ID Selector)
• 7. انتخابگرها: انتخابگر جهانی (Universal Selector)
• 8. انتخابگرها: انتخابگرهای ترکیبی (Combinators)
• 9. اصول کار با رنگ‌ها در CSS (نام، HEX, RGB, RGBA)
• 10. پس‌زمینه‌ها: رنگ پس‌زمینه (background-color)
• 11. پس‌زمینه‌ها: تصویر پس‌زمینه (background-image)
• 12. پس‌زمینه‌ها: تنظیمات پیشرفته تصویر پس‌زمینه
• 13. مدل جعبه‌ای (Box Model): معرفی و اجزاء
• 14. مدل جعبه‌ای: Margin (حاشیه بیرونی)
• 15. مدل جعبه‌ای: Border (کادر)
• 16. مدل جعبه‌ای: Padding (فاصله داخلی)
• 17. مدل جعبه‌ای: Content (محتوا)
• 18. مفهوم Display: Block، Inline، Inline-Block
• 19. واحدهای اندازه‌گیری در CSS: پیکسل (px)
• 20. واحدهای اندازه‌گیری: Em و Rem
• 21. واحدهای اندازه‌گیری: درصد (%)
• 22. واحدهای اندازه‌گیری: Viewport (vw, vh, vmin, vmax)
• 23. خاصیت Specificity (اولویت انتخابگرها)
• 24. مفهوم Cascade و Inheritance
• 25. مبانی تایپوگرافی: خانواده فونت (font-family)
• 26. تایپوگرافی: اندازه فونت (font-size)
• 27. تایپوگرافی: وزن و سبک فونت (font-weight, font-style)
• 28. تایپوگرافی: ارتفاع خط (line-height) و تراز متن (text-align)
• 29. استایل‌دهی به لیست‌ها و پیوندها
• 30. موقعیت‌دهی عناصر: Position Static
• 31. موقعیت‌دهی عناصر: Position Relative
• 32. موقعیت‌دهی عناصر: Position Absolute
• 33. موقعیت‌دهی عناصر: Position Fixed
• 34. موقعیت‌دهی عناصر: Position Sticky
• 35. مفهوم Z-index برای لایه‌بندی
• 36. مفهوم Float و Clear برای چیدمان
• 37. چیدمان Flexbox: مقدمه و ویژگی‌های کانتینر (display: flex)
• 38. Flexbox: جهت‌دهی (flex-direction) و شکست خط (flex-wrap)
• 39. Flexbox: تراز محتوا (justify-content) و آیتم‌ها (align-items)
• 40. Flexbox: تراز خطوط (align-content)
• 41. Flexbox: ویژگی‌های آیتم (order, flex-grow, flex-shrink, flex-basis)
• 42. چیدمان Grid Layout: مقدمه و ویژگی‌های کانتینر (display: grid)
• 43. Grid: تعریف ستون‌ها (grid-template-columns)
• 44. Grid: تعریف ردیف‌ها (grid-template-rows)
• 45. Grid: تعریف ناحیه‌ها (grid-template-areas)
• 46. Grid: فاصله بین خانه‌ها (gap)
• 47. Grid: ویژگی‌های آیتم (grid-column, grid-row, grid-area)
• 48. طراحی واکنش‌گرا (Responsive Design): مقدمه
• 49. متا تگ Viewport
• 50. Media Queries: تعریف و کاربرد
• 51. Media Queries: نقاط شکست (Breakpoints)
• 52. رویکرد Mobile-First در طراحی واکنش‌گرا
• 53. تصاویر و ویدئوهای واکنش‌گرا
• 54. تایپوگرافی واکنش‌گرا
• 55. استفاده از Custom Properties (CSS Variables)
• 56. توابع CSS: calc(), var()
• 57. افکت‌ها: Box-shadow و Text-shadow
• 58. افکت‌ها: Gradients (Linear, Radial)
• 59. انتقال‌ها (Transitions): مفاهیم و ویژگی‌ها
• 60. تبدیل‌ها (Transforms): Translate, Rotate, Scale, Skew
• 61. انیمیشن‌ها (Animations): Keyframes و کاربرد
• 62. انیمیشن‌ها: خواص timing-function و iteration-count
• 63. شبه‌کلاس‌ها (Pseudo-classes): hover, focus, active
• 64. شبه‌کلاس‌ها: nth-child, first-child, last-child
• 65. شبه‌عناصر (Pseudo-elements): before, after
• 66. سازماندهی کد CSS: مقدمه بر Best Practices
• 67. متدولوژی‌های CSS: معرفی BEM (Block, Element, Modifier)
• 68. متدولوژی‌های CSS: معرفی OOCSS و SMACSS
• 69. استفاده از Preprocessors: SASS/SCSS (مبانی)
• 70. SASS/SCSS: متغیرها، Nesting و Mixins
• 71. بهینه‌سازی عملکرد CSS: Minification و Concatenation
• 72. بهینه‌سازی: Critical CSS و Lazy Loading
• 73. سازگاری با مرورگرها (Browser Compatibility) و Fallbacks
• 74. CSS برای سیستم‌های مدیریت ناوگان: مفاهیم و نیازها
• 75. استایل‌دهی به داشبورد اصلی (KPIs و خلاصه‌ها)
• 76. طراحی و استایل‌دهی جداول داده (Data Grids)
• 77. جداول: Pagination، Sorting و Filtering
• 78. استایل‌دهی فرم‌های ورود داده و فیلترها
• 79. طراحی کارت‌های اطلاعات وسایل نقلیه (Vehicle Cards)
• 80. نمایش وضعیت وسایل نقلیه (آنلاین، آفلاین، هشدار)
• 81. استایل‌دهی عناصر نقشه (Map Overlays, Markers)
• 82. نمایش مسیرها و مناطق جغرافیایی بر روی نقشه
• 83. استایل‌دهی نمودارها و گراف‌ها (Data Visualization)
• 84. نمودارها: استفاده از CSS برای کتابخانه‌های Charting
• 85. استایل‌دهی به سیستم‌های هشدار و اعلان (Alerts & Notifications)
• 86. ناوبری: استایل‌دهی سایدبار و نوار بالایی (Sidebar & Top Nav)
• 87. ناوبری: منوهای Dropdown و Mega-menus
• 88. طراحی Theme: پیاده‌سازی Dark Mode
• 89. طراحی Theme: Brand Guideline و سفارشی‌سازی
• 90. استایل‌دهی برای نقش‌های کاربری مختلف (Admin, Driver, Dispatcher)
• 91. طراحی تجربه کاربری برای صفحات ورود و ثبت‌نام
• 92. استفاده از آیکون‌ها در سیستم‌های مدیریت ناوگان (Font Awesome, SVG)
• 93. استایل‌دهی برای عناصر تعاملی خاص (Sliders, Toggles, Custom Selects)
• 94. قابلیت دسترسی (Accessibility) در طراحی CSS برای FM
• 95. استایل‌دهی برای دستگاه‌های موبایل و تبلت (Mobile Dispatch)
• 96. استایل‌دهی برای نمایشگرهای داخل خودرو (In-Vehicle Displays)
• 97. بهینه‌سازی CSS برای عملکرد در دستگاه‌های با منابع محدود
• 98. استایل‌دهی برای گزارش‌گیری و چاپ (Print Styles)
• 99. نگهداری و گسترش‌پذیری CSS در پروژه‌های بزرگ
• 100. آینده CSS و ابزارهای جدید در مدیریت ناوگان