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

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

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

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

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

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

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

• 1. مقدمه بر CSS و نقش آن در رابط کاربری مدیریت ناوگان
• 2. چرا CSS برای داشبوردهای مدیریتی حیاتی است؟
• 3. روش‌های افزودن CSS به یک صفحه وب (Inline, Internal, External)
• 4. آشنایی با سینتکس CSS: انتخابگر، خصوصیت و مقدار
• 5. کامنت‌گذاری در CSS و اهمیت آن
• 6. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 7. انتخابگرهای ترکیبی (Descendant, Child, Sibling)
• 8. انتخابگرهای صفت (Attribute Selectors)
• 9. آشنایی با مفهوم Cascade وراثت (Inheritance)
• 10. اولویت در CSS و مفهوم Specificity
• 11. استفاده از ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای دیباگ CSS
• 12. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 13. خصوصیت‌های Border (Style, Width, Color)
• 14. خصوصیت‌های Padding و Margin
• 15. تنظیم ابعاد عناصر: Width و Height
• 16. خصوصیت box-sizing: content-box در مقابل border-box
• 17. واحدهای اندازه‌گیری مطلق (px, pt) و نسبی (em, rem, %)
• 18. واحدهای Viewport (vh, vw, vmin, vmax)
• 19. کار با رنگ‌ها: نام رنگ، HEX، RGB و HSL
• 20. تنظیم رنگ پس‌زمینه (background-color) و تصویر پس‌زمینه (background-image)
• 21. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 22. گرادیان‌های خطی و شعاعی در پس‌زمینه
• 23. مبانی تایپوگرافی: font-family و font-size
• 24. خصوصیت‌های font-weight و font-style
• 25. ترازبندی و دکوراسیون متن (text-align, text-decoration)
• 26. فاصله‌گذاری بین حروف و خطوط (letter-spacing, line-height)
• 27. استایل‌دهی به لیست‌ها (ul, ol)
• 28. موقعیت‌یابی (Positioning): Static, Relative, Absolute
• 29. موقعیت‌یابی Fixed و Sticky برای هدر جداول و منوها
• 30. خصوصیت Display: Block, Inline, Inline-block
• 31. مخفی کردن عناصر با Display: none و Visibility: hidden
• 32. مفهوم Z-index و مدیریت لایه‌ها
• 33. چیدمان با Float و مشکل Clearfix (برای آشنایی)
• 34. مقدمه‌ای بر Flexbox و محورهای اصلی و متقاطع
• 35. کانتینر Flexbox و خصوصیت display: flex
• 36. کنترل جهت چیدمان با flex-direction
• 37. ترازبندی آیتم‌ها در محور اصلی با justify-content
• 38. ترازبندی آیتم‌ها در محور متقاطع با align-items
• 39. تنظیم چیدمان خطوط چندگانه با align-content
• 40. رشد و کوچک شدن آیتم‌ها با flex-grow و flex-shrink
• 41. خصوصیت flex-basis و خلاصه‌نویسی flex
• 42. کنترل ترتیب نمایش آیتم‌ها با order
• 43. مقدمه‌ای بر CSS Grid و کاربرد آن در داشبوردها
• 44. ایجاد یک کانتینر Grid با display: grid
• 45. تعریف سطرها و ستون‌ها با grid-template-rows/columns
• 46. واحد جدید fr برای تقسیم‌بندی فضا
• 47. ایجاد فاصله بین آیتم‌ها با gap
• 48. موقعیت‌دهی آیتم‌ها در Grid با grid-row/column
• 49. نام‌گذاری خطوط و نواحی در Grid (grid-template-areas)
• 50. استایل‌دهی به فرم‌ها: مقدمه و ساختار کلی
• 51. استایل‌دهی به Input و Textarea برای ورود داده‌ها
• 52. شخصی‌سازی دکمه‌ها (Buttons) برای عملیات (ثبت، حذف)
• 53. استایل‌دهی به Checkbox و Radio Button
• 54. طراحی Dropdownها و تگ Select
• 55. استایل‌دهی به جداول: مقدمه و اهمیت در نمایش داده‌ها
• 56. طراحی هدر و بدنه جدول (thead, tbody, tfoot)
• 57. ایجاد جداول واکنش‌گرا (Responsive Tables)
• 58. استایل‌دهی سطرهای زوج و فرد (Zebra Striping)
• 59. افکت Hover برای نمایش بهتر سطرها
• 60. طراحی کارت‌ها (Cards) برای نمایش اطلاعات خودروها
• 61. ایجاد ویجت‌های داشبورد (KPI Widgets)
• 62. استایل‌دهی نشانگرهای وضعیت (آنلاین، آفلاین، در حال تعمیر)
• 63. طراحی نوارهای پیشرفت (Progress Bars) برای نمایش میزان سوخت یا سرویس دوره‌ای
• 64. استایل‌دهی به آیکون‌ها (با استفاده از Font Awesome یا SVG)
• 65. شبه‌کلاس‌ها (Pseudo-classes): hover, active, focus
• 66. شبه‌کلاس‌های ساختاری: first-child, last-child, nth-child
• 67. شبه‌المان‌ها (Pseudo-elements): before و after
• 68. کاربرد before/after برای ایجاد نشانگرهای وضعیت
• 69. مقدمه‌ای بر Transitions و ایجاد انیمیشن‌های نرم
• 70. خصوصیت transition-property و transition-duration
• 71. کنترل سرعت انیمیشن با transition-timing-function
• 72. اعمال تاخیر در انیمیشن با transition-delay
• 73. مقدمه‌ای بر Animations و Keyframes
• 74. تعریف انیمیشن با @keyframes
• 75. اعمال انیمیشن با خصوصیت‌های animation
• 76. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 77. تبدیل‌های سه بعدی (3D Transforms): perspective
• 78. مفهوم طراحی واکنش‌گرا (Responsive Web Design)
• 79. استفاده از Media Queries برای تعریف Breakpointها
• 80. رویکرد Mobile-First در طراحی CSS
• 81. ایجاد یک منوی ناوبری واکنش‌گرا (Responsive Navigation)
• 82. استفاده از تصاویر واکنش‌گرا
• 83. متغیرها در CSS (Custom Properties)
• 84. کاربرد متغیرها در ایجاد تم (Theming)
• 85. ساخت تم روشن و تاریک (Light/Dark Mode) برای داشبورد
• 86. مفهوم معماری CSS و روش‌شناسی BEM
• 87. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 88. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 89. استفاده از متغیرها و تودرتویی (Nesting) در Sass
• 90. استفاده از Mixinها برای کدهای قابل استفاده مجدد در Sass
• 91. بهینه‌سازی عملکرد CSS: کوچک‌سازی (Minification)
• 92. حذف CSSهای استفاده نشده
• 93. بارگذاری بهینه فونت‌های وب
• 94. دسترسی‌پذیری (Accessibility): کنتراست رنگ
• 95. استفاده از خصوصیت outline برای کاربران کیبورد
• 96. استایل‌دهی به حالت focus-visible
• 97. پشتیبانی از حالت کاهش حرکت (prefers-reduced-motion)
• 98. استایل‌دهی به عناصر SVG برای آیکون‌های خودرو و نقشه
• 99. کار با فیلترها در CSS (Filter Property)
• 100. ایجاد افکت Blur و Grayscale