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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در رابط کاربری مدیریت ناوگان
• 2. نحوه افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. آشنایی با ساختار یک قانون CSS (Selector, Property, Value)
• 4. نحوه نوشتن کامنت در CSS
• 5. انتخابگرهای اصلی: Element, Class, ID
• 6. انتخابگرهای ترکیبی (Descendant, Child, Sibling)
• 7. انتخابگرهای صفت (Attribute Selectors)
• 8. کلاس‌های کاذب (Pseudo-classes) مانند :hover و :active
• 9. عناصر کاذب (Pseudo-elements) مانند ::before و ::after
• 10. مفهوم آبشاری بودن (Cascade) در CSS
• 11. اولویت و امتیازدهی در انتخابگرها (Specificity)
• 12. مفهوم وراثت (Inheritance)
• 13. کلمه کلیدی !important و خطرات استفاده از آن
• 14. مبانی مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 15. ویژگی box-sizing: content-box در مقابل border-box
• 16. واحد‌های اندازه‌گیری مطلق (px, pt) و نسبی (em, rem, %)
• 17. کار با رنگ‌ها: نام، HEX, RGB, RGBA, HSL, HSLA
• 18. استایل‌دهی به پس‌زمینه: background-color و background-image
• 19. کنترل پس‌زمینه: background-repeat, position, size, attachment
• 20. استفاده از گرادینت‌ها در پس‌زمینه
• 21. استایل‌دهی به حاشیه‌ها (Borders): style, width, color
• 22. گرد کردن گوشه‌ها با border-radius
• 23. استایل‌دهی به متون: color, text-align, text-decoration
• 24. تنظیمات فونت: font-family, font-size, font-weight, font-style
• 25. استفاده از فونت‌های سفارشی با @font-face
• 26. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن
• 27. استایل‌دهی به لیست‌های مرتب و نامرتب
• 28. استایل‌دهی به جداول: نمایش لیست خودروها
• 29. استایل‌دهی به فرم‌ها: input, textarea, button, label
• 30. ویژگی display: block, inline, inline-block, none
• 31. تفاوت visibility: hidden و display: none
• 32. کنترل شفافیت با ویژگی opacity
• 33. تغییر شکل نشانگر ماوس با ویژگی cursor
• 34. مفهوم چیدمان (Layout) در CSS
• 35. کنترل سرریز محتوا با ویژگی overflow
• 36. مبانی چیدمان با position: static, relative
• 37. چیدمان با position: absolute و مفهوم والد موقعیت‌دار
• 38. چیدمان با position: fixed برای عناصر ثابت
• 39. چیدمان مدرن با position: sticky
• 40. کنترل لایه‌ها با z-index
• 41. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 42. ویژگی‌های Flex Container: display, flex-direction, flex-wrap
• 43. تراز افقی در Flexbox با justify-content
• 44. تراز عمودی در Flexbox با align-items
• 45. چیدمان چند خطی در Flexbox با align-content
• 46. ویژگی‌های Flex Item: flex-grow, flex-shrink, flex-basis
• 47. کنترل ترتیب عناصر با ویژگی order
• 48. تراز سفارشی یک آیتم با align-self
• 49. پروژه عملی: ساخت نوار بالای داشبورد با Flexbox
• 50. پروژه عملی: ایجاد کارت‌های اطلاعات خودرو با Flexbox
• 51. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 52. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 53. واحد fr در Grid
• 54. ایجاد فاصله بین آیتم‌ها با gap
• 55. موقعیت‌دهی آیتم‌ها در Grid با grid-column و grid-row
• 56. نام‌گذاری نواحی با grid-template-areas
• 57. تراز آیتم‌ها در Grid با justify-items و align-items
• 58. تراز کل شبکه با justify-content و align-content
• 59. تابع ()minmax برای ستون‌ها و ردیف‌های انعطاف‌پذیر
• 60. پروژه عملی: پیاده‌سازی چیدمان اصلی داشبورد مدیریت ناوگان با Grid
• 61. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 62. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 63. تنظیم Viewport با تگ متا
• 64. مبانی Media Queries برای تعریف Breakpointها
• 65. رویکرد Mobile-First در مقابل Desktop-First
• 66. ایجاد تصاویر واکنش‌گرا
• 67. تایپوگرافی واکنش‌گرا با واحدهای vw و vh
• 68. کلاس‌های کاذب ساختاری: nth-child, first-child, last-child
• 69. انتخابگر منفی‌ساز :not()
• 70. ایجاد سایه برای جعبه‌ها با box-shadow
• 71. ایجاد سایه برای متون با text-shadow
• 72. مقدمه‌ای بر Transitionها برای انیمیشن‌های نرم
• 73. ویژگی‌های Transition: property, duration, timing-function, delay
• 74. مقدمه‌ای بر Transformهای دو بعدی: translate, rotate, scale, skew
• 75. تغییر نقطه مبدا Transform با transform-origin
• 76. مقدمه‌ای بر Transformهای سه بعدی
• 77. انیمیشن‌های پیچیده با @keyframes و ویژگی animation
• 78. پروژه عملی: انیمیشن برای نشانگر وضعیت خودرو (در حال حرکت، متوقف)
• 79. پروژه عملی: ساخت یک انیمیشن لودینگ (Spinner)
• 80. فیلترهای گرافیکی: blur, brightness, contrast, grayscale
• 81. ترکیب حالت‌ها با mix-blend-mode
• 82. برش عناصر با clip-path
• 83. متغیرها در CSS (Custom Properties)
• 84. استفاده از تابع ()calc برای محاسبات پویا
• 85. سازماندهی فایل‌های CSS برای پروژه‌های بزرگ
• 86. آشنایی با متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 87. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/LESS
• 88. مفهوم Nesting در پیش‌پردازنده‌ها
• 89. استفاده از متغیرها و Mixinها در پیش‌پردازنده‌ها
• 90. مقدمه‌ای بر مفاهیم CSS-in-JS
• 91. استایل‌دهی به کامپوننت‌های نقشه (مانند Leaflet یا Google Maps API)
• 92. سفارشی‌سازی مارکرها و پاپ‌آپ‌های روی نقشه
• 93. استایل‌دهی به مسیرها و ژئوفنس‌ها (Geofences)
• 94. استایل‌دهی به نمودارها و داشبوردهای داده (مانند Chart.js)
• 95. پیاده‌سازی تم تاریک/روشن با استفاده از متغیرهای CSS
• 96. ملاحظات دسترسی‌پذیری (Accessibility): استایل‌دهی به حالت focus
• 97. ایجاد استایل‌های مخصوص چاپ (Print Stylesheets) برای گزارشات
• 98. بهینه‌سازی عملکرد CSS: کاهش حجم فایل و Critical CSS
• 99. استفاده از ابزارهای توسعه‌دهنده مرورگر برای دیباگ کردن CSS
• 100. پروژه نهایی: ساخت کامل رابط کاربری داشبورد مدیریت ناوگان