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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در داشبوردهای مدیریت ناوگان
• 2. نحوه افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. قواعد و ساختار اصلی CSS: انتخابگر، خصوصیت و مقدار
• 4. انتخابگرهای ساده: تگ، کلاس و شناسه
• 5. انتخابگرهای ترکیبی: فرزند، نسل، همسایه و عمومی
• 6. انتخابگرهای ویژگی (Attribute Selectors)
• 7. شبه‌کلاس‌های (Pseudo-classes) پایه مانند hover: و active:
• 8. شبه‌عناصر (Pseudo-elements) پرکاربرد مانند before:: و after::
• 9. مفهوم Cascade، Specificity و Inheritance
• 10. اهمیت استفاده از کامنت در کدهای CSS
• 11. واحدهای رنگ: کلمات کلیدی، هگز، RGB و HSL
• 12. استایل‌دهی به پس‌زمینه: رنگ، تصویر و گرادینت
• 13. مفهوم Box Model: محتوا، Padding، Border، Margin
• 14. تنظیمات پیشرفته Border و استفاده از border-radius
• 15. اهمیت ویژگی box-sizing: content-box در مقابل border-box
• 16. اصول تایپوگرافی: font-family، font-size و font-style
• 17. استایل‌دهی به متن: font-weight، color، text-align و line-height
• 18. کار با فونت‌های سفارشی و وب‌فونت‌ها از طریق font-face@
• 19. ویژگی display: بلاک، اینلاین و اینلاین-بلاک
• 20. کنترل سرریز محتوا با ویژگی overflow
• 21. موقعیت‌یابی با Position: استاتیک و نسبی
• 22. موقعیت‌یابی با Position: مطلق و ثابت
• 23. موقعیت‌یابی چسبان با position: sticky برای هدرها
• 24. مدیریت لایه‌ها و همپوشانی عناصر با z-index
• 25. مقدمه‌ای بر Flexbox و کاربرد آن در چیدمان کامپوننت‌های UI
• 26. محورهای اصلی و متقاطع در Flexbox
• 27. ویژگی‌های Flex Container: flex-direction و flex-wrap
• 28. ویژگی‌های Flex Container: justify-content برای تراز افقی
• 29. ویژگی‌های Flex Container: align-items و align-content برای تراز عمودی
• 30. ویژگی‌های Flex Item: flex-grow، flex-shrink و flex-basis
• 31. چیدمان کارت‌های اطلاعات خودرو در داشبورد با Flexbox
• 32. مقدمه‌ای بر CSS Grid Layout برای ساختارهای پیچیده
• 33. تعریف ستون‌ها و ردیف‌ها در گرید با grid-template-columns/rows
• 34. فاصله‌گذاری بین آیتم‌های گرید با ویژگی gap
• 35. قرار دادن آیتم‌ها در گرید با استفاده از شماره خطوط
• 36. استفاده از نام برای خطوط و نواحی گرید (Grid Template Areas)
• 37. ایجاد لی‌آوت اصلی داشبورد مدیریت ناوگان با CSS Grid
• 38. ترکیب هوشمندانه Flexbox و Grid برای بهترین نتیجه
• 39. استایل‌دهی به فرم‌ها: مفاهیم پایه
• 40. استایل‌دهی به input، textarea و select
• 41. شخصی‌سازی کامل Checkbox و Radio Button
• 42. استایل‌دهی به دکمه‌ها و وضعیت‌های مختلف آن (hover, focus, disabled)
• 43. اعتبارسنجی فرم با شبه‌کلاس‌های valid: و invalid:
• 44. طراحی جدول‌های داده خوانا برای نمایش گزارشات ناوگان
• 45. استایل‌دهی به ردیف‌های زوج و فرد جدول (Zebra-striping)
• 46. ایجاد هدرهای چسبان (Sticky Headers) برای جداول طولانی
• 47. استایل‌دهی به کارت‌ها (Cards) برای نمایش خلاصه وضعیت هر خودرو
• 48. طراحی نمایشگرهای کلیدی عملکرد (KPIs) در داشبورد
• 49. پیاده‌سازی نوارهای پیشرفت (Progress Bars) برای وضعیت تعمیرات
• 50. ایجاد نمودارهای میله‌ای ساده فقط با CSS
• 51. استایل‌دهی به آیکون‌ها با استفاده از فونت آیکون و SVG
• 52. طراحی پنل‌های بازشونده (Accordions) برای نمایش جزئیات سفر
• 53. استایل‌دهی به تب‌ها (Tabs) برای دسته‌بندی اطلاعات رانندگان
• 54. طراحی مودال (Modal) برای نمایش هشدارهای مهم و فوری
• 55. استایل‌دهی به نوتیفیکیشن‌ها و پیام‌های Toast
• 56. طراحی Tooltip برای ارائه راهنمایی مختصر روی عناصر
• 57. استایل‌دهی به منوهای کشویی (Dropdown Menus) برای فیلترها
• 58. طراحی Breadcrumb برای نمایش مسیر ناوبری کاربر
• 59. صفحه‌بندی (Pagination) برای جداول و لیست‌های طولانی
• 60. شخصی‌سازی ظاهر اسکرول‌بار در داشبورد
• 61. استایل‌دهی به عناصر نقشه: کانتینر، کنترل‌های زوم و لایه‌ها
• 62. استایل‌دهی به پاپ‌آپ‌های اطلاعاتی روی نقشه (Info-windows)
• 63. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 64. استفاده صحیح از متا تگ viewport
• 65. مفهوم و پیاده‌سازی رویکرد Mobile-First
• 66. کار با Media Queries و تعریف Breakpointهای استاندارد
• 67. ایجاد لی‌آوت واکنش‌گرا برای جداول داده (مثلاً تبدیل به لیست)
• 68. واکنش‌گرا کردن تصاویر و ویدئوها
• 69. استفاده از واحدهای نسبی: درصد، vw و vh
• 70. تایپوگرافی واکنش‌گرا با واحدهای rem و em
• 71. تکنیک‌های نمایش و پنهان‌سازی عناصر در اندازه‌های مختلف صفحه
• 72. مقدمه‌ای بر Transitions برای ایجاد افکت‌های حرکتی نرم
• 73. کنترل سرعت انیمیشن با transition-timing-function
• 74. مقدمه‌ای بر Animations و تعریف keyframes@
• 75. ایجاد انیمیشن‌های کاربردی برای اعلانات و به‌روزرسانی‌های زنده
• 76. کار با Transform: توابع ()translate و ()scale
• 77. کار با Transform: توابع ()rotate و ()skew
• 78. بهبود تجربه کاربری با شبه‌کلاس‌های تعاملی: focus-within: و target:
• 79. متغیرهای CSS (Custom Properties) و قدرت آن در تم‌بندی
• 80. پیاده‌سازی تم تاریک و روشن (Dark/Light Mode) برای داشبورد
• 81. سازماندهی فایل‌های CSS: معرفی معماری BEM
• 82. سازماندهی فایل‌های CSS: معرفی معماری SMACSS
• 83. مقدمه‌ای بر پیش‌پردازنده‌های CSS: Sass/SCSS
• 84. استفاده از متغیرها و تودرتویی (Nesting) در Sass
• 85. استفاده از Mixinها در Sass برای جلوگیری از تکرار کد
• 86. بهینه‌سازی عملکرد: کاهش حجم فایل‌های CSS (Minification)
• 87. مفهوم Critical CSS برای افزایش سرعت بارگذاری اولیه صفحه
• 88. نکات دسترسی‌پذیری (Accessibility): اهمیت کنتراست رنگ
• 89. نکات دسترسی‌پذیری: استایل‌دهی واضح به حالت focus
• 90. استفاده از ویژگی‌های ARIA از دیدگاه CSS
• 91. ایجاد استایل‌های مخصوص پرینت (Print Stylesheets) برای گزارشات
• 92. کنترل شکسته‌شدن صفحات و عناصر در هنگام پرینت
• 93. مقابله با مشکلات رایج سازگاری بین مرورگرها
• 94. استفاده از ابزار Autoprefixer برای افزودن پیشوندهای مرورگر
• 95. کار با تابع ()calc برای محاسبات پویا در مقادیر CSS
• 96. استفاده از توابع ()min(), max و ()clamp برای طراحی روان و انعطاف‌پذیر
• 97. مفهوم Container Queries (container@) برای طراحی کامپوننت‌محور
• 98. حفظ نسبت ابعاد عناصر با ویژگی aspect-ratio
• 99. کار با فیلترهای CSS برای اعمال افکت‌های تصویری (مانند blur و grayscale)
• 100. یکپارچه‌سازی CSS با کامپوننت‌های JavaScript (React, Vue, Angular)