فلش‌کارت‌های آموزشی CSS for Fleet Management Companies

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در مدیریت ناوگان
• 2. CSS چیست و چرا برای داشبوردها اهمیت دارد؟
• 3. روش‌های افزودن CSS: درون‌خطی، داخلی و خارجی
• 4. سینتکس CSS: قوانین، انتخابگرها و اعلان‌ها
• 5. انتخابگرهای اصلی: نوع، کلاس و شناسه
• 6. استایل‌دهی به متن: `color` و `font-family`
• 7. قالب‌بندی متن: `font-size`, `font-weight`, `font-style`
• 8. آشنایی با مدل جعبه‌ای (Box Model): محتوا، پدینگ، حاشیه، بوردر
• 9. تنظیم ابعاد عناصر: `width` و `height`
• 10. کار با رنگ‌ها: Hex, RGB, HSL
• 11. استایل‌دهی پس‌زمینه: `background-color` و `background-image`
• 12. مفهوم آبشار (Cascade) و وراثت (Inheritance)
• 13. درک اولویت‌بندی (Specificity)
• 14. استفاده از ابزارهای توسعه‌دهنده برای بررسی CSS
• 15. استایل‌دهی به لینک‌ها و حالت‌های آن‌ها
• 16. استایل‌دهی اولیه به لیست‌ها برای گزارشات خودرو
• 17. ویژگی `display`: تفاوت `block` و `inline`
• 18. ترکیب انتخابگرها: انتخابگرهای نسل و فرزند
• 19. گروه‌بندی انتخابگرها
• 20. افزودن کامنت به کدهای CSS
• 21. نگاهی عمیق‌تر به مدل جعبه‌ای: `box-sizing`
• 22. کنترل سرریز محتوا با `overflow`
• 23. موقعیت‌دهی: `static` و `relative`
• 24. موقعیت‌دهی: `absolute` و بلوک دربرگیرنده آن
• 25. موقعیت‌دهی: `fixed` برای عناصر ثابت UI
• 26. ویژگی `z-index` برای لایه‌بندی عناصر
• 27. مقدمه‌ای بر Flexbox برای چیدمان UI
• 28. Flexbox: محور اصلی و متقاطع با `flex-direction`
• 29. Flexbox: ترازبندی در محور اصلی با `justify-content`
• 30. Flexbox: ترازبندی در محور متقاطع با `align-items`
• 31. Flexbox: کنترل اندازه با `flex-grow`, `flex-shrink`, `flex-basis`
• 32. ساخت هدر داشبورد با Flexbox
• 33. مقدمه‌ای بر CSS Grid Layout
• 34. تعریف گرید: `grid-template-columns` و `grid-template-rows`
• 35. قرار دادن آیتم‌ها در گرید
• 36. گسترش آیتم‌ها در طول چندین ترک گرید
• 37. نام‌گذاری خطوط و نواحی گرید
• 38. ویژگی `gap` در گرید و فلکس‌باکس
• 39. ایجاد چیدمان اصلی داشبورد با CSS Grid
• 40. Flexbox در مقابل Grid: چه زمانی از کدام استفاده کنیم؟
• 41. شبه‌کلاس‌های تعاملی: `:hover`, `:focus`, `:active`
• 42. شبه‌کلاس‌های ساختاری: `:first-child`, `:last-child`, `:nth-child`
• 43. استایل‌دهی با انتخابگرهای صفت (Attribute Selectors)
• 44. تولید محتوا با شبه‌عناصر `:before` و `:after`
• 45. موقعیت‌دهی: `sticky` برای هدر جداول
• 46. استایل‌دهی به فرم‌ها برای ورود داده (خودروها، رانندگان)
• 47. استایل‌دهی به ورودی‌های متنی و `textarea`
• 48. استایل‌دهی به دکمه‌ها و فراخوان‌ها (Call-to-Actions)
• 49. سفارشی‌سازی Checkbox و Radio Button
• 50. استایل‌دهی به منوهای کشویی `select` برای وضعیت خودرو
• 51. حالت‌های اعتبارسنجی فرم: `:valid` و `:invalid`
• 52. ساخت یک سیستم دکمه سازگار
• 53. استایل‌دهی جداول داده برای نمای کلی ناوگان
• 54. خوانا کردن جداول: ردیف‌های شطرنجی
• 55. استایل‌دهی به سربرگ و پاورقی جداول
• 56. ایجاد نشانگرهای ستون قابل مرتب‌سازی در جدول
• 57. استایل‌دهی به پاپ‌آپ‌ها و تولتیپ‌های نقشه تعاملی
• 58. سفارشی‌سازی آیکون‌های مارکر نقشه با CSS
• 59. استایل‌دهی به محدوده‌های جغرافیایی (Geofence) روی نقشه
• 60. ساخت کارت‌های KPI برای داشبورد
• 61. ایجاد نشانگرهای وضعیت: آنلاین، آفلاین، در حال تعمیر
• 62. استایل‌دهی به نوارهای پیشرفت برای تکمیل سفر
• 63. سفارشی‌سازی عناصر نمودارها (Chart.js یا D3.js) با CSS
• 64. ساخت منوی ناوبری کناری (Sidebar)
• 65. استایل‌دهی به پنجره‌های مودال و دیالوگ
• 66. ایجاد تولتیپ‌های سفارشی از پایه
• 67. استایل‌دهی به مسیر راهنما (Breadcrumbs)
• 68. طراحی بنرهای اعلان و هشدار
• 69. استایل‌دهی به آواتار کاربر و آیکون‌های پروفایل
• 70. ایجاد کامپوننت نوار جستجو
• 71. مقدمه‌ای بر طراحی وب واکنش‌گرا (Responsive)
• 72. استفاده از Media Queries برای اندازه‌های مختلف صفحه
• 73. متا تگ Viewport
• 74. رویکرد اول-موبایل در مقابل اول-دسکتاپ
• 75. تصاویر واکنش‌گرا
• 76. تایپوگرافی واکنش‌گرا با واحدهای `rem` و `em`
• 77. چیدمان‌های سیال در مقابل چیدمان‌های ثابت
• 78. واکنش‌گرا کردن جداول داده
• 79. انطباق داشبورد برای صفحات موبایل
• 80. مقدمه‌ای بر CSS Transitions
• 81. کنترل زمان‌بندی و تأخیر Transition
• 82. مقدمه‌ای بر انیمیشن‌های CSS با `@keyframes`
• 83. ایجاد اسپینرهای بارگذاری برای دریافت داده
• 84. مقدمه‌ای بر CSS Transforms: `translate`, `rotate`, `scale`
• 85. ترکیب Transformها برای افکت‌های پیچیده
• 86. مقدمه‌ای بر متغیرهای CSS (Custom Properties)
• 87. استفاده از متغیرهای CSS برای تم‌سازی و برندینگ
• 88. تم‌سازی عملی: حالت روشن و حالت تاریک
• 89. تابع `calc()` در CSS برای اندازه‌گیری پویا
• 90. تکنیک‌های پیشرفته پس‌زمینه
• 91. سازماندهی فایل‌های CSS برای یک اپلیکیشن بزرگ
• 92. قراردادهای نام‌گذاری CSS: متدولوژی BEM
• 93. مقدمه‌ای بر پیش‌پردازنده‌های CSS: Sass/SCSS
• 94. استفاده از متغیرها و تودرتوسازی (Nesting) در Sass
• 95. استفاده از Mixinها در Sass برای استایل‌های قابل استفاده مجدد
• 96. عملکرد CSS: فشرده‌سازی و کوچک‌سازی فایل‌ها
• 97. نوشتن انتخابگرهای CSS کارآمد
• 98. سازگاری بین مرورگرها و پیشوندهای فروشنده (Vendor Prefixes)
• 99. ایجاد استایل‌های مناسب چاپ برای گزارش‌ها
• 100. پروژه نهایی: ساخت یک داشبورد کامل مدیریت ناوگان