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

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

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

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر CSS و نقش آن در پلتفرم‌های مدیریت ناوگان
• 2. CSS چیست و چرا برای رابط‌های کاربری (UI) حیاتی است؟
• 3. نحوه اتصال CSS به HTML: داخلی، خارجی و درون‌خطی
• 4. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Browser DevTools) برای CSS
• 5. ساختار و سینتکس CSS: انتخابگرها، خصوصیات و مقادیر
• 6. انتخابگرهای پایه‌ای: نوع، کلاس و شناسه (ID)
• 7. کامنت‌گذاری و بهترین شیوه‌ها در کدنویسی CSS
• 8. مفهوم Box Model: محتوا، Padding، Border و Margin
• 9. واحدها در CSS: پیکسل، درصد، em و rem
• 10. کار با رنگ‌ها: مقادیر Hex، RGB و HSL
• 11. اعمال رنگ پس‌زمینه و تصاویر پس‌زمینه
• 12. استایل‌دهی به متون: Font Family، Size و Weight
• 13. تنظیمات پیشرفته متن: Line Height، Letter Spacing و Text Align
• 14. انتخابگرهای ترکیبی (Combinators): Descendant، Child، Sibling
• 15. مفهوم وراثت (Inheritance) و مقدار initial
• 16. اولویت و آبشاری بودن در CSS (Specificity & The Cascade)
• 17. استفاده از خصوصیت !important و خطرات آن
• 18. مدل‌های طرح‌بندی: Block، Inline و Inline-block
• 19. خصوصیت Display و کنترل نمایش عناصر
• 20. کار با خصوصیت Position: Static، Relative، Absolute و Fixed
• 21. مفهوم Stacking Context و خصوصیت z-index
• 22. استایل‌دهی به لیست‌ها: نشانگرها و شماره‌گذاری سفارشی
• 23. استایل‌دهی به لینک‌ها و حالت‌های آن: link، visited، hover، active
• 24. مقدمه‌ای بر طرح‌بندی Flexbox برای داشبوردها
• 25. خصوصیات Flex Container بخش اول: flex-direction و flex-wrap
• 26. خصوصیات Flex Container بخش دوم: justify-content و align-items
• 27. خصوصیات Flex Items: flex-grow، flex-shrink و flex-basis
• 28. ایجاد نوار ناوبری (Navbar) اصلی پلتفرم با Flexbox
• 29. طرح‌بندی فرم‌ها: ساختاردهی فرم ورود و ثبت خودرو
• 30. استایل‌دهی به فیلدهای ورودی (Inputs) و Textarea
• 31. استایل‌دهی به دکمه‌ها و حالت‌های مختلف آن‌ها
• 32. استایل‌دهی به Checkbox و Radio Button سفارشی
• 33. مقدمه‌ای بر طرح‌بندی Grid برای ساختار داشبورد
• 34. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 35. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 36. نام‌گذاری خطوط و نواحی در Grid Layout
• 37. ایجاد ساختار اصلی داشبورد مدیریت ناوگان با CSS Grid
• 38. ترکیب Flexbox و Grid برای کامپوننت‌های پیچیده
• 39. مبانی طراحی واکنش‌گرا (Responsive Design)
• 40. کار با Viewport Meta Tag
• 41. استفاده از Media Queries برای اندازه‌های مختلف صفحه
• 42. رویکرد Mobile-First در طراحی واکنش‌گرا
• 43. ساخت جداول واکنش‌گرا برای نمایش لیست خودروها
• 44. استایل‌دهی به جداول: هدر، سطرها و سلول‌ها
• 45. افکت Hover بر روی سطرهای جدول برای خوانایی بهتر
• 46. ایجاد ستون‌های ثابت (Sticky) در جداول بزرگ
• 47. استفاده از آیکن‌ها: فونت‌های آیکن (Font Awesome) و SVG
• 48. استایل‌دهی به آیکن‌های وضعیت خودرو (در حال حرکت، متوقف، آفلاین)
• 49. طراحی کارت‌های اطلاعاتی (Cards) برای نمایش خلاصه وضعیت هر خودرو
• 50. استایل‌دهی به نشانگرها و برچسب‌ها (Badges & Tags)
• 51. ایجاد Tooltip برای نمایش اطلاعات بیشتر روی نقشه
• 52. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 53. ساخت تم روشن و تاریک (Light/Dark Mode) برای داشبورد
• 54. استفاده از تابع ()calc برای محاسبات پویا
• 55. استایل‌دهی به نوارهای پیشرفت (Progress Bars) برای سرویس‌های دوره‌ای
• 56. مفهوم شبه‌کلاس‌ها (Pseudo-classes): nth-child، first-child، last-child
• 57. کاربرد شبه‌کلاس‌ها برای استایل‌دهی سطرهای زوج و فرد جدول
• 58. مفهوم شبه‌عناصر (Pseudo-elements)::before و ::after
• 59. ایجاد عناصر تزئینی و آیکن‌ها با شبه‌عناصر
• 60. انتقال‌ها (Transitions) برای تعاملات نرم‌تر
• 61. انیمیشن‌های پایه‌ای با @keyframes
• 62. ایجاد انیمیشن Loading Spinner برای بارگذاری داده‌ها
• 63. کنترل دقیق انیمیشن: duration، timing-function و delay
• 64. استفاده از Transform: scale، rotate، translate و skew
• 65. ایجاد افکت‌های سه‌بعدی (3D) ساده با Transform
• 66. خصوصیت Filter برای افکت‌های تصویری (blur، grayscale)
• 67. حالت‌های ترکیب (Blend Modes) برای لایه‌های خلاقانه
• 68. مفهوم انتخابگرهای ویژگی (Attribute Selectors)
• 69. کاربرد انتخابگرهای ویژگی در استایل‌دهی فرم‌ها
• 70. واحدهای وابسته به Viewport: vw، vh، vmin و vmax
• 71. تایپوگرافی واکنش‌گرا با توابع ()clamp و واحدهای Viewport
• 72. تکنیک‌های پیشرفته پس‌زمینه: گرادینت‌ها و چند پس‌زمینه
• 73. استایل‌دهی به عناصر Scrollbar
• 74. مقدمه‌ای بر معماری CSS: BEM (Block, Element, Modifier)
• 75. سازماندهی فایل‌های CSS برای پروژه‌های بزرگ
• 76. مقدمه‌ای بر پیش‌پردازنده‌های CSS: Sass/SCSS
• 77. استفاده از متغیرها و تودرتویی (Nesting) در Sass
• 78. میکسین‌ها (Mixins) در Sass برای کدهای قابل استفاده مجدد
• 79. توابع و دستورات کنترلی در Sass
• 80. استایل‌دهی به عناصر نقشه (Map Elements): نشانگرها (Markers)
• 81. استایل‌دهی به پنجره‌های اطلاعاتی (Popups) روی نقشه
• 82. ترسیم و استایل‌دهی مسیرها (Routes) و ژئوفنس‌ها (Geofences)
• 83. مقدمه‌ای بر استایل‌دهی نمودارها (Charts) با CSS
• 84. استایل‌دهی به نمودارهای میله‌ای و خطی مبتنی بر SVG
• 85. بهینه‌سازی عملکرد CSS: کاهش Reflow و Repaint
• 86. تکنیک‌های بارگذاری بهینه CSS: Critical CSS
• 87. فشرده‌سازی و کوچک‌سازی (Minification) فایل‌های CSS
• 88. مباحث دسترسی‌پذیری (Accessibility): استایل‌دهی حالت Focus
• 89. استفاده از خصوصیت prefers-reduced-motion برای کاربران حساس
• 90. اطمینان از کنتراست رنگ کافی برای خوانایی
• 91. مفاهیم مدرن CSS: خصوصیات منطقی (Logical Properties)
• 92. کار با خصوصیت aspect-ratio برای حفظ نسبت ابعاد
• 93. استایل‌دهی به Modal و Dialog boxes
• 94. ساخت منوهای Dropdown سفارشی با CSS
• 95. مقدمه‌ای بر چارچوب‌های CSS مانند Bootstrap یا Tailwind (مفهومی)
• 96. چاپ صفحات: ایجاد استایل‌های مخصوص چاپ گزارش‌ها
• 97. ایجاد یک صفحه گزارش کامل با استایل مناسب چاپ
• 98. عیب‌یابی (Debugging) مشکلات رایج CSS
• 99. پروژه نهایی: طراحی کامل صفحه داشبورد اصلی
• 100. پروژه نهایی: واکنش‌گرا کردن صفحه جزئیات خودرو