کتاب صوتی CSS for Fleet Management Vendors

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

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

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

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

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

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

• 1. معرفی CSS و نقش آن در پلتفرم‌های مدیریت ناوگان
• 2. ابزارهای توسعه‌دهنده مرورگر: اولین قدم برای دیباگ کردن
• 3. نحوه افزودن CSS به HTML: Inline, Internal, External
• 4. آشنایی با سینتکس CSS: Rule-sets, Declarations, Properties, Values
• 5. کامنت‌گذاری در CSS: بهترین شیوه‌ها برای خوانایی کد
• 6. مفهوم Cascade و Inheritance (وراثت)
• 7. اولویت‌بندی در CSS: Specificity و !important
• 8. واحدهای اندازه‌گیری مطلق: px, pt, cm
• 9. واحدهای اندازه‌گیری نسبی: em, rem, %, vh, vw
• 10. تنظیم متغیرهای CSS (Custom Properties) برای تم‌های سفارشی
• 11. انتخابگرهای اصلی: Type, Class, ID
• 12. انتخابگرهای ترکیبی: Descendant, Child, Sibling
• 13. انتخابگرهای Attribute برای داده‌های خاص خودرو
• 14. شبه‌کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 15. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 16. شبه‌المان‌ها (Pseudo-elements): ::before و ::after
• 17. استایل‌دهی به وضعیت‌های مختلف المان‌ها (فعال، غیرفعال، انتخاب‌شده)
• 18. انتخابگرهای پیشرفته برای جداول داده
• 19. گروه‌بندی انتخابگرها برای کدهای بهینه‌تر
• 20. استراتژی نام‌گذاری کلاس‌ها: مقدمه‌ای بر BEM
• 21. آشنایی با Box Model: Content, Padding, Border, Margin
• 22. ویژگی `box-sizing`: تفاوت `content-box` و `border-box`
• 23. استایل‌دهی به Border: style, width, color
• 24. ویژگی `border-radius` برای ایجاد گوشه‌های گرد در کارت‌ها
• 25. استفاده از Margin برای ایجاد فاصله بین اجزای داشبورد
• 26. استفاده از Padding برای فضای داخلی المان‌ها
• 27. مدیریت Overflow برای محتوای زیاد در ویجت‌ها
• 28. ایجاد سایه برای کارت‌ها و پنل‌ها با `box-shadow`
• 29. انتخاب فونت مناسب برای خوانایی داده‌ها: `font-family`
• 30. تنظیم اندازه و وزن فونت: `font-size` و `font-weight`
• 31. استایل‌دهی متن: `font-style` و `text-decoration`
• 32. ترازبندی متن در گزارش‌ها: `text-align`
• 33. فاصله بین خطوط و حروف: `line-height` و `letter-spacing`
• 34. کار با فونت‌های سفارشی و آیکون‌فونت‌ها (مانند Font Awesome)
• 35. مدیریت متن‌های طولانی با `text-overflow`
• 36. استایل‌دهی به لیست‌ها برای نمایش لاگ‌ها و رویدادها
• 37. کار با رنگ‌ها: Hex, RGB, HSL
• 38. استفاده از `opacity` و RGBA برای شفافیت
• 39. تنظیم رنگ پس‌زمینه المان‌ها: `background-color`
• 40. استفاده از تصاویر پس‌زمینه: `background-image`
• 41. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 42. ایجاد گرادیانت‌های خطی و شعاعی برای پس‌زمینه‌ها
• 43. استایل‌دهی به آیکون‌های SVG برای نمایش وضعیت خودرو
• 44. فیلترهای CSS: `filter` برای تغییر روشنایی و کنتراست نقشه
• 45. حالت‌های ترکیبی (Blend Modes) برای افکت‌های بصری پیشرفته
• 46. مقدمه‌ای بر Flexbox و موارد استفاده آن در داشبورد
• 47. ایجاد یک Flex Container: `display: flex`
• 48. جهت‌دهی آیتم‌ها با `flex-direction`
• 49. توزیع آیتم‌ها در محور اصلی: `justify-content`
• 50. ترازبندی آیتم‌ها در محور متقاطع: `align-items`
• 51. مدیریت شکست خط با `flex-wrap`
• 52. کنترل رشد و کوچک شدن آیتم‌ها: `flex-grow`, `flex-shrink`, `flex-basis`
• 53. ترازبندی یک آیتم خاص با `align-self`
• 54. تغییر ترتیب نمایش آیتم‌ها با `order`
• 55. ساخت یک نوار ناوبری (Navbar) واکنش‌گرا با Flexbox
• 56. مقدمه‌ای بر CSS Grid و قدرت آن در چیدمان دو بعدی
• 57. تعریف Grid Container: `display: grid`
• 58. تعریف ستون‌ها و ردیف‌ها با `grid-template-columns/rows`
• 59. واحد `fr` برای ستون‌ها و ردیف‌های انعطاف‌پذیر
• 60. ایجاد فاصله بین سلول‌ها با `gap`
• 61. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 62. نام‌گذاری خطوط و نواحی Grid برای خوانایی بهتر
• 63. تابع `repeat()` برای الگوهای تکرارشونده
• 64. ترازبندی آیتم‌ها در Grid: `justify-items` و `align-items`
• 65. طراحی لی‌آوت اصلی داشبورد مدیریت ناوگان با CSS Grid
• 66. استایل‌دهی به فرم‌های ورود اطلاعات (لاگ سفر، بازرسی خودرو)
• 67. استایل‌دهی به Input ها، Textarea ها و دکمه‌ها
• 68. طراحی Dropdown ها و Select Box های سفارشی
• 69. استایل‌دهی به جداول داده برای نمایش گزارشات
• 70. ایجاد جداول واکنش‌گرا (Responsive Tables)
• 71. هایلایت کردن ردیف‌ها و ستون‌ها در جداول
• 72. طراحی کارت‌ها (Cards) برای نمایش اطلاعات هر خودرو
• 73. استایل‌دهی به مودال‌ها (Modals) و پاپ‌آپ‌ها
• 74. طراحی نوارهای پیشرفت (Progress Bars) برای نمایش وضعیت‌ها
• 75. استایل‌دهی به عناصر نقشه (مانند Tooltip ها و نشانگرها)
• 76. مفهوم طراحی واکنش‌گرا (Responsive Web Design)
• 77. استفاده از Viewport Meta Tag
• 78. معرفی Media Queries و سینتکس آن
• 79. طراحی برای موبایل اول (Mobile-First Approach)
• 80. نقاط شکست (Breakpoints) رایج برای دستگاه‌های مختلف
• 81. تطبیق لی‌آوت داشبورد برای تبلت‌ها و نمایشگرهای داخل کابین
• 82. نمایش یا پنهان کردن المان‌ها در اندازه‌های مختلف صفحه
• 83. کار با تصاویر واکنش‌گرا (Responsive Images)
• 84. ایجاد تغییرات نرم با `transition`
• 85. کنترل زمان‌بندی و تاخیر در Transition ها
• 86. انیمیشن‌های مبتنی بر Keyframe با `@keyframes`
• 87. ویژگی `animation` و خصوصیات آن
• 88. انیمیشن‌های کاربردی: لودینگ اسپینرها و نشانگرهای هشدار
• 89. تبدیل‌های دو بعدی: `transform` (translate, rotate, scale)
• 90. افکت‌های سه بعدی ساده با `transform` و `perspective`
• 91. استفاده از تابع `calc()` برای محاسبات دینامیک
• 92. متغیرهای CSS (Custom Properties) برای مدیریت تم‌ها (Themeing)
• 93. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 94. متدولوژی BEM برای نوشتن CSS مقیاس‌پذیر و قابل نگهداری
• 95. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 96. بهینه‌سازی عملکرد CSS: کاهش حجم فایل و انتخابگرهای بهینه
• 97. استایل‌دهی برای چاپ گزارش‌ها با `@media print`
• 98. پشتیبانی از حالت تاریک (Dark Mode) در داشبورد
• 99. تکنیک‌های دسترسی‌پذیری (Accessibility) در CSS
• 100. جمع‌بندی: ساخت یک ویجت داشبورد کامل از صفر تا صد