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

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

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

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

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

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

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

• 1. نقش CSS در صنعت مدیریت ناوگان
• 2. CSS چیست؟ آشنایی با Cascading Style Sheets
• 3. نحوه افزودن CSS به یک صفحه وب: Inline, Internal, External
• 4. آشنایی با ساختار یک قانون CSS: انتخابگر، خصوصیت، مقدار
• 5. انتخابگرهای اصلی: Element, Class, ID
• 6. کامنت‌گذاری در CSS برای مستندسازی
• 7. مفهوم Cascade، Specificity و Inheritance
• 8. کار با رنگ‌ها: Named, HEX, RGB, RGBA
• 9. واحد‌های اندازه‌گیری مطلق و نسبی: px, pt, em, rem
• 10. استایل‌دهی به متون: font-family و font-size
• 11. استایل‌دهی به متون: font-weight, font-style و text-decoration
• 12. استایل‌دهی به متون: text-align, line-height و letter-spacing
• 13. آشنایی با Box Model: Content, Padding, Border, Margin
• 14. تنظیم Padding برای ایجاد فضای داخلی
• 15. تنظیم Border: Style, Width, Color
• 16. تنظیم Margin برای ایجاد فضای خارجی
• 17. خصوصیت box-sizing: content-box در مقابل border-box
• 18. استایل‌دهی پس‌زمینه: background-color
• 19. استایل‌دهی پس‌زمینه: background-image
• 20. کنترل نمایش عناصر با خصوصیت display: block, inline, inline-block
• 21. واحدهای Viewport: vw, vh, vmin, vmax
• 22. موقعیت‌یابی عناصر: Position Static و Relative
• 23. موقعیت‌یابی عناصر: Position Absolute
• 24. موقعیت‌یابی عناصر: Position Fixed و Sticky
• 25. کنترل لایه‌ها با Z-Index
• 26. چیدمان با Float (مفهوم و کاربردهای تاریخی)
• 27. مشکل Float و تکنیک‌های Clearfix
• 28. مقدمه‌ای بر Flexbox: چرا برای داشبوردها حیاتی است؟
• 29. ایجاد یک Flex Container: display: flex
• 30. جهت‌دهی آیتم‌ها با flex-direction
• 31. تراز کردن آیتم‌ها در محور اصلی: justify-content
• 32. تراز کردن آیتم‌ها در محور متقاطع: align-items
• 33. مدیریت چند خطی بودن با flex-wrap
• 34. خصوصیات آیتم‌های Flex: flex-grow
• 35. خصوصیات آیتم‌های Flex: flex-shrink و flex-basis
• 36. کنترل ترتیب آیتم‌ها با order
• 37. مقدمه‌ای بر CSS Grid Layout
• 38. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 39. ایجاد فاصله بین آیتم‌ها با gap
• 40. قرار دادن آیتم‌ها در Grid: grid-column و grid-row
• 41. نام‌گذاری خطوط و نواحی در Grid
• 42. چیدمان با grid-template-areas
• 43. تراز کردن در Grid: justify-items و align-items
• 44. تفاوت‌ها و موارد استفاده Flexbox و Grid
• 45. ساختار کلی یک داشبورد مدیریت ناوگان با Grid و Flexbox
• 46. انتخابگرهای ترکیبی: Descendant, Child, Sibling
• 47. انتخابگرهای Attribute
• 48. شبه‌کلاس‌ها (Pseudo-classes): hover, focus, active
• 49. شبه‌کلاس‌های ساختاری: first-child, last-child, nth-child
• 50. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 51. استایل‌دهی به لیست‌ها: list-style-type, list-style-position
• 52. استایل‌دهی پایه‌ای به جداول: border, padding
• 53. استایل‌دهی پیشرفته جداول: nth-child برای ردیف‌های Zebra
• 54. استایل‌دهی به فرم‌ها: Input, Textarea, Button
• 55. استایل‌دهی به Checkbox و Radio Button
• 56. استایل‌دهی پس‌زمینه‌های پیشرفته: background-size, position, repeat
• 57. استفاده از گرادینت‌های خطی و شعاعی در پس‌زمینه
• 58. افزودن شفافیت با opacity و رنگ‌های RGBA/HSLA
• 59. گرد کردن گوشه‌ها با border-radius
• 60. ایجاد سایه برای جعبه‌ها با box-shadow
• 61. ایجاد سایه برای متون با text-shadow
• 62. دگرگونی‌های دو بعدی: transform (translate, rotate, scale)
• 63. انیمیشن‌های نرم با CSS Transitions
• 64. کنترل زمان‌بندی Transitions با transition-timing-function
• 65. ترکیب حالت‌ها: استفاده از Transition و Transform با :hover
• 66. متغیرهای CSS (Custom Properties) برای مدیریت تم‌ها
• 67. توابع CSS: calc() برای محاسبات دینامیک
• 68. توابع CSS: min(), max(), clamp() برای طراحی روان
• 69. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 70. رویکرد Mobile-First در طراحی داشبورد
• 71. کار با Media Queries برای Breakpoint‌های مختلف
• 72. ایجاد تصاویر واکنش‌گرا
• 73. نمایش و پنهان‌سازی عناصر در اندازه‌های مختلف صفحه
• 74. انیمیشن‌های پیچیده با @keyframes و animation
• 75. کنترل انیمیشن: animation-duration, delay, iteration-count
• 76. فیلترهای CSS: filter (blur, grayscale, brightness)
• 77. حالت‌های ترکیب (Blending Modes): mix-blend-mode
• 78. خصوصیت object-fit برای کنترل تصاویر
• 79. بهینه‌سازی عملکرد CSS: کاهش حجم فایل
• 80. بهینه‌سازی عملکرد: Critical CSS
• 81. معماری CSS: مقدمه‌ای بر BEM
• 82. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 83. متغیرها و Nesting در Sass/SCSS
• 84. Mixin و Extend در Sass/SCSS
• 85. دسترسی‌پذیری (Accessibility) در CSS: :focus-visible و prefers-reduced-motion
• 86. طراحی کامپوننت کارت خودرو (Vehicle Card) با Flexbox
• 87. استایل‌دهی جدول داده‌های ناوگان (Fleet Data Table)
• 88. طراحی نشانگرهای وضعیت آنلاین/آفلاین/در حال حرکت خودرو
• 89. استایل‌دهی Pop-up اطلاعات روی نقشه تعاملی
• 90. ساخت فرم‌های سفارشی برای گزارش‌های رانندگان
• 91. بصری‌سازی داده‌ها: طراحی Progress Bar برای سطح سوخت
• 92. بصری‌سازی داده‌ها: طراحی Gauge برای نمایش سرعت
• 93. استایل‌دهی اعلان‌های هشدار (Alert Notifications)
• 94. پیاده‌سازی تم تاریک و روشن (Dark/Light Mode) با متغیرهای CSS
• 95. واکنش‌گرا کردن داشبورد برای تبلت و موبایل
• 96. استایل‌دهی به نمودارها (Charts) برای گزارش‌های مصرف
• 97. ساخت استایل‌های مخصوص چاپ برای گزارش‌ها (@media print)
• 98. استفاده از فونت آیکون‌ها (Font Icons) برای نمایش وضعیت‌ها
• 99. انیمیشن نشانگر خودرو روی نقشه با CSS Transforms
• 100. پروژه نهایی: ساخت یک UI Kit کامل برای داشبورد مدیریت ناوگان