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

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

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

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

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

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

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

• 1. نقش CSS در رابط کاربری مدیریت ناوگان
• 2. روش‌های افزودن CSS به پروژه: Inline, Internal, External
• 3. آشنایی با سینتکس اصلی CSS: انتخابگر، خصوصیت، مقدار
• 4. درک انتخابگرهای پایه: Element, Class, ID
• 5. کامنت‌گذاری در CSS برای خوانایی کد
• 6. گروه‌بندی انتخابگرها برای استایل‌دهی مشترک
• 7. انتخابگرهای ترکیبی: Descendant, Child, Sibling
• 8. انتخابگرهای Attribute برای استایل‌دهی بر اساس 속성‌ها
• 9. مفهوم Cascade، Specificity و Inheritance
• 10. آشنایی با مدل جعبه‌ای (Box Model): Margin, Border, Padding, Content
• 11. کار با رنگ‌ها: Hex, RGB, RGBA, HSL
• 12. واحدهای اندازه‌گیری در CSS: Px, Em, Rem, %, Vw, Vh
• 13. معرفی ابزارهای توسعه‌دهنده مرورگر (Developer Tools)
• 14. ایجاد اولین ساختار پروژه: لینک کردن فایل CSS به HTML
• 15. بازنشانی و نرمال‌سازی CSS (Reset vs. Normalize)
• 16. خصوصیات اصلی فونت: font-family, font-size, font-weight
• 17. استفاده از فونت‌های وب (Google Fonts و @font-face)
• 18. ترازبندی و دکوراسیون متن (Text Alignment & Decoration)
• 19. تنظیم فاصله بین حروف، کلمات و خطوط
• 20. تغییر شکل و سایه‌زنی متن (Text Transform & Shadow)
• 21. استایل‌دهی به لیست‌ها برای نمایش وضعیت خودروها
• 22. استایل‌دهی به لینک‌ها و منوهای ناوبری
• 23. متغیرهای CSS (Custom Properties) برای مدیریت تایپوگرافی
• 24. طراحی تایپوگرافی واکنش‌گرا (Responsive Typography)
• 25. اعمال تایپوگرافی در اجزای داشبورد: عناوین، داده‌ها و برچسب‌ها
• 26. خصوصیت display: Block, Inline, Inline-block
• 27. درک جریان عادی سند (Normal Document Flow)
• 28. خصوصیت Position: Static, Relative, Absolute, Fixed
• 29. استفاده از Position: Sticky برای هدرهای چسبان
• 30. مدیریت لایه‌ها با Z-index (برای پاپ‌آپ‌های نقشه)
• 31. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 32. خصوصیات Flex Container بخش اول: flex-direction, justify-content
• 33. خصوصیات Flex Container بخش دوم: align-items, flex-wrap, align-content
• 34. خصوصیات Flex Items: flex-grow, flex-shrink, flex-basis
• 35. کنترل ترتیب عناصر با خصوصیت order
• 36. ساخت هدر و فوتر داشبورد با Flexbox
• 37. طراحی نوار کناری (Sidebar) با Flexbox
• 38. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 39. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 40. استفاده از واحدهای fr و تابع ()repeat در Grid
• 41. ایجاد گپ بین سلول‌های گرید (Grid Gap)
• 42. چیدمان آیتم‌ها در گرید با خطوط (Grid Lines)
• 43. چیدمان مبتنی بر نام ناحیه‌ها (grid-template-areas)
• 44. ترکیب Flexbox و Grid برای ساختارهای پیچیده
• 45. کنترل سرریز محتوا با خصوصیت overflow
• 46. استایل‌دهی به فرم‌های ورود و جستجو
• 47. استایل‌دهی به دکمه‌ها و فراخوان به اقدام (Call to Action)
• 48. استایل‌دهی پیشرفته به فیلدهای ورودی: Checkbox و Radio Button
• 49. ساخت و استایل‌دهی به منوهای کشویی (Dropdown) سفارشی
• 50. استایل‌دهی به جداول داده‌های خودرو
• 51. ایجاد جداول راه‌راه (Zebra-Striped Tables) برای خوانایی بهتر
• 52. واکنش‌گرا کردن جداول داده
• 53. طراحی کارت‌ها (Cards) برای نمایش خلاصه وضعیت هر خودرو
• 54. ساخت و استایل‌دهی به پنجره‌های مودال (Modal) برای نمایش جزئیات
• 55. ایجاد Tooltip برای آیکون‌ها و نشانگرهای نقشه
• 56. استایل‌دهی به شاخص‌های وضعیت: آنلاین، آفلاین، در حال تعمیر
• 57. طراحی نوارهای پیشرفت (Progress Bars) برای سطح سوخت و سرویس دوره‌ای
• 58. استایل‌دهی به آیکون‌های SVG (نوع خودرو، هشدارها)
• 59. استایل‌دهی به کانتینر نقشه (Leaflet/Mapbox)
• 60. سفارشی‌سازی پنجره‌های اطلاعاتی (Popups) روی نقشه
• 61. ساخت نمودارهای میله‌ای ساده با CSS برای نمایش داده‌ها
• 62. استایل‌دهی به ویجت‌های داشبورد (Dashboard Widgets)
• 63. طراحی سیستم اعلانات و هشدارها (Notifications & Alerts)
• 64. ساخت تب‌های محتوا برای تفکیک اطلاعات
• 65. طراحی صفحه ورود (Login Page)
• 66. استایل‌دهی صفحه پروفایل کاربری و تنظیمات
• 67. استایل‌دهی فید فعالیت‌های زنده (Live Activity Feed)
• 68. ایجاد انیمیشن‌های بارگذاری (Loading Spinners)
• 69. استایل‌دهی نسخه‌های قابل چاپ گزارشات (Print Stylesheets)
• 70. طراحی کامپوننت انتخابگر تاریخ (Date Picker)
• 71. کار با پس‌زمینه‌ها: background-image, position, size, repeat
• 72. استفاده از چندین تصویر پس‌زمینه
• 73. ایجاد پس‌زمینه‌های گرادیان (Linear & Radial Gradients)
• 74. خصوصیات پیشرفته Border و ایجاد گوشه‌های گرد (border-radius)
• 75. ایجاد عمق با سایه‌های جعبه و متن (Box Shadow & Text Shadow)
• 76. شفافیت با خصوصیت opacity و تفاوت آن با RGBA
• 77. مقدمه‌ای بر ترنزیشن‌ها (Transitions) برای تغییرات نرم
• 78. کنترل دقیق ترنزیشن‌ها: duration, timing-function, delay
• 79. تغییر شکل عناصر با Transform: translate, rotate, scale
• 80. ترکیب Transforms و Transitions برای افکت‌های تعاملی
• 81. مقدمه‌ای بر انیمیشن‌ها با keyframes@
• 82. کنترل کامل انیمیشن‌ها: duration, iteration-count, direction
• 83. اعمال فیلترهای بصری: blur, brightness, grayscale
• 84. برش عناصر به اشکال سفارشی با clip-path
• 85. کنترل نحوه نمایش تصاویر با object-fit و object-position
• 86. مفاهیم طراحی واکنش‌گرا و رویکرد Mobile-First
• 87. استفاده از Media Queries برای تعریف Breakpointها
• 88. طراحی واکنش‌گرا با min-width در مقابل max-width
• 89. مدیریت تصاویر واکنش‌گرا با تگ <picture> و srcset
• 90. ساخت منوی همبرگری برای ناوبری در موبایل
• 91. تطبیق چیدمان گرید داشبورد با اندازه‌های مختلف صفحه
• 92. تم‌بندی (Theming) با متغیرهای CSS: حالت تاریک و روشن
• 93. محاسبات پویا با تابع ()calc
• 94. انتخابگر قدرتمند has:() برای انتخاب والد
• 95. توابع رنگی مدرن: lch, oklch
• 96. تایپوگرافی و فواصل سیال با clamp()
• 97. حفظ نسبت ابعاد عناصر با خصوصیت aspect-ratio
• 98. خصوصیات منطقی (Logical Properties) برای پشتیبانی از زبان‌های مختلف
• 99. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 100. پروژه نهایی: ساخت یک صفحه داشبورد مدیریت ناوگان کامل و واکنش‌گرا