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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در پلتفرم‌های مدیریت ناوگان
• 2. نحوه افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. سینتکس CSS: سلکتورها، خصوصیات و مقادیر
• 4. کامنت‌گذاری در CSS
• 5. سلکتورهای اصلی: Element, Class, ID
• 6. سلکتورهای ترکیبی (Combinators): Descendant, Child, Sibling
• 7. سلکتورهای ویژگی (Attribute Selectors)
• 8. شبه-کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 9. شبه-کلاس‌های ساختاری: :nth-child, :first-child, :last-child
• 10. شبه-المان‌ها (Pseudo-elements): ::before, ::after
• 11. اولویت و آبشاری بودن در CSS (Specificity & Cascade)
• 12. وراثت (Inheritance)
• 13. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 14. واحدها در CSS: مطلق (px) و نسبی (em, rem)
• 15. واحدهای Viewport: vw, vh, vmin, vmax
• 16. رنگ‌ها در CSS: HEX, RGB, HSL, RGBA
• 17. تنظیمات پس‌زمینه: background-color, background-image
• 18. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 19. خصوصیات متن: color, text-align, text-decoration
• 20. فونت‌ها: font-family, font-size, font-weight, font-style
• 21. فونت‌های وب (Web Fonts) و @font-face
• 22. تنظیمات لیست‌ها (Lists)
• 23. خصوصیت Display: block, inline, inline-block
• 24. خصوصیت Visibility و تفاوت آن با Display: none
• 25. موقعیت‌یابی (Positioning): static, relative, absolute
• 26. موقعیت‌یابی (Positioning): fixed, sticky
• 27. کنترل لایه‌ها با Z-index
• 28. مقدمه‌ای بر Flexbox و کاربرد آن در داشبورد
• 29. Flex Container: display, flex-direction, flex-wrap
• 30. تراز کردن آیتم‌ها در Flexbox: justify-content
• 31. تراز کردن آیتم‌ها در Flexbox: align-items
• 32. تراز کردن خطوط در Flexbox: align-content
• 33. انعطاف‌پذیری آیتم‌ها: flex-grow, flex-shrink, flex-basis
• 34. خاصیت کوتاه‌نویسی flex
• 35. ترتیب‌دهی آیتم‌ها در Flexbox با order
• 36. مقدمه‌ای بر CSS Grid و کاربرد آن در چیدمان‌های پیچیده
• 37. Grid Container: display: grid
• 38. تعریف ستون‌ها و ردیف‌ها: grid-template-columns, grid-template-rows
• 39. واحد fr در Grid
• 40. استفاده از توابع repeat() و minmax() در Grid
• 41. ایجاد فاصله بین آیتم‌ها: gap, row-gap, column-gap
• 42. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 43. نام‌گذاری خطوط و نواحی در Grid
• 44. تراز کردن محتوای Grid: justify-content, align-content
• 45. تراز کردن آیتم‌های Grid: justify-items, align-items
• 46. Overflow: hidden, scroll, auto
• 47. استایل‌دهی به لینک‌ها و حالت‌های مختلف آنها
• 48. استایل‌دهی به دکمه‌ها (Buttons)
• 49. استایل‌دهی به فرم‌ها: input, textarea, label
• 50. استایل‌دهی پیشرفته فرم: Checkbox و Radio Button
• 51. استایل‌دهی به منوهای کشویی (Select)
• 52. استایل‌دهی به فرم بر اساس وضعیت: :valid, :invalid, :required
• 53. استایل‌دهی پایه‌ای جداول: table, th, td
• 54. طراحی جداول واکنش‌گرا (Responsive Tables)
• 55. ایجاد هدر و ستون‌های ثابت در جداول با position: sticky
• 56. طراحی جدول‌های راه‌راه (Zebra-striped Tables)
• 57. استایل‌دهی به کارت‌ها (Cards) برای نمایش اطلاعات خودرو
• 58. طراحی منوهای ناوبری (Navigation Menus)
• 59. ساخت منوهای Dropdown با CSS
• 60. استایل‌دهی به آیکون‌ها (Font Icons vs. SVG)
• 61. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 62. متا تگ Viewport
• 63. استفاده از Media Queries برای Breakpoint‌های مختلف
• 64. رویکرد Mobile-First در طراحی واکنش‌گرا
• 65. تصاویر واکنش‌گرا (Responsive Images)
• 66. تبدیل‌ها (Transforms): translate, rotate, scale
• 67. مبدا تبدیل (transform-origin)
• 68. انتقال‌ها (Transitions): ایجاد افکت‌های نرم
• 69. توابع زمانی در Transition
• 70. انیمیشن‌ها با @keyframes
• 71. کنترل انیمیشن: animation-name, animation-duration, animation-iteration-count
• 72. توابع زمانی و تاخیر در انیمیشن‌ها
• 73. متغیرهای CSS (Custom Properties) و کاربرد در تم‌سازی
• 74. ساخت تم روشن و تاریک (Light/Dark Mode) با متغیرهای CSS
• 75. تابع calc() برای محاسبات دینامیک
• 76. گرادیان‌ها: linear-gradient و radial-gradient
• 77. ایجاد سایه برای جعبه‌ها (box-shadow) و متن (text-shadow)
• 78. گرد کردن گوشه‌ها با border-radius
• 79. فیلترهای CSS: blur, grayscale, brightness
• 80. خاصیت backdrop-filter برای افکت شیشه مات
• 81. برش المان‌ها با clip-path
• 82. استایل‌دهی به Scrollbar
• 83. مفهوم معماری CSS و نیازمندی‌های یک پلتفرم بزرگ
• 84. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 85. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 86. متغیرها و تودرتویی (Nesting) در Sass
• 87. استفاده از Mixin ها در Sass برای کدهای قابل استفاده مجدد
• 88. استفاده از توابع و عملیات‌ها در Sass
• 89. طراحی ساختار داشبورد اصلی مدیریت ناوگان با Grid
• 90. استایل‌دهی به ویجت‌های KPI (Key Performance Indicator)
• 91. استایل‌دهی به نمودارهای ساده با CSS
• 92. طراحی نشانگرهای وضعیت آنلاین/آفلاین/در حرکت
• 93. ایجاد انیمیشن‌های Loading Spinner با CSS
• 94. طراحی Skeleton Screens برای بهبود تجربه کاربری
• 95. استایل‌دهی به پنجره‌های اطلاعاتی روی نقشه (Map InfoWindows)
• 96. طراحی نشانگرهای سفارشی نقشه (Custom Map Markers)
• 97. استایل‌دهی به اعلان‌ها (Notifications) و هشدارها (Alerts)
• 98. طراحی مودال‌ها (Modals) و پاپ‌آپ‌ها
• 99. ملاحظات دسترسی‌پذیری (Accessibility) در CSS
• 100. استفاده از :focus-visible برای کاربران کیبورد