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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در نرم‌افزارهای مدیریت ناوگان
• 2. نحوه‌ی افزودن CSS به یک صفحه وب: داخلی، خارجی و درون‌خطی
• 3. آشنایی با ساختار یک قانون CSS: انتخابگرها و بلوک‌های تعریف
• 4. انتخابگرهای اصلی: عنصر، کلاس و شناسه (ID)
• 5. ترکیب‌کننده‌ها: انتخابگرهای نسل (Descendant) و فرزند (Child)
• 6. انتخابگرهای همسایه: مجاور (Adjacent) و عمومی (General Sibling)
• 7. انتخابگرهای ویژگی (Attribute Selectors)
• 8. شبه‌کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 9. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 10. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 11. اولویت‌بندی و آبشاری شدن (Specificity and the Cascade)
• 12. مفهوم وراثت (Inheritance) در CSS
• 13. استفاده از کامنت‌ها برای مستندسازی کد CSS
• 14. واحدهای اندازه‌گیری مطلق: پیکسل (px)
• 15. واحدهای اندازه‌گیری نسبی: درصد (%)، em و rem
• 16. واحدهای اندازه‌گیری Viewport: vw و vh
• 17. مدل‌های رنگی: RGB, RGBA, HEX, HSL
• 18. استفاده از متغیرهای رنگی برای برندینگ ناوگان
• 19. مبانی استایل‌دهی به متن: font-family و font-size
• 20. ویژگی‌های font-weight و font-style
• 21. ترازبندی و دکوراسیون متن: text-align و text-decoration
• 22. تنظیم پس‌زمینه: background-color و background-image
• 23. مفهوم Box Model: محتوا، Padding, Border, Margin
• 24. تنظیم ابعاد عناصر: width و height
• 25. ویژگی‌های min-width و max-width برای طراحی انعطاف‌پذیر
• 26. کار با Padding برای ایجاد فضای داخلی
• 27. استایل‌دهی به Border: style, width, color
• 28. کار با Margin و مفهوم Margin Collapsing
• 29. ویژگی box-sizing: content-box در مقابل border-box
• 30. ویژگی display: block, inline, inline-block
• 31. موقعیت‌یابی (Positioning): static و relative
• 32. موقعیت‌یابی مطلق (absolute) برای عناصر UI
• 33. موقعیت‌یابی ثابت (fixed) برای هدرها و نوارهای کناری
• 34. کنترل لایه‌ها با z-index
• 35. کنترل سرریز محتوا با ویژگی overflow
• 36. مقدمه‌ای بر Flexbox: چرا برای داشبوردها ایده‌آل است؟
• 37. محور اصلی و محور متقاطع در Flexbox
• 38. ویژگی flex-direction برای چیدمان افقی و عمودی
• 39. تراز کردن آیتم‌ها روی محور اصلی با justify-content
• 40. تراز کردن آیتم‌ها روی محور متقاطع با align-items
• 41. مدیریت شکست خطوط با flex-wrap
• 42. ویژگی‌های آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 43. کاربرد عملی Flexbox: ساخت هدر داشبورد مدیریت ناوگان
• 44. مقدمه‌ای بر CSS Grid: بهترین ابزار برای لی‌آوت صفحه
• 45. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 46. استفاده از واحد fr برای ستون‌های انعطاف‌پذیر
• 47. ایجاد فاصله بین آیتم‌ها با gap
• 48. مکان‌یابی آیتم‌ها در گرید با شماره خطوط
• 49. تعریف نواحی نام‌گذاری شده با grid-template-areas
• 50. کاربرد عملی Grid: طراحی ساختار کلی یک داشبورد
• 51. استایل‌دهی به دکمه‌ها: اصلی، ثانویه و هشدار
• 52. استایل‌دهی به فرم‌ها و فیلدهای ورودی (Inputs)
• 53. سفارشی‌سازی Checkboxها و Radio Buttonها
• 54. استایل‌دهی به منوهای کشویی (Dropdown/Select)
• 55. طراحی جداول داده بزرگ: هدر، ردیف‌ها و سلول‌ها
• 56. استفاده از Zebra Striping برای خوانایی بهتر جداول
• 57. استایل‌دهی به هدرهای قابل مرتب‌سازی (Sortable) در جداول
• 58. طراحی کنترل‌های صفحه‌بندی (Pagination) برای جداول
• 59. استایل‌دهی به نشانگرهای نقشه (Map Markers)
• 60. سفارشی‌سازی پنجره‌های اطلاعاتی (Info Windows) روی نقشه
• 61. استایل‌دهی به مسیرهای ترسیم‌شده روی نقشه
• 62. طراحی ویجت‌ها و کارت‌های اطلاعاتی در داشبورد
• 63. استایل‌دهی به شاخص‌های کلیدی عملکرد (KPIs)
• 64. طراحی نوارهای پیشرفت (Progress Bars) برای وضعیت تعمیرات
• 65. استایل‌دهی به نمودارهای دایره‌ای و حلقه‌ای (Donut Charts)
• 66. استایل‌دهی پایه‌ای به نمودارهای میله‌ای و خطی
• 67. طراحی هشدارها و اعلان‌ها: موفقیت، اخطار و خطا
• 68. ایجاد نشان‌ها (Badges) برای وضعیت خودروها: فعال، متوقف، در تعمیر
• 69. سفارشی‌سازی اسکرول‌بار برای پنل‌های داده
• 70. طراحی پنجره‌های مودال (Modal) برای نمایش جزئیات
• 71. استایل‌دهی به منوی ناوبری کناری (Sidebar)
• 72. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 73. رویکرد Mobile-First در طراحی واسط کاربری
• 74. استفاده از Media Queries برای تعریف Breakpointها
• 75. واکنش‌گرا کردن لی‌آوت گرید داشبورد
• 76. انطباق جداول داده برای نمایش در صفحه‌های کوچک
• 77. تایپوگرافی روان با استفاده از clamp()
• 78. مدیریت تصاویر واکنش‌گرا
• 79. افکت‌های تعاملی با تغییر نشانگر ماوس (cursor)
• 80. مقدمه‌ای بر Transitions برای انیمیشن‌های نرم
• 81. انتقال بین حالت‌های مختلف یک عنصر با transition
• 82. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 83. ترکیب Transforms و Transitions برای ایجاد افکت‌های جذاب
• 84. مقدمه‌ای بر انیمیشن‌های CSS با @keyframes
• 85. ایجاد یک انیمیشن Loading Spinner برای بارگذاری داده‌ها
• 86. استفاده از انیمیشن‌های ظریف برای بازخورد به کاربر
• 87. متغیرهای CSS (Custom Properties) برای ساخت تم
• 88. پیاده‌سازی تم روشن و تاریک (Light/Dark Mode)
• 89. استفاده از تابع ()calc برای محاسبات پویا
• 90. سازماندهی کد CSS با متدولوژی BEM
• 91. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 92. استفاده از متغیرها و تودرتویی (Nesting) در SCSS
• 93. استفاده از Mixinها برای کدهای قابل استفاده مجدد در SCSS
• 94. معماری CSS برای پروژه‌های بزرگ مدیریت ناوگان
• 95. بهینه‌سازی عملکرد: کاهش حجم فایل با Minification
• 96. درک مسیر رندرینگ حیاتی (Critical Rendering Path)
• 97. استایل‌دهی برای چاپ: ایجاد گزارش‌های قابل پرینت
• 98. سازگاری بین مرورگرها و پیشوندهای فروشنده (Vendor Prefixes)
• 99. مبانی دسترسی‌پذیری (Accessibility): کنتراست رنگ
• 100. اطمینان از دسترسی‌پذیری حالت‌های :focus برای ناوبری با کیبورد