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

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

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

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

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

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

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

• 1. مقدمه: CSS چیست و چه نقشی در اکوسیستم مدیریت ناوگان دارد؟
• 2. روش‌های افزودن CSS به HTML: Inline, Internal, External
• 3. آشنایی با ساختار و سینتکس CSS
• 4. کامنت‌گذاری در CSS
• 5. سلکتورهای پایه: Element, Class, ID
• 6. سلکتورهای ترکیبی و گروهی
• 7. مفهوم Specificity (اولویت سلکتورها)
• 8. مفهوم Cascade (آبشار) و ترتیب اعمال استایل‌ها
• 9. وراثت (Inheritance) در CSS
• 10. آشنایی اولیه با ابزارهای توسعه‌دهنده مرورگر (DevTools) برای CSS
• 11. کار با رنگ‌ها: مقادیر Hex، RGB و HSL
• 12. استایل‌دهی به پس‌زمینه: رنگ و تصویر
• 13. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 14. مبانی Box Model: Content, Padding, Border, Margin
• 15. ویژگی box-sizing: content-box در مقابل border-box
• 16. استایل‌دهی به متون: font-family و font-size
• 17. تنظیم وزن و استایل فونت: font-weight و font-style
• 18. استفاده از فونت‌های وب با @font-face
• 19. تراز کردن و دکوراسیون متن
• 20. استایل‌دهی به لینک‌ها و حالت‌های آن‌ها (:link, :visited, :hover, :active)
• 21. استایل‌دهی به لیست‌های مرتب و نامرتب
• 22. استایل‌دهی پایه جداول: border, padding
• 23. مفاهیم display: block, inline, inline-block
• 24. کنترل نمایش عناصر با visibility و opacity
• 25. واحدها در CSS: px, em, rem, %
• 26. واحدهای Viewport: vw, vh, vmin, vmax
• 27. موقعیت‌یابی (Positioning): static و relative
• 28. موقعیت‌یابی: absolute و fixed
• 29. کنترل لایه‌ها با z-index
• 30. موقعیت‌یابی چسبان (Sticky Positioning)
• 31. آشنایی با Float و Clear (برای درک کدهای قدیمی)
• 32. مقدمه‌ای بر Flexbox و کاربرد آن در چیدمان داشبورد
• 33. ویژگی‌های Flex Container: flex-direction, flex-wrap
• 34. تراز کردن آیتم‌ها در Flexbox: justify-content
• 35. تراز کردن آیتم‌ها در Flexbox: align-items و align-content
• 36. ویژگی‌های Flex Items: flex-grow, flex-shrink, flex-basis
• 37. چیدمان هدر و فوتر داشبورد با Flexbox
• 38. ساخت سایدبار منعطف برای منوی ناوبری با Flexbox
• 39. مقدمه‌ای بر CSS Grid Layout
• 40. تعریف ستون‌ها و ردیف‌ها در Grid
• 41. جایگذاری آیتم‌ها در Grid
• 42. ایجاد فاصله بین آیتم‌ها با gap
• 43. استفاده از واحد fr برای ستون‌های منعطف
• 44. چیدمان کامل داشبورد اصلی با CSS Grid
• 45. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 46. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 47. استفاده از متا تگ Viewport
• 48. آشنایی با Media Queries
• 49. رویکرد Mobile-First در طراحی واسط کاربری مدیریت ناوگان
• 50. تعیین نقاط شکست (Breakpoints) برای دستگاه‌های مختلف (دسکتاپ، تبلت، موبایل)
• 51. واکنش‌گرا کردن تصاویر
• 52. واکنش‌گرا کردن تایپوگرافی
• 53. سلکتورهای ویژگی (Attribute Selectors)
• 54. شبه‌کلاس‌ها (Pseudo-classes): nth-child, first-child, last-child
• 55. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 56. استایل‌دهی به حالت‌های مختلف فرم‌ها: :focus, :disabled, :checked
• 57. اعتبارسنجی فرم با شبه‌کلاس‌های :valid و :invalid
• 58. ایجاد Transition برای تغییرات نرم در استایل‌ها
• 59. توابع زمان‌بندی در Transition
• 60. ترکیب چندین Transition
• 61. آشنایی با Transform: توابع 2D (translate, rotate, scale)
• 62. آشنایی با Transform: توابع 3D
• 63. انیمیشن‌های کلیدی با @keyframes
• 64. کنترل انیمیشن‌ها با ویژگی animation
• 65. ایجاد افکت سایه برای جعبه‌ها (box-shadow)
• 66. ایجاد افکت سایه برای متون (text-shadow)
• 67. ایجاد گرادیان‌های خطی و دایره‌ای در پس‌زمینه
• 68. استفاده از فیلترها: blur, grayscale, brightness
• 69. برش عناصر با clip-path
• 70. متغیرها در CSS (Custom Properties)
• 71. استفاده از تابع calc() برای محاسبات دینامیک
• 72. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 73. متغیرها و Nesting در Sass
• 74. استفاده از Mixin و Extend در Sass
• 75. سازماندهی فایل‌های CSS بر اساس کامپوننت
• 76. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 77. پیاده‌سازی استایل پایه برای داشبورد مدیریت ناوگان
• 78. طراحی کارت‌ها (Cards) برای نمایش اطلاعات خلاصه هر وسیله نقلیه
• 79. استایل‌دهی به نشانگرهای وضعیت خودرو (آنلاین، آفلاین، در حرکت) با رنگ و انیمیشن
• 80. طراحی جداول داده برای لیست خودروها و گزارش‌ها
• 81. افزودن قابلیت مرتب‌سازی و فیلتر به جداول با CSS
• 82. طراحی فرم‌های ورود اطلاعات (افزودن راننده یا خودرو)
• 83. استایل‌دهی به بازخوردهای اعتبارسنجی فرم‌ها
• 84. طراحی سیستم هشدار و نوتیفیکیشن در داشبورد
• 85. استایل‌دهی به نوار پیشرفت (Progress Bar) برای وضعیت تعمیرات
• 86. استایل‌دهی به عناصر نقشه (پاپ‌آپ‌ها، نشانگرها)
• 87. طراحی نمای تایم‌لاین برای تاریخچه سفرها
• 88. ایجاد تم روشن و تاریک (Light/Dark Mode) برای داشبورد
• 89. استایل‌دهی به نمودارها و گراف‌های داده (مصرف سوخت، مسافت پیموده شده)
• 90. طراحی پنل‌های بازشو (Modal) برای نمایش جزئیات
• 91. پیاده‌سازی استایل برای گزارش‌های قابل چاپ
• 92. شخصی‌سازی اسکرول‌بار مرورگر
• 93. ساخت منوی ناوبری تودرتو و واکنش‌گرا
• 94. ایجاد افکت Loading Spinner برای عملیات زمان‌بر
• 95. استایل‌دهی Tooltip برای راهنمایی کاربر
• 96. بهینه‌سازی عملکرد CSS: فشرده‌سازی و کاهش حجم فایل‌ها
• 97. مفهوم Critical CSS برای بارگذاری سریع‌تر
• 98. دیباگ کردن پیشرفته CSS با ابزارهای مرورگر
• 99. مبانی دسترسی‌پذیری (Accessibility) در CSS
• 100. مدیریت سازگاری بین مرورگرها (Cross-browser Compatibility)