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

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

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

عنوان دوره: دوره CSS for Fleet Tracking

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. CSS چیست و چرا برای ردیابی ناوگان اهمیت دارد؟
• 3. روش‌های افزودن CSS به HTML: Inline, Internal, External
• 4. آشنایی با ساختار (Syntax) دستورات CSS
• 5. کامنت‌گذاری در CSS برای خوانایی کد
• 6. مفهوم انتخابگرها (Selectors)
• 7. انتخابگرهای پایه: Element, Class, ID
• 8. انتخابگرهای ترکیبی (Combinators)
• 9. انتخابگرهای ویژگی (Attribute Selectors)
• 10. اولویت‌بندی در CSS و مفهوم Specificity
• 11. استفاده از `!important` و خطرات آن
• 12. واحدها در CSS: پیکسل، درصد، em و rem
• 13. واحدهای Viewport: vw, vh, vmin, vmax
• 14. کار با رنگ‌ها: نام، HEX, RGB, HSL
• 15. پس‌زمینه: رنگ، تصویر و موقعیت
• 16. استایل‌دهی به متون: font-family, font-size, font-weight
• 17. ترازبندی و دکوراسیون متن
• 18. مدل جعبه‌ای (Box Model): Margin, Border, Padding, Content
• 19. ویژگی `box-sizing: border-box`
• 20. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن (link, visited, hover, active)
• 21. ویژگی `display`: block, inline, inline-block
• 22. پنهان کردن عناصر: `display: none` در مقابل `visibility: hidden`
• 23. موقعیت‌یابی (Positioning): static, relative, absolute
• 24. موقعیت‌یابی (Positioning): fixed و sticky
• 25. مفهوم Z-index و لایه‌بندی عناصر
• 26. چیدمان با Float (روش سنتی)
• 27. مشکل Clearfix و حل آن
• 28. مقدمه‌ای بر Flexbox برای ساخت داشبورد
• 29. کانتینر Flexbox و ویژگی‌های اصلی آن (flex-direction, justify-content)
• 30. توزیع عناصر در Flexbox با `align-items` و `align-content`
• 31. ویژگی‌های آیتم‌های Flexbox: `flex-grow`, `flex-shrink`, `flex-basis`
• 32. چیدمان نوارهای کناری (Sidebar) و اصلی با Flexbox
• 33. مقدمه‌ای بر CSS Grid Layout
• 34. تعریف ستون‌ها و ردیف‌ها در Grid
• 35. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 36. نام‌گذاری نواحی در Grid برای چیدمان داشبورد
• 37. هم‌ترازی و توزیع فضا در Grid
• 38. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده
• 39. ساختار اصلی صفحه ردیابی ناوگان با Grid
• 40. کنترل سرریز محتوا با `overflow`
• 41. استایل‌دهی به حاشیه‌ها (Borders): style, width, color
• 42. گرد کردن گوشه‌ها با `border-radius`
• 43. ایجاد سایه برای جعبه‌ها با `box-shadow`
• 44. ایجاد سایه برای متن با `text-shadow`
• 45. پس‌زمینه‌های گرادیان خطی (Linear Gradients)
• 46. پس‌زمینه‌های گرادیان شعاعی (Radial Gradients)
• 47. استفاده از چندین پس‌زمینه برای یک عنصر
• 48. استایل‌دهی به لیست‌ها (Lists)
• 49. استایل‌دهی به جداول: استایل‌دهی ردیف‌های زوج و فرد
• 50. مقدمه‌ای بر Transition ها برای انیمیشن‌های نرم
• 51. ویژگی `transition-property`, `transition-duration`
• 52. کنترل زمان‌بندی انیمیشن با `transition-timing-function`
• 53. افزودن تاخیر به Transition ها
• 54. مقدمه‌ای بر Animation ها و Keyframe ها
• 55. ساخت انیمیشن چشمک‌زن برای آیکون هشدار خودرو
• 56. کنترل تکرار و جهت انیمیشن
• 57. تبدیل‌های دو بعدی (2D Transforms): `translate`
• 58. تبدیل‌های دو بعدی: `rotate`, `scale`
• 59. ترکیب Transform ها
• 60. تنظیم نقطه مبدا تبدیل با `transform-origin`
• 61. مبانی طراحی واکنش‌گرا (Responsive Web Design)
• 62. استفاده از Media Queries برای اندازه‌های مختلف صفحه
• 63. رویکرد Mobile-First در طراحی واکنش‌گرا
• 64. نقاط شکست (Breakpoints) رایج برای دستگاه‌های مختلف
• 65. واکنش‌گرا کردن تصاویر و ویدئوها
• 66. واکنش‌گرا کردن تایپوگرافی با واحدهای نسبی
• 67. واکنش‌گرا کردن جداول داده ناوگان
• 68. انتخابگرهای شبه-کلاس (Pseudo-classes): `:hover`, `:active`, `:focus`
• 69. استایل‌دهی به فرم‌ها: input, textarea, button
• 70. استایل‌دهی به Checkbox و Radio Button ها
• 71. انتخابگرهای شبه-کلاس ساختاری: `:first-child`, `:last-child`, `:nth-child`
• 72. استایل‌دهی به ردیف‌های جدول بر اساس وضعیت (مثلاً خودروی متوقف)
• 73. انتخابگرهای شبه-عنصر (Pseudo-elements): `::before` و `::after`
• 74. ایجاد آیکون‌های ساده با `::before` و `::after`
• 75. تغییر شکل نشانگر ماوس (cursor) روی عناصر تعاملی
• 76. متغیرهای CSS (Custom Properties) برای تم‌بندی
• 77. ساخت تم روشن و تاریک (Light/Dark Mode) برای داشبورد
• 78. کاربرد تابع `calc()` برای محاسبات داینامیک
• 79. توابع `min()`, `max()`, و `clamp()` برای اندازه‌های انعطاف‌پذیر
• 80. استفاده از فونت‌های سفارشی با `@font-face`
• 81. بهینه‌سازی بارگذاری فونت‌ها
• 82. فیلترهای CSS: `blur`, `brightness`, `grayscale`
• 83. ترکیب حالت‌ها با `mix-blend-mode`
• 84. مفهوم BEM (Block, Element, Modifier) برای نام‌گذاری کلاس‌ها
• 85. سازماندهی فایل‌های CSS برای پروژه‌های بزرگ
• 86. مقدمه‌ای کوتاه بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 87. مفهوم Nesting در SASS
• 88. متغیرها و Mixin ها در SASS
• 89. بهینه‌سازی عملکرد CSS: کاهش پیچیدگی انتخابگرها
• 90. تکنیک‌های Lazy Loading برای تصاویر پس‌زمینه
• 91. استایل‌دهی به نقشه (Map Container)
• 92. طراحی نشانگرهای خودرو (Vehicle Markers) روی نقشه
• 93. استایل‌دهی به نشانگرها بر اساس وضعیت (در حال حرکت، متوقف، آفلاین)
• 94. طراحی پنجره‌های اطلاعاتی (InfoWindows) روی نقشه
• 95. استایل‌دهی به داشبورد اصلی: کارت‌ها و ویجت‌ها
• 96. طراحی جداول داده پیشرفته برای نمایش لیست خودروها
• 97. استایل‌دهی به نمودارها و گراف‌ها (مثلاً سرعت یا مصرف سوخت)
• 98. طراحی فرم‌های گزارش‌گیری و فیلتر
• 99. دیباگ کردن CSS با استفاده از ابزارهای مرورگر (Developer Tools)
• 100. جمع‌بندی و ساخت پروژه نهایی: داشبورد کامل ردیابی ناوگان