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

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

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

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

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

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

• 1. مقدمه‌ای بر دوره و نقش CSS در رابط‌های کاربری مدیریت ناوگان
• 2. CSS چیست؟ تاریخچه و تکامل آن
• 3. روش‌های افزودن CSS به یک صفحه: Inline, Internal, External
• 4. آشنایی با ساختار و سینتکس قوانین CSS
• 5. کامنت‌گذاری در CSS و اهمیت آن
• 6. آشنایی با انتخابگرهای اصلی: Element, Class, ID
• 7. انتخابگرهای ترکیبی (Combinators): Descendant, Child, Sibling
• 8. انتخابگرهای ویژگی (Attribute Selectors)
• 9. مفهوم Specificity (اولویت انتخابگرها) در CSS
• 10. مفهوم Cascade و Inheritance (آبشار و وراثت)
• 11. آشنایی با مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 12. ویژگی box-sizing و تاثیر آن بر Box Model
• 13. واحدهای اندازه‌گیری مطلق و نسبی (px, %, em, rem)
• 14. واحدهای اندازه‌گیری Viewport (vh, vw, vmin, vmax)
• 15. کار با رنگ‌ها: نام‌های کلیدی، HEX, RGB, RGBA, HSL
• 16. استایل‌دهی به پس‌زمینه: background-color و background-image
• 17. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 18. استایل‌دهی به حاشیه‌ها (Borders)
• 19. مبانی تایپوگرافی: font-family, font-size, font-weight
• 20. استایل‌دهی به متن: text-align, text-decoration, text-transform
• 21. کار با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای دیباگ CSS
• 22. اعتبارسنجی کدهای CSS
• 23. مفهوم Reset و Normalize CSS
• 24. ویژگی display: block, inline, inline-block
• 25. تفاوت visibility: hidden و display: none
• 26. مبانی Position: static و relative
• 27. کار با Position: absolute و fixed
• 28. مفهوم z-index و Stacking Context
• 29. کار با Position: sticky برای ساخت هدرهای چسبان
• 30. مفهوم Float و Clearfix (برای طرح‌بندی‌های قدیمی و خاص)
• 31. کنترل سرریز محتوا با ویژگی overflow
• 32. استفاده از گرادیان‌ها (Linear و Radial Gradients)
• 33. ایجاد سایه برای جعبه‌ها با box-shadow
• 34. ایجاد سایه برای متن با text-shadow
• 35. کار با شبه‌کلاس‌ها (Pseudo-classes): hover, focus, active
• 36. شبه‌کلاس‌های ساختاری: first-child, last-child, nth-child
• 37. کار با شبه‌المان‌ها (Pseudo-elements): ::before و ::after
• 38. استایل‌دهی به لیست‌های مرتب و نامرتب
• 39. مبانی استایل‌دهی به جداول
• 40. مبانی استایل‌دهی به فرم‌ها و ورودی‌ها
• 41. طراحی دکمه‌های سفارشی و تعاملی
• 42. تغییر شکل نشانگر ماوس با ویژگی cursor
• 43. استفاده از فونت‌های سفارشی با @font-face
• 44. مقدمه‌ای بر Flexbox و مفاهیم اصلی آن
• 45. کنترل جهت و شکست خطوط در Flexbox با flex-direction و flex-wrap
• 46. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 47. تراز کردن آیتم‌ها در محور متقاطع با align-items و align-content
• 48. کنترل اندازه و انعطاف‌پذیری آیتم‌ها با flex-grow, flex-shrink, flex-basis
• 49. تغییر ترتیب نمایش آیتم‌ها با ویژگی order
• 50. مقدمه‌ای بر CSS Grid Layout
• 51. تعریف ستون‌ها و ردیف‌ها در Grid
• 52. جایگذاری آیتم‌ها در Grid با استفاده از شماره خطوط
• 53. ادغام سلول‌ها در Grid با grid-column و grid-row
• 54. نام‌گذاری خطوط و نواحی در Grid
• 55. ایجاد فاصله بین آیتم‌ها با ویژگی gap
• 56. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 57. تکنیک‌های مدرن برای وسط‌چین کردن المان‌ها
• 58. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 59. اهمیت متا تگ viewport
• 60. کار با Media Queries برای ایجاد Breakpoint
• 61. رویکرد Mobile-First در مقابل Desktop-First
• 62. ایجاد طرح‌بندی‌های سیال (Fluid Layouts)
• 63. واکنش‌گرا کردن تصاویر و ویدئوها
• 64. تایپوگرافی واکنش‌گرا با واحدهای vw و تابع clamp()
• 65. مقدمه‌ای بر Transition ها برای ایجاد انیمیشن‌های نرم
• 66. کار با Transform های دو بعدی: translate, rotate, scale
• 67. کنترل نقطه شروع Transform با transform-origin
• 68. مقدمه‌ای بر انیمیشن‌های پیچیده با @keyframes
• 69. کنترل کامل انیمیشن‌ها با ویژگی animation
• 70. فیلترهای گرافیکی در CSS با ویژگی filter
• 71. متغیرهای CSS (Custom Properties) و کاربرد آن‌ها
• 72. استفاده از تابع calc() برای محاسبات دینامیک
• 73. کنترل نحوه نمایش مدیا با object-fit و object-position
• 74. استفاده از @supports برای بررسی پشتیبانی مرورگر
• 75. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 76. معماری CSS: آشنایی با متدولوژی BEM
• 77. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 78. نوشتن کدهای CSS قابل نگهداری و مقیاس‌پذیر
• 79. بهینه‌سازی عملکرد CSS: کاهش حجم و پیچیدگی
• 80. آشنایی با مسیر رندرینگ مرورگر و تاثیر CSS بر آن
• 81. مبانی دسترسی‌پذیری (Accessibility) در CSS
• 82. ایجاد استایل‌های مخصوص چاپ با @media print
• 83. طراحی ساختار کلی داشبورد مدیریت ناوگان با Grid و Flexbox
• 84. استایل‌دهی به کارت‌های اطلاعاتی (KPI Cards) در داشبورد
• 85. طراحی و استایل‌دهی به نشانگرهای وضعیت خودرو (آنلاین، آفلاین، در حرکت)
• 86. استایل‌دهی به جداول داده برای نمایش لیست خودروها و رانندگان
• 87. واکنش‌گرا کردن جداول داده برای نمایش در دستگاه‌های مختلف
• 88. طراحی نوارهای جستجو و فیلتر پیشرفته
• 89. استایل‌دهی به نشانگرها (Markers) و پاپ‌آپ‌های نقشه
• 90. طراحی مسیرها (Routes) و ژئوفنس‌ها (Geofences) روی نقشه
• 91. سفارشی‌سازی کنترلرهای نقشه (زوم، لایه‌ها)
• 92. طراحی و استایل‌دهی به نمودارهای میله‌ای و خطی برای گزارشات
• 93. ایجاد هشدارهای لحظه‌ای (Real-time Alerts) و نوتیفیکیشن‌ها
• 94. طراحی فرم‌های پیچیده ثبت خودرو، راننده و سرویس‌های دوره‌ای
• 95. پیاده‌سازی تم روشن و تیره (Light/Dark Mode) با متغیرهای CSS
• 96. استایل‌دهی به نمای تایم‌لاین برای تاریخچه سفرها
• 97. طراحی مودال‌ها و پاپ‌آپ‌ها برای نمایش جزئیات
• 98. ایجاد طرح‌بندی‌های قابل چاپ برای گزارشات (Print-friendly Reports)
• 99. پروژه نهایی: ساخت کامل رابط کاربری داشبورد نظارت بر ناوگان
• 100. **طراحی واکنش‌گرا (Responsive Design) با CSS: ایجاد چیدمان‌های منعطف و سازگار برای دستگاه‌های مختلف**

CSS for Fleet Management Landscape: تسلط بر طراحی رابط کاربری ناوگان