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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در ابزارهای مدیریت ناوگان
• 2. نحوه عملکرد CSS: اتصال به HTML
• 3. ساختار یک قانون CSS: انتخابگر، ویژگی، مقدار
• 4. روش‌های افزودن CSS: داخلی، خارجی و درون‌خطی
• 5. کامنت‌گذاری و بهترین شیوه‌های آن در CSS
• 6. آشنایی با ابزارهای توسعه‌دهنده مرورگر برای دیباگ CSS
• 7. انتخابگرهای پایه: نوع، کلاس و شناسه
• 8. وراثت و آبشار (Cascade) در CSS
• 9. مفهوم اولویت (Specificity) در انتخابگرها
• 10. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 11. ویژگی `box-sizing` و اهمیت `border-box`
• 12. واحدها در CSS: واحدهای مطلق (px) و نسبی (em, rem)
• 13. واحدهای Viewport: vw, vh, vmin, vmax
• 14. تنظیم ابعاد: `width`, `height`, `min-width`, `max-width`
• 15. مدیریت سرریز محتوا با ویژگی `overflow`
• 16. رنگ‌ها در CSS: کلمات کلیدی، HEX، RGB و HSL
• 17. ویژگی `opacity` و شفافیت در عناصر
• 18. استایل‌دهی به پس‌زمینه: `background-color` و `background-image`
• 19. کنترل تصاویر پس‌زمینه: `background-repeat`, `position`, `size`
• 20. استفاده از گرادیان‌های خطی و شعاعی در پس‌زمینه
• 21. استایل‌دهی به متون: `font-family`, `font-size`, `font-weight`
• 22. تنظیمات پیشرفته متن: `line-height`, `letter-spacing`, `text-align`
• 23. استفاده از فونت‌های وب (Web Fonts) و سرویس‌های آنلاین
• 24. استایل‌دهی به لیست‌ها و لینک‌ها
• 25. ویژگی `display`: `block`, `inline` و `inline-block`
• 26. انتخابگرهای ترکیبی (Combinators): فرزند، نسل، همسایه
• 27. انتخابگرهای ویژگی (Attribute Selectors)
• 28. شبه‌کلاس‌ها (Pseudo-classes): `hover`, `focus`, `active`
• 29. شبه‌کلاس‌های ساختاری: `first-child`, `last-child`, `nth-child`
• 30. شبه‌المان‌ها (Pseudo-elements): `::before` و `::after`
• 31. استایل‌دهی به فرم‌ها: استایل‌دهی به Inputها و Buttonها
• 32. استایل‌دهی به وضعیت‌های فرم: `checked`, `disabled`, `required`
• 33. موقعیت‌یابی (Positioning): `static`, `relative`, `absolute`
• 34. موقعیت‌یابی `fixed` و `sticky` برای هدرها و نقشه‌ها
• 35. مدیریت لایه‌ها با `z-index`
• 36. مقدمه‌ای بر Flexbox: چرا برای کامپوننت‌های UI ضروری است؟
• 37. مفاهیم Flex Container: `display: flex`, `flex-direction`
• 38. ترازبندی آیتم‌ها در محور اصلی با `justify-content`
• 39. ترازبندی آیتم‌ها در محور متقاطع با `align-items`
• 40. مدیریت چند خطی شدن با `flex-wrap` و `align-content`
• 41. اندازه‌بندی Flex Items: `flex-grow`, `flex-shrink`, `flex-basis`
• 42. کاربرد عملی Flexbox: ساخت نوار ناوبری و کارت‌های وضعیت خودرو
• 43. مقدمه‌ای بر Grid Layout: بهترین ابزار برای داشبوردها
• 44. تعریف Grid Container: `display: grid`, `grid-template-columns/rows`
• 45. استفاده از واحد `fr` برای ستون‌های انعطاف‌پذیر
• 46. ایجاد فاصله بین آیتم‌ها با `gap`
• 47. موقعیت‌دهی آیتم‌ها در گرید با شماره خطوط
• 48. نام‌گذاری خطوط و نواحی گرید با `grid-template-areas`
• 49. کاربرد عملی Grid: طراحی لایه‌بندی اصلی داشبورد مدیریت ناوگان
• 50. Flexbox در برابر Grid: چه زمانی از کدام استفاده کنیم؟
• 51. طراحی واکنش‌گرا (Responsive Design): مفاهیم پایه
• 52. رویکرد Mobile-First در طراحی واکنش‌گرا
• 53. استفاده از Media Queries برای ایجاد Breakpointها
• 54. طراحی جداول داده واکنش‌گرا برای نمایش اطلاعات ناوگان
• 55. تکنیک‌های رایج برای جداول واکنش‌گرا (اسکرول افقی، نمایش کارتی)
• 56. تصاویر واکنش‌گرا با `max-width` و تگ `<picture>`
• 57. تایپوگرافی واکنش‌گرا با توابع `clamp()` و `calc()`
• 58. مخفی کردن و نمایش عناصر در اندازه‌های مختلف صفحه
• 59. طراحی برای حالت‌های افقی و عمودی (Orientation)
• 60. استایل‌دهی برای چاپ گزارش‌ها با `@media print`
• 61. مقدمه‌ای بر Transitionها برای ایجاد انیمیشن‌های نرم
• 62. کنترل Transitionها: `transition-property`, `duration`, `timing-function`
• 63. مقدمه‌ای بر Animationها با `@keyframes`
• 64. کنترل انیمیشن‌ها: `animation-name`, `duration`, `iteration-count`
• 65. کاربرد انیمیشن: نمایش وضعیت آنلاین/آفلاین خودروها
• 66. ترنسفرم‌های دو بعدی: `translate`, `rotate`, `scale`, `skew`
• 67. ترنسفرم‌های سه بعدی و مفهوم `perspective`
• 68. ویژگی‌های سفارشی CSS (متغیرها) برای تم‌سازی
• 69. استفاده از متغیرهای CSS برای ساخت تم روشن و تاریک (Light/Dark Mode)
• 70. انتخابگر `:root` و تعریف متغیرهای گلوبال
• 71. استفاده از SVG برای آیکون‌های مقیاس‌پذیر (مانند آیکون خودروها)
• 72. استایل‌دهی و انیمیشن‌سازی SVG با CSS
• 73. فیلترهای CSS: `blur`, `brightness`, `grayscale`
• 74. حالت‌های ترکیبی (Blend Modes) در CSS
• 75. برش عناصر با `clip-path`
• 76. پوشش‌دهی عناصر با `mask-image`
• 77. کنترل نسبت ابعاد تصاویر با `object-fit` و `object-position`
• 78. ویژگی جدید `aspect-ratio`
• 79. بهینه‌سازی کارایی CSS: کاهش حجم فایل‌ها (Minification)
• 80. روش‌های سازماندهی فایل‌های CSS
• 81. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 82. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 83. متغیرها و تودرتویی (Nesting) در Sass
• 84. استفاده از Mixinها برای کدهای قابل استفاده مجدد در Sass
• 85. توابع و عملگرها در Sass
• 86. معماری CSS در پروژه‌های بزرگ مدیریت ناوگان
• 87. ادغام و استایل‌دهی کتابخانه‌های شخص ثالث (نقشه‌ها و نمودارها)
• 88. نکات پیشرفته: ویژگی `all` و ریست کردن استایل‌ها
• 89. تابع `attr()` برای دسترسی به مقادیر ویژگی‌های HTML
• 90. انتخابگرهای جدید: `is()`, `where()`, `has()`
• 91. ویژگی‌های منطقی (Logical Properties) برای پشتیبانی از زبان‌های مختلف
• 92. مفهوم Containment در CSS برای بهینه‌سازی رندر
• 93. Scroll Snap برای ایجاد اسکرول‌های کنترل‌شده
• 94. استایل‌دهی به Scrollbar
• 95. نکات دسترسی‌پذیری (Accessibility) در CSS
• 96. استایل‌دهی بر اساس ورودی کاربر: `prefers-reduced-motion`
• 97. پروژه نهایی: ساخت کامل یک داشبورد واکنش‌گرای مدیریت ناوگان
• 98. **طراحی واکنش‌گرا (Responsive Design) با CSS برای داشبوردهای مدیریت ناوگان:** شامل مفاهیم نمای دید (Viewport)، پرسش‌های رسانه‌ای (Media Queries) و طراحی منعطف.
• 99. **استفاده از Flexbox و Grid Layout برای ایجاد طرح‌بندی‌های پیچیده:** آموزش ایجاد رابط کاربری منعطف و قابل تنظیم برای جداول داده، نمودارها و سایر عناصر بصری.
• 100. **انیمیشن و Transition در CSS برای بهبود تجربه کاربری:** ایجاد انیمیشن‌های ظریف و انتقال‌های روان برای ارائه بازخورد بصری و بهبود تعامل کاربر با ابزارهای مدیریت ناوگان.

CSS for Fleet Management Tools: ابزارهایی بسازید که نه تنها کارآمد، بلکه زیبا باشند!