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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در ابزارهای مدیریت ناوگان
• 2. آشنایی با سینتکس CSS و قوانین پایه
• 3. روش‌های افزودن CSS به یک صفحه وب (Inline, Internal, External)
• 4. انتخابگرهای پایه CSS (Element, Class, ID)
• 5. کامنت‌گذاری در CSS و اهمیت آن
• 6. مفهوم Cascade، وراثت (Inheritance) و اولویت (Specificity)
• 7. آشنایی با ابزارهای توسعه‌دهنده مرورگر (DevTools) برای CSS
• 8. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 9. واحد اندازه‌گیری Box-sizing: content-box در مقابل border-box
• 10. رنگ‌ها در CSS: نام رنگ، HEX، RGB و RGBA
• 11. پس‌زمینه‌ها: رنگ، تصویر و گرادینت
• 12. تنظیمات پیشرفته پس‌زمینه: تکرار، موقعیت و اندازه
• 13. فونت‌ها و تایپوگرافی: font-family, font-size, font-weight
• 14. استایل‌دهی به متن: color, text-align, text-decoration
• 15. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن (link, visited, hover, active)
• 16. استایل‌دهی به لیست‌های مرتب و نامرتب
• 17. واحد‌های اندازه‌گیری مطلق و نسبی (px, pt, %, em, rem)
• 18. واحدهای اندازه‌گیری Viewport (vw, vh, vmin, vmax)
• 19. ویژگی Display: block, inline, inline-block
• 20. ویژگی Display: none و visibility: hidden
• 21. موقعیت‌یابی (Positioning): static و relative
• 22. موقعیت‌یابی (Positioning): absolute و fixed
• 23. موقعیت‌یابی (Positioning): sticky
• 24. کنترل لایه‌ها با Z-index و Stacking Context
• 25. مفهوم Float و Clear (برای লেఅవుట్‌های قدیمی و کاربردهای خاص)
• 26. کنترل سرریز محتوا با Overflow
• 27. مقدمه‌ای بر Flexbox برای چیدمان‌های مدرن
• 28. ویژگی‌های Flex Container: flex-direction, flex-wrap
• 29. ویژگی‌های Flex Container: justify-content
• 30. ویژگی‌های Flex Container: align-items, align-content
• 31. ویژگی‌های Flex Items: flex-grow, flex-shrink, flex-basis
• 32. ویژگی‌های Flex Items: order و align-self
• 33. کاربرد Flexbox در ساخت نوار ناوبری (Navbar)
• 34. کاربرد Flexbox در ساخت کارت‌های داشبورد (Dashboard Cards)
• 35. مقدمه‌ای بر CSS Grid برای چیدمان‌های دو بعدی
• 36. تعریف ستون‌ها و ردیف‌ها در گرید (grid-template-columns/rows)
• 37. فاصله‌گذاری بین عناصر گرید با gap
• 38. موقعیت‌دهی آیتم‌ها در گرید با شماره خطوط
• 39. استفاده از نام خطوط در گرید (Named Grid Lines)
• 40. تعریف نواحی در گرید با grid-template-areas
• 41. کاربرد گرید برای ساخت چیدمان اصلی داشبورد
• 42. استایل‌دهی به فرم‌ها: مقدمات و انتخابگرهای ورودی
• 43. استایل‌دهی به Input ها، Textarea و Placeholder
• 44. استایل‌دهی به دکمه‌ها (Buttons) و حالت‌های مختلف آن
• 45. سفارشی‌سازی Checkbox ها و Radio Button ها
• 46. استایل‌دهی به منوهای کشویی (Select Menus)
• 47. استایل‌دهی به حالت‌های اعتبارسنجی فرم (valid, invalid)
• 48. استایل‌دهی به جداول داده (Tables) برای نمایش لیست خودروها
• 49. استایل‌دهی راه‌راه (Zebra-striping) برای خوانایی بهتر جداول
• 50. ایجاد هدر ثابت (Sticky Header) برای جداول طولانی
• 51. استفاده از فونت‌های آیکون (مانند Font Awesome) برای نمایش وضعیت‌ها
• 52. استفاده از SVG به عنوان آیکون
• 53. ساخت شاخص‌های وضعیت (Status Indicators): آنلاین، آفلاین، در حرکت
• 54. استایل‌دهی به نوارهای پیشرفت (Progress Bars) برای نمایش مسافت یا سوخت
• 55. استایل‌دهی به تولتیپ‌ها (Tooltips) برای نمایش اطلاعات روی نقشه
• 56. استایل‌دهی به پنجره‌های مودال (Modals) برای هشدارها و جزئیات
• 57. طراحی واکنش‌گرا (Responsive Design) چیست و چرا اهمیت دارد؟
• 58. کار با متا تگ Viewport
• 59. مقدمه‌ای بر Media Queries
• 60. رویکرد Mobile-First در مقابل Desktop-First
• 61. ایجاد Breakpoint های رایج برای دستگاه‌های مختلف
• 62. تکنیک‌های واکنش‌گرا کردن تصاویر
• 63. تایپوگرافی واکنش‌گرا با واحدهای نسبی و clamp()
• 64. پنهان کردن عناصر در اندازه‌های مختلف صفحه
• 65. واکنش‌گرا کردن جداول داده
• 66. واکنش‌گرا کردن منوهای ناوبری (Navigation Menus)
• 67. انتخابگرهای پیشرفته: Attribute Selectors
• 68. انتخابگرهای پیشرفته: Pseudo-classes (first-child, nth-child, not)
• 69. انتخابگرهای پیشرفته: Pseudo-elements (::before, ::after)
• 70. افکت‌های گذار (Transitions) برای تعاملات نرم‌تر
• 71. تغییر شکل دو بعدی (2D Transforms): translate, rotate, scale
• 72. تغییر شکل سه بعدی (3D Transforms)
• 73. انیمیشن‌های سفارشی با @keyframes
• 74. کنترل انیمیشن: duration, timing-function, delay, iteration-count
• 75. متغیرهای CSS (Custom Properties) برای مدیریت تم‌ها
• 76. ساخت تم تاریک و روشن با استفاده از متغیرهای CSS
• 77. توابع CSS: calc() برای محاسبات دینامیک
• 78. توابع CSS: min(), max(), clamp() برای طراحی انعطاف‌پذیر
• 79. مقدمه‌ای بر پیش‌پردازنده‌ها (Preprocessors): آشنایی با Sass/SCSS
• 80. متغیرها و Nesting در Sass
• 81. استفاده از Mixin ها در Sass برای کدهای قابل استفاده مجدد
• 82. استفاده از توابع و عملگرها در Sass
• 83. سازماندهی فایل‌های CSS: معماری BEM
• 84. سازماندهی فایل‌های CSS: معماری SMACSS
• 85. بهینه‌سازی عملکرد CSS: کاهش حجم فایل (Minification)
• 86. تکنیک Critical CSS برای بارگذاری سریع‌تر
• 87. جلوگیری از Reflow و Repaint‌های پرهزینه
• 88. سازگاری بین مرورگرها و استفاده از Autoprefixer
• 89. مفاهیم دسترسی‌پذیری (Accessibility) در CSS
• 90. استفاده از :focus-visible برای بهبود تجربه کاربری کیبورد
• 91. احترام به تنظیمات کاربر با prefers-reduced-motion
• 92. سفارشی‌سازی نوار اسکرول (Scrollbar)
• 93. ویژگی aspect-ratio برای حفظ نسبت ابعاد
• 94. ویژگی‌های منطقی (Logical Properties) برای پشتیبانی از زبان‌های مختلف
• 95. مقدمه‌ای بر Container Queries
• 96. فیلترهای CSS و Blend Mode ها برای افکت‌های تصویری
• 97. پروژه عملی ۱: ساخت ساختار و چیدمان اصلی داشبورد
• 98. پروژه عملی ۲: استایل‌دهی به ویجت‌های کلیدی داشبورد (KPIs)
• 99. پروژه عملی ۳: استایل‌دهی به جدول لیست خودروها با قابلیت مرتب‌سازی
• 100. پروژه عملی ۴: ساخت صفحه ردیابی زنده با نقشه و لیست رویدادها