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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب‌سایت‌های مدیریت ناوگان
• 2. اتصال فایل‌های CSS به HTML: External, Internal, Inline
• 3. سینتکس پایه CSS: انتخابگرها، خصوصیت‌ها و مقادیر
• 4. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools)
• 5. کامنت‌گذاری در CSS
• 6. مفهوم Cascade، وراثت و اولویت (Specificity)
• 7. بازنشانی CSS: Reset vs. Normalize.css
• 8. انتخابگرهای پایه: Type, Class, ID
• 9. انتخابگرهای ترکیبی: Descendant, Child, Sibling
• 10. انتخابگرهای ویژگی (Attribute Selectors)
• 11. شبه-کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 12. شبه-کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 13. شبه-المان‌ها (Pseudo-elements): ::before, ::after
• 14. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 15. خصوصیت box-sizing: content-box vs. border-box
• 16. واحدها در CSS: px, em, rem, %, vh, vw
• 17. مدیریت ابعاد: width, height, min/max-width, min/max-height
• 18. رنگ‌ها در CSS: Keywords, HEX, RGB, RGBA, HSL
• 19. استایل‌دهی به پس‌زمینه: background-color, background-image
• 20. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 21. استایل‌دهی به متون: text-align, text-decoration, text-transform
• 22. خصوصیات فونت: font-family, font-size, font-weight, font-style
• 23. استایل‌دهی به لیست‌ها: list-style-type, list-style-position
• 24. خصوصیت display: block, inline, inline-block, none
• 25. کنترل سرریز محتوا: overflow, overflow-x, overflow-y
• 26. موقعیت‌یابی (Positioning): static, relative, absolute
• 27. موقعیت‌یابی پیشرفته: fixed و sticky برای هدرها و سایدبارها
• 28. مفهوم z-index برای مدیریت لایه‌ها
• 29. استفاده از float و clear (برای درک مفاهیم قدیمی)
• 30. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 31. Flex Containers: display: flex, flex-direction, flex-wrap
• 32. ترازبندی در محور اصلی: justify-content
• 33. ترازبندی در محور متقاطع: align-items
• 34. ترازبندی خطوط چندگانه: align-content
• 35. Flex Items: flex-grow, flex-shrink, flex-basis
• 36. کنترل ترتیب آیتم‌ها با خصوصیت order
• 37. ترازبندی یک آیتم خاص: align-self
• 38. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 39. تعریف گرید: grid-template-columns, grid-template-rows
• 40. واحد fr در CSS Grid
• 41. ایجاد فاصله بین آیتم‌ها: gap, row-gap, column-gap
• 42. موقعیت‌دهی آیتم‌ها در گرید: grid-column, grid-row
• 43. ادغام سلول‌ها: Spanning across columns and rows
• 44. چیدمان با نام‌گذاری نواحی: grid-template-areas
• 45. ترازبندی در گرید: justify-items, align-items
• 46. طراحی ریسپانسیو (Responsive Design): مفاهیم اولیه
• 47. استفاده از متا تگ Viewport
• 48. رویکرد Mobile-First در طراحی
• 49. Media Queries برای تعریف Breakpointها
• 50. تصاویر ریسپانسیو: max-width: 100%
• 51. تایپوگرافی ریسپانسیو با واحدهای rem و تابع clamp()
• 52. طراحی منوی ناوبری اصلی (Main Navigation)
• 53. طراحی سایدبار (Sidebar) برای داشبورد
• 54. استایل‌دهی به دکمه‌ها و لینک‌های فراخوان (Call-to-Action)
• 55. ایجاد نشانگرهای وضعیت (Status Indicators): آنلاین، آفلاین، در حرکت
• 56. استایل‌دهی به فرم‌ها: input, textarea, select
• 57. استایل‌دهی سفارشی برای Checkbox و Radio Button
• 58. طراحی جداول داده (Data Tables) برای نمایش لیست خودروها
• 59. استایل‌دهی به ردیف‌های جدول به صورت یکی در میان (Zebra Striping)
• 60. طراحی کارت‌ها (Cards) برای نمایش اطلاعات هر خودرو
• 61. استایل‌دهی به داشبورد و ویجت‌های اطلاعاتی
• 62. کار با آیکون‌ها: Font Awesome و SVG Icons
• 63. طراحی مودال‌ها (Modals) و پاپ‌آپ‌ها برای جزئیات بیشتر
• 64. استایل‌دهی اولیه برای نقشه‌ها و عناصر روی نقشه (Map Overlays)
• 65. استایل‌دهی به نمودارها (Charts) و گراف‌ها
• 66. طراحی Breadcrumbs برای ناوبری بهتر
• 67. استایل‌دهی به آواتار کاربران و پروفایل رانندگان
• 68. ایجاد انیمیشن‌های بارگذاری (Loading Spinners)
• 69. ایجاد اسکلت‌های محتوا (Skeleton Screens)
• 70. افکت‌های Transition برای تعاملات نرم‌تر
• 71. انیمیشن‌های سفارشی با @keyframes
• 72. ترنسفورم‌های دو بعدی: translate, rotate, scale, skew
• 73. سایه‌ها: box-shadow و text-shadow
• 74. گرد کردن گوشه‌ها با border-radius
• 75. گرادینت‌های خطی و شعاعی (Linear & Radial Gradients)
• 76. حالت‌های ترکیبی پس‌زمینه (Background Blend Modes)
• 77. فیلترهای CSS: blur, grayscale, brightness
• 78. متغیرهای CSS (Custom Properties) برای مدیریت تم‌ها
• 79. استفاده از تابع calc() برای محاسبات دینامیک
• 80. تکنیک‌های استایل‌دهی برای حالت تاریک (Dark Mode)
• 81. بهینه‌سازی عملکرد: کاهش حجم فایل‌های CSS
• 82. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 83. مقدمه‌ای بر متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 84. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 85. استفاده از متغیرها در Sass/SCSS
• 86. استفاده از Nesting در Sass/SCSS
• 87. مفهوم Mixins در Sass/SCSS
• 88. مباحث پیشرفته دسترسی‌پذیری (Accessibility) در CSS
• 89. استایل‌دهی برای حالت پرینت (Print Stylesheets)
• 90. انتخابگر :has() برای انتخاب والد
• 91. استایل‌دهی بر اساس وضعیت‌های فرم: :valid, :invalid, :required
• 92. استایل‌دهی به Scrollbar
• 93. مفهوم Clipping و Masking در CSS
• 94. استایل‌دهی به عنصر <details> و <summary>
• 95. پروژه عملی: ساختار HTML داشبورد مدیریت ناوگان
• 96. پروژه عملی: پیاده‌سازی چیدمان اصلی با CSS Grid
• 97. پروژه عملی: استایل‌دهی به هدر و منوی ناوبری
• 98. پروژه عملی: ساخت سایدبار با قابلیت باز و بسته شدن
• 99. پروژه عملی: استایل‌دهی جدول اطلاعات خودروها
• 100. پروژه عملی: افزودن نشانگرهای وضعیت رنگی به جدول