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

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

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

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

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

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

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

• 1. مقدمه‌ای بر دوره و نقش CSS در چالش‌های مدیریت ناوگان
• 2. CSS چیست و چرا برای ساخت داشبوردها حیاتی است؟
• 3. روش‌های افزودن CSS به HTML: Inline, Internal, External
• 4. قواعد و سینتکس پایه CSS: سلکتور، پراپرتی و مقدار
• 5. آشنایی با کامنت‌گذاری در کد CSS
• 6. سلکتورهای پایه: تگ، کلاس و شناسه (ID)
• 7. سلکتورهای ترکیبی: Descendant, Child, Adjacent Sibling
• 8. سلکتورهای ویژگی (Attribute Selectors)
• 9. مفهوم وراثت (Inheritance) و نحوه عملکرد آن
• 10. اولویت در CSS: آبشار (Cascade) و اهمیت (Specificity)
• 11. کلمه کلیدی `!important` و موارد استفاده صحیح
• 12. آشنایی با ابزارهای توسعه‌دهنده مرورگر (DevTools) برای دیباگ CSS
• 13. مدل جعبه‌ای (Box Model): Content و Padding
• 14. مدل جعبه‌ای: Border و Margin
• 15. ویژگی `box-sizing: border-box` و کاربرد آن در طراحی دقیق
• 16. کار با رنگ‌ها: نام، هگزادسیمال، RGB و RGBA
• 17. استایل‌دهی وضعیت‌ها در ناوگان با رنگ: فعال، غیرفعال، هشدار
• 18. کار با پس‌زمینه: `background-color` و `background-image`
• 19. ویژگی‌های پیشرفته پس‌زمینه: `background-repeat`, `position`, `size`
• 20. استفاده از گرادیان‌ها برای زیباسازی داشبورد
• 21. واحدها در CSS: واحدهای مطلق (px, pt)
• 22. واحدها در CSS: واحدهای نسبی (em, rem, %)
• 23. واحدهای Viewport (`vw`, `vh`) برای طرح‌بندی‌های تمام‌صفحه
• 24. تایپوگرافی: `font-family` و استفاده از فونت‌های وب
• 25. تایپوگرافی: `font-size`, `font-weight`, `font-style`
• 26. ویژگی‌های متن: `text-align`, `text-decoration`, `line-height`
• 27. استایل‌دهی لیست‌ها (List Styling)
• 28. مقدمات استایل‌دهی جداول برای نمایش داده‌های ناوگان
• 29. استایل‌دهی پیشرفته جداول: Zebra Stripes و Hover Effects
• 30. ویژگی `border` و انواع خطوط
• 31. گوشه‌های گرد با `border-radius`
• 32. ایجاد سایه برای کارت‌ها و ویجت‌ها با `box-shadow`
• 33. ایجاد سایه برای متن با `text-shadow`
• 34. مفهوم `display`: `block`, `inline` و `inline-block`
• 35. مخفی کردن عناصر: `display: none` در مقابل `visibility: hidden`
• 36. کنترل سرریز محتوا با ویژگی `overflow`
• 37. موقعیت‌دهی (Positioning): `static` و `relative`
• 38. موقعیت‌دهی: `absolute` و `fixed`
• 39. موقعیت‌دهی: `sticky` برای هدر جداول و منوها
• 40. کنترل لایه‌ها با Z-index
• 41. استفاده از `float` و `clear` (مفاهیم قدیمی اما کاربردی)
• 42. مقدمه‌ای بر Flexbox: کانتینر و آیتم‌ها
• 43. ویژگی `display: flex` و `flex-direction`
• 44. تراز بندی در محور اصلی با `justify-content`
• 45. تراز بندی در محور متقاطع با `align-items`
• 46. ویژگی `flex-wrap` برای مدیریت آیتم‌های چند خطی
• 47. کنترل رشد و کوچک شدن آیتم‌ها: `flex-grow`, `flex-shrink`, `flex-basis`
• 48. تراز بندی آیتم‌های تکی با `align-self`
• 49. ساخت یک هدر واکنش‌گرا با Flexbox برای اپلیکیشن
• 50. مقدمه‌ای بر CSS Grid Layout
• 51. تعریف ستون‌ها و ردیف‌ها با `grid-template-columns` و `grid-template-rows`
• 52. قرار دادن آیتم‌ها در گرید: `grid-column` و `grid-row`
• 53. فاصله‌گذاری بین آیتم‌ها با `gap`
• 54. نام‌گذاری نواحی گرید با `grid-template-areas`
• 55. ساخت طرح‌بندی داشبورد مدیریت ناوگان با CSS Grid
• 56. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 57. استفاده از Viewport Meta Tag
• 58. آشنایی با Media Queries و کاربرد آن‌ها
• 59. استراتژی Mobile-First در طراحی واکنش‌گرا
• 60. نقاط شکست (Breakpoints) رایج برای دستگاه‌های مختلف
• 61. واکنش‌گرا کردن تصاویر و مدیا
• 62. واکنش‌گرا کردن جداول داده برای نمایش در موبایل
• 63. واکنش‌گرا کردن تایپوگرافی با تابع `clamp()`
• 64. سلکتورهای شبه-کلاس (Pseudo-classes): `hover`, `focus`, `active`
• 65. استایل‌دهی به فرم‌ها: Input, Textarea, Select
• 66. استایل‌دهی به دکمه‌ها و ایجاد حالت‌های مختلف برای آن‌ها
• 67. استایل‌دهی پیشرفته فرم‌ها برای ورود داده‌های ناوگان
• 68. سلکتورهای شبه-المان (Pseudo-elements): `::before` و `::after`
• 69. ایجاد نشانگرهای وضعیت (Status Indicators) با `::before`
• 70. مقدمه‌ای بر Transitions برای ایجاد انیمیشن‌های نرم
• 71. کنترل زمان‌بندی و تاخیر در Transitions
• 72. مقدمه‌ای بر Animations و `keyframes@`
• 73. انیمیشن‌های بارگذاری (Loading Spinners) برای نمایش انتظار داده
• 74. توابع در CSS: `calc()`, `var()`, `min()`, `max()`
• 75. متغیرهای سفارشی CSS (Custom Properties) و قدرت آن‌ها
• 76. ایجاد سیستم تم (Theming) با متغیرهای CSS (حالت تاریک/روشن)
• 77. فیلترهای CSS: `filter` برای افکت‌های تصویری
• 78. تبدیل‌های دو بعدی: `transform` با `translate`, `rotate`, `scale`
• 79. تبدیل‌های سه بعدی: `transform` و `perspective`
• 80. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 81. معماری CSS: روش BEM (Block, Element, Modifier)
• 82. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 83. متغیرها و Nesting در SASS
• 84. مفهوم Mixins و Extends در SASS
• 85. استفاده از توابع و حلقه‌ها در SASS
• 86. مفهوم `reset.css` و `normalize.css`
• 87. بهینه‌سازی کارایی CSS برای بارگذاری سریع‌تر داشبورد
• 88. کاهش حجم فایل‌های CSS (Minification)
• 89. بارگذاری غیرهمزمان (Asynchronous) CSS
• 90. پشتیبانی مرورگرها و استفاده از `caniuse.com` و Autoprefixer
• 91. استایل‌دهی ویجت‌های داشبورد: کارت‌های KPI
• 92. طراحی نمودارهای میله‌ای (Bar Charts) ساده با CSS
• 93. طراحی نمودارهای دایره‌ای (Pie Charts) برای نمایش آمار
• 94. استایل‌دهی عناصر نقشه: نشانگرها (Markers) و پاپ‌آپ‌ها
• 95. طراحی محدوده جغرافیایی (Geofence) روی نقشه با CSS
• 96. طراحی تایم‌لاین (Timeline) برای نمایش تاریخچه سفر خودرو
• 97. ایجاد نشانگرهای وضعیت آنلاین/آفلاین خودرو با انیمیشن
• 98. استایل‌دهی اعلان‌ها (Notifications) و هشدارهای سیستم
• 99. طراحی یک نوار جستجو و فیلتر پیشرفته
• 100. ساخت منوی ناوبری کناری (Sidebar Navigation) برای داشبورد