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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در رابط کاربری مدیریت ناوگان
• 2. CSS چیست و چرا برای وب ضروری است؟
• 3. روش‌های افزودن CSS به صفحه: Inline, Internal, External
• 4. آشنایی با ساختار یک قانون CSS: Selector و Declaration Block
• 5. نحوه نوشتن کامنت در کدهای CSS
• 6. اتصال CSS به ساختار HTML یک داشبورد مدیریت ناوگان
• 7. آشنایی اولیه با ابزارهای توسعه‌دهنده مرورگر (Developer Tools)
• 8. مفهوم CSS Reset و Normalize.css برای ثبات در مرورگرها
• 9. واحدهای اندازه‌گیری مطلق در CSS: px, pt, cm
• 10. واحدهای اندازه‌گیری نسبی در CSS: %, em, rem, vh, vw
• 11. آشنایی با انتخابگرها (Selectors)
• 12. انتخابگر نوع (Type Selector)
• 13. انتخابگر کلاس (Class Selector)
• 14. انتخابگر شناسه (ID Selector)
• 15. انتخابگر سراسری (Universal Selector)
• 16. گروه‌بندی انتخابگرها (Grouping Selectors)
• 17. انتخابگرهای ترکیبی: Descendant, Child, Sibling
• 18. انتخابگرهای صفت (Attribute Selectors)
• 19. استفاده از انتخابگر صفت برای نمایش وضعیت خودروها (e.g., [data-status="active"])
• 20. مفهوم Specificity و اولویت در CSS
• 21. آشنایی با شبه‌کلاس‌ها (Pseudo-classes)
• 22. شبه‌کلاس‌های تعاملی: :hover, :active, :focus
• 23. شبه‌کلاس‌های مربوط به فرم‌ها: :checked, :disabled, :required
• 24. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 25. آشنایی با شبه‌المان‌ها (Pseudo-elements)
• 26. استفاده از ::before و ::after برای افزودن آیکون وضعیت
• 27. مبانی Box Model: Content, Padding, Border, Margin
• 28. خاصیت box-sizing: content-box در مقابل border-box
• 29. تنظیم عرض و ارتفاع المان‌ها (width, height, min/max)
• 30. خاصیت display: block, inline, inline-block
• 31. رنگ‌ها در CSS: نام رنگ، HEX, RGB, RGBA
• 32. مدل رنگ HSL و HSLA برای شفافیت
• 33. اعمال رنگ به متن و پس‌زمینه (color, background-color)
• 34. استفاده از تصاویر پس‌زمینه (background-image)
• 35. کنترل تکرار و موقعیت تصویر پس‌زمینه (background-repeat, background-position)
• 36. خاصیت background-size برای کنترل اندازه تصویر
• 37. استفاده از گرادیان‌های خطی و شعاعی در پس‌زمینه
• 38. مبانی تایپوگرافی: font-family و فونت‌های وب (@font-face)
• 39. تنظیم اندازه و وزن فونت (font-size, font-weight)
• 40. استایل‌دهی به متن: font-style, text-decoration, text-transform
• 41. فاصله‌گذاری در متن: line-height, letter-spacing, word-spacing
• 42. تراز کردن متن: text-align
• 43. استایل‌دهی به لیست‌ها (ul, ol, list-style)
• 44. استایل‌دهی به جداول: border-collapse
• 45. استایل‌دهی به سرآیند و بدنه جدول (thead, tbody)
• 46. ایجاد Zebra Striping برای خوانایی بهتر جداول داده
• 47. استایل‌دهی به لینک‌ها و وضعیت‌های مختلف آن
• 48. استایل‌دهی به دکمه‌ها برای عملیات‌های مختلف (ثبت، حذف، ویرایش)
• 49. استایل‌دهی به فیلدهای ورودی فرم (input, textarea)
• 50. شخصی‌سازی Checkbox و Radio Button
• 51. طراحی ساختار فرم‌های ورود اطلاعات راننده و خودرو
• 52. موقعیت‌یابی (Positioning): static, relative, absolute
• 53. موقعیت‌یابی (Positioning): fixed, sticky
• 54. کنترل لایه‌ها با z-index
• 55. آشنایی با Flexbox برای چیدمان‌های یک‌بعدی
• 56. ویژگی‌های Flex Container: flex-direction, flex-wrap
• 57. ویژگی‌های Flex Container: justify-content, align-items
• 58. ویژگی‌های Flex Items: flex-grow, flex-shrink, flex-basis
• 59. ساخت نوار ناوبری اصلی داشبورد با Flexbox
• 60. آشنایی با Grid برای چیدمان‌های دوبعدی
• 61. تعریف ستون‌ها و ردیف‌ها در Grid (grid-template-columns/rows)
• 62. استفاده از واحد fr برای ستون‌های انعطاف‌پذیر
• 63. ایجاد فاصله بین المان‌ها با gap
• 64. موقعیت‌دهی المان‌ها در Grid با شماره خطوط
• 65. استفاده از grid-template-areas برای طراحی لی‌اوت داشبورد
• 66. ترکیب Flexbox و Grid برای ساخت کامپوننت‌های پیچیده
• 67. مبانی طراحی واکنش‌گرا (Responsive Design)
• 68. استفاده از متا تگ viewport
• 69. آشنایی با Media Queries و Breakpointها
• 70. استراتژی Mobile-First در طراحی واکنش‌گرا
• 71. ایجاد لی‌اوت‌های سیال با استفاده از درصد
• 72. واکنش‌گرا کردن تصاویر
• 73. واکنش‌گرا کردن تایپوگرافی با واحدهای نسبی
• 74. واکنش‌گرا کردن جداول داده برای نمایش در موبایل
• 75. نمایش یا مخفی کردن المان‌ها بر اساس اندازه صفحه
• 76. مقدمه‌ای بر Transitions
• 77. کنترل سرعت Transition با transition-timing-function
• 78. مقدمه‌ای بر 2D Transforms: translate(), scale()
• 79. مقدمه‌ای بر 2D Transforms: rotate(), skew()
• 80. مقدمه‌ای بر 3D Transforms
• 81. مقدمه‌ای بر Animations با @keyframes
• 82. کنترل انیمیشن با animation-name, animation-duration
• 83. استفاده از انیمیشن برای نمایش وضعیت آنلاین/آفلاین خودروها
• 84. ایجاد یک Spinner بارگذاری با CSS Animation
• 85. متغیرهای CSS (Custom Properties) برای مدیریت تم
• 86. ایجاد تم تاریک و روشن برای داشبورد با متغیرهای CSS
• 87. استفاده از تابع calc() برای محاسبات دینامیک
• 88. استفاده از فیلترها (filters) برای افکت‌های تصویری
• 89. ایجاد افکت Blur برای پنجره‌های Modal
• 90. سازماندهی فایل‌های CSS برای یک پروژه بزرگ
• 91. متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 92. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 93. بهینه‌سازی عملکرد CSS
• 94. دسترس‌پذیری (Accessibility) در CSS: :focus-visible
• 95. طراحی کارت‌های اطلاعاتی برای هر خودرو (Vehicle Cards)
• 96. استایل‌دهی به نشانگرها (Markers) روی نقشه
• 97. استایل‌دهی به پنجره‌های اطلاعاتی (InfoWindows) روی نقشه
• 98. طراحی نمودارها و گراف‌ها با CSS (سطح پایه)
• 99. ایجاد Tooltip با CSS خالص
• 100. پروژه نهایی: تجمیع مفاهیم و ساخت کامل رابط کاربری داشبورد مدیریت ناوگان