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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در سیستم‌های مدیریت ناوگان
• 2. نحوه عملکرد CSS: آبشار (Cascade)، وراثت (Inheritance) و ویژگی (Specificity)
• 3. روش‌های افزودن CSS: داخلی (Internal)، خارجی (External) و درون‌خطی (Inline)
• 4. ساختار یک قانون CSS: انتخابگر (Selector) و بلوک اعلان (Declaration Block)
• 5. کامنت‌گذاری در CSS
• 6. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 7. انتخابگرهای اصلی: نوع (Type)، کلاس (Class) و شناسه (ID)
• 8. واحدهای اندازه‌گیری مطلق و نسبی (px, %, em, rem, vh, vw)
• 9. مفهوم Box Model: محتوا، Padding، Border، Margin
• 10. تنظیمات عرض و ارتفاع (Width & Height)
• 11. خاصیت box-sizing: content-box در مقابل border-box
• 12. کار با رنگ‌ها: نام‌های کلیدی، HEX، RGB و HSL
• 13. تنظیم پس‌زمینه: background-color و background-image
• 14. کنترل تکرار و موقعیت پس‌زمینه (background-repeat, background-position)
• 15. تنظیم اندازه پس‌زمینه (background-size)
• 16. استایل‌دهی به حاشیه‌ها (Borders): استایل، ضخامت و رنگ
• 17. گرد کردن گوشه‌ها با border-radius
• 18. استایل‌دهی به متن: font-family, font-size, font-weight
• 19. تنظیمات ترازبندی و ارتفاع خط متن (text-align, line-height)
• 20. تزئینات متن: text-decoration و text-transform
• 21. سایه‌دهی به متن و عناصر (text-shadow, box-shadow)
• 22. انتخابگرهای ترکیبی (Combinators): فرزند (Descendant)، مستقیم (Child)، همسایه (Sibling)
• 23. انتخابگرهای ویژگی (Attribute Selectors) برای نمایش وضعیت خودروها
• 24. کلاس‌های کاذب (Pseudo-classes): :hover, :focus, :active
• 25. کلاس‌های کاذب ساختاری: :first-child, :last-child, :nth-child
• 26. عناصر کاذب (Pseudo-elements): ::before و ::after
• 27. مفهوم Display: block, inline, inline-block
• 28. مخفی کردن عناصر: display: none در مقابل visibility: hidden
• 29. موقعیت‌یابی (Positioning): static و relative
• 30. موقعیت‌یابی مطلق (Positioning: absolute)
• 31. موقعیت‌یابی ثابت و چسبنده (Positioning: fixed, sticky)
• 32. مدیریت لایه‌ها با z-index
• 33. آشنایی با Flexbox برای طرح‌بندی‌های یک‌بعدی
• 34. ویژگی‌های Flex Container: display, flex-direction, flex-wrap
• 35. ترازبندی در محور اصلی با justify-content
• 36. ترازبندی در محور متقاطع با align-items
• 37. مدیریت چندین خط با align-content
• 38. ویژگی‌های Flex Item: flex-grow, flex-shrink, flex-basis
• 39. خاصیت کوتاه‌نویسی flex
• 40. تغییر ترتیب آیتم‌ها با order
• 41. آشنایی با Grid برای طرح‌بندی‌های دوبعدی
• 42. تعریف ستون‌ها و ردیف‌ها: grid-template-columns, grid-template-rows
• 43. واحد fr در Grid
• 44. ایجاد فاصله بین آیتم‌ها با gap
• 45. موقعیت‌دهی آیتم‌ها در Grid با شماره خط
• 46. نام‌گذاری نواحی با grid-template-areas
• 47. استایل‌دهی به دکمه‌ها و وضعیت‌های مختلف آن‌ها (فعال، غیرفعال، هاور)
• 48. استایل‌دهی به فرم‌ها: input, textarea, select
• 49. سفارشی‌سازی Checkbox و Radio Button
• 50. طراحی جداول داده برای لیست خودروها
• 51. پیاده‌سازی Zebra Striping برای خوانایی بهتر جداول
• 52. استایل‌دهی به لیست‌ها برای ساخت منوهای ناوبری
• 53. ساخت یک نوار کناری (Sidebar) برای داشبورد
• 54. طراحی هدر (Header) و نوار ابزار (Toolbar)
• 55. ایجاد پنجره‌های مودال (Modal) برای نمایش جزئیات
• 56. طراحی کارت‌ها (Cards) برای خلاصه وضعیت هر خودرو
• 57. پیاده‌سازی نشانگرهای وضعیت (Status Indicators): آنلاین، آفلاین، در حال حرکت
• 58. استایل‌دهی به نوارهای پیشرفت (Progress Bars) برای سرویس‌های دوره‌ای
• 59. ایجاد Tooltip برای آیکون‌ها و نشانگرهای روی نقشه
• 60. طراحی Breadcrumbs برای نمایش مسیر ناوبری
• 61. استایل‌دهی به هشدارها و اعلان‌ها (Alerts & Notifications)
• 62. سفارشی‌سازی اسکرول‌بار (Scrollbar)
• 63. طراحی منوهای کشویی (Dropdown Menus)
• 64. بهینه‌سازی تایپوگرافی برای خوانایی در داشبورد
• 65. استفاده از آیکون‌ها با Font Libraries یا SVG
• 66. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 67. تنظیم Viewport Meta Tag
• 68. استفاده از Media Queries برای تعریف Breakpoint
• 69. رویکرد Mobile-First در مقابل Desktop-First
• 70. پیاده‌سازی طرح‌بندی واکنش‌گرا برای داشبورد
• 71. تکنیک‌های واکنش‌گرا کردن جداول داده
• 72. واکنش‌گرا کردن تصاویر
• 73. استفاده از توابع clamp(), min(), max() برای تایپوگرافی روان
• 74. ایجاد منوی همبرگری (Hamburger Menu) برای موبایل
• 75. تست واکنش‌گرایی با ابزارهای مرورگر
• 76. انتقال‌ها (Transitions): ایجاد انیمیشن‌های نرم بین وضعیت‌ها
• 77. توابع زمانی انتقال (Transition Timing Functions)
• 78. انیمیشن‌ها با @keyframes
• 79. کنترل انیمیشن‌ها: animation-duration, animation-iteration-count
• 80. تبدیل‌ها (Transforms): جابجایی (translate) و تغییر مقیاس (scale)
• 81. تبدیل‌ها: چرخش (rotate) و کج کردن (skew)
• 82. ترکیب چندین Transform
• 83. افکت‌دهی با فیلترها (Filter): blur, brightness, contrast
• 84. ایجاد اشکال سفارشی با clip-path
• 85. کنترل نحوه نمایش تصاویر با object-fit
• 86. متغیرهای CSS (Custom Properties) برای مدیریت متمرکز استایل‌ها
• 87. استفاده از متغیرها برای پیاده‌سازی تم (Theming)
• 88. انتخابگر :root
• 89. استفاده از تابع calc() برای محاسبات پویا
• 90. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 91. مفهوم Nesting در Sass
• 92. متغیرها و Mixinها در Sass
• 93. معماری CSS: آشنایی با متدولوژی BEM
• 94. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 95. بهینه‌سازی عملکرد CSS: کاهش حجم فایل و رفع Render-Blocking
• 96. پروژه عملی: ساختار HTML داشبورد مدیریت ناوگان
• 97. پروژه عملی: پیاده‌سازی طرح‌بندی اصلی با Grid و Flexbox
• 98. پروژه عملی: استایل‌دهی به لیست خودروها و نشانگرهای وضعیت
• 99. پروژه عملی: طراحی کانتینر نقشه و کنترل‌های آن
• 100. پروژه عملی: بهینه‌سازی نهایی و تست واکنش‌گرایی داشبورد