دوره CSS for Fleet Management Programs همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در نرم‌افزارهای مدیریت ناوگان
• 2. CSS چیست؟ (Cascading Style Sheets)
• 3. نحوه افزودن CSS به یک صفحه وب (Internal, External, Inline)
• 4. سینتکس پایه CSS: انتخابگرها، خصوصیت‌ها و مقادیر
• 5. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 6. کامنت‌گذاری در CSS
• 7. مدل جعبه‌ای (Box Model): Margin, Border, Padding
• 8. مفهوم عرض و ارتفاع (Width and Height)
• 9. خصوصیت box-sizing: content-box در مقابل border-box
• 10. واحدهای اندازه‌گیری مطلق و نسبی (px, %, em, rem, vw, vh)
• 11. کار با رنگ‌ها: نام رنگ، HEX, RGB, HSL
• 12. اعمال رنگ به متن و پس‌زمینه
• 13. استفاده از تصاویر پس‌زمینه (background-image)
• 14. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 15. استایل‌دهی به متن: font-family, font-size, font-weight
• 16. تراز کردن متن (text-align) و دکوراسیون (text-decoration)
• 17. فاصله‌گذاری بین حروف و خطوط (letter-spacing, line-height)
• 18. استایل‌دهی به لیست‌ها و لینک‌ها
• 19. مفهوم Display: block, inline, inline-block
• 20. خصوصیت Position: static, relative, absolute, fixed
• 21. خصوصیت Position: sticky برای هدر جداول و داشبord
• 22. کار با Z-index برای لایه‌بندی عناصر
• 23. مفهوم Float و کاربردهای قدیمی آن
• 24. تکنیک Clearfix برای مدیریت Float
• 25. مقدمه‌ای بر Flexbox: چرا برای داشبوردها حیاتی است؟
• 26. کانتینر Flexbox و خصوصیات آن (flex-direction, justify-content, align-items)
• 27. آیتم‌های Flexbox و خصوصیات آن‌ها (flex-grow, flex-shrink, flex-basis)
• 28. ترازبندی و توزیع فضا با Flexbox
• 29. ساخت یک نوار کناری (Sidebar) برای داشبورد با Flexbox
• 30. مقدمه‌ای بر CSS Grid Layout
• 31. تعریف کانتینر Grid و ستون‌ها/ردیف‌ها (grid-template-columns/rows)
• 32. فاصله‌گذاری بین آیتم‌ها با gap
• 33. موقعیت‌دهی آیتم‌ها در Grid
• 34. چیدمان کامل داشبورد مدیریت ناوگان با CSS Grid
• 35. استایل‌دهی فرم‌ها: طراحی فرم ثبت خودرو
• 36. استایل‌دهی به input, textarea, select
• 37. طراحی دکمه‌های تعاملی (Buttons)
• 38. شبه‌کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 39. استایل‌دهی به جداول داده (Data Tables)
• 40. طراحی جدول لیست خودروها
• 41. استایل‌دهی ردیف‌های زوج و فرد (Zebra Striping) با :nth-child
• 42. ساخت جداول واکنش‌گرا برای نمایش در موبایل
• 43. طراحی کارت‌ها (Cards) برای نمایش خلاصه وضعیت هر خودرو
• 44. طراحی نشان‌ها (Badges) برای وضعیت: در حال حرکت، متوقف، آفلاین
• 45. استفاده از آیکون‌ها (SVG و Font Libraries)
• 46. ایجاد Tooltip برای نمایش اطلاعات بیشتر
• 47. طراحی منوهای کشویی (Dropdown Menus)
• 48. ساخت پنجره‌های مودال (Modals) برای هشدارها
• 49. طراحی نوارهای پیشرفت (Progress Bars) برای نمایش مصرف سوخت
• 50. استایل‌دهی به Pagination برای جداول طولانی
• 51. مفهوم طراحی واکنش‌گرا (Responsive Web Design)
• 52. استفاده از متا تگ viewport
• 53. کار با Media Queries برای ایجاد Breakpoint
• 54. رویکرد Mobile-First در طراحی
• 55. طراحی هدر و ناوبری واکنش‌گرا (منوی همبرگری)
• 56. واکنش‌گرا کردن کارت‌های داشبورد
• 57. استفاده از تصاویر واکنش‌گرا
• 58. انتخابگرهای ترکیبی (Combinators): Descendant, Child, Sibling
• 59. انتخابگرهای ویژگی (Attribute Selectors) برای استایل‌دهی بر اساس داده
• 60. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 61. کاربردهای ::before و ::after در طراحی UI
• 62. مقدمه‌ای بر Transitionها برای انیمیشن‌های نرم
• 63. کنترل سرعت و تأخیر Transition
• 64. مقدمه‌ای بر Animationها با @keyframes
• 65. ایجاد یک انیمیشن Loading Spinner
• 66. ترنسفورم‌های دو بعدی: translate, rotate, scale
• 67. ترنسفورم‌های سه بعدی و مفهوم perspective
• 68. استفاده از فیلترهای CSS (blur, grayscale, brightness)
• 69. حالت‌های ترکیب (Blend Modes) برای تصاویر و پس‌زمینه‌ها
• 70. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌سازی
• 71. پیاده‌سازی تم روشن و تاریک با متغیرهای CSS
• 72. تابع calc() برای محاسبات دینامیک
• 73. توابع min(), max() و clamp() برای طراحی سیال
• 74. استفاده از گرادیان‌های خطی و شعاعی برای پس‌زمینه
• 75. معماری CSS: مفهوم BEM برای نام‌گذاری کلاس‌ها
• 76. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 77. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 78. استفاده از متغیرها و تودرتویی (Nesting) در Sass
• 79. استفاده از Mixinها در Sass برای کدهای قابل استفاده مجدد
• 80. استفاده از توابع و عملیات‌ها در Sass
• 81. بهینه‌سازی عملکرد CSS: کاهش حجم فایل‌ها
• 82. شناسایی و حذف CSS استفاده نشده
• 83. مفهوم CSS حیاتی (Critical CSS)
• 84. مبانی دسترسی‌پذیری (Accessibility) در CSS
• 85. تضمین کنتراست رنگ مناسب
• 86. استایل‌دهی به حالت‌های focus برای ناوبری با کیبورد
• 87. استفاده از مدیا کوئری prefers-reduced-motion
• 88. پروژه عملی: ساختار HTML داشبورد نهایی
• 89. پروژه عملی: استایل‌دهی به هدر و نوار کناری اصلی
• 90. پروژه عملی: چیدمان ویجت‌های اصلی داشبورد (KPIs)
• 91. پروژه عملی: طراحی کامپوننت لیست رانندگان
• 92. پروژه عملی: استایل‌دهی به نمودارهای داده (Charts)
• 93. پروژه عملی: استایل‌دهی نقشه تعاملی (Map Container and Controls)
• 94. پروژه عملی: استایل‌دهی به نشانگرها و پاپ‌آپ‌های روی نقشه
• 95. پروژه عملی: پیاده‌سازی کامل تم تاریک/روشن
• 96. پروژه عملی: طراحی صفحه ورود (Login Page)
• 97. پروژه عملی: واکنش‌گرا کردن کامل داشبورد
• 98. ابزارهای توسعه‌دهنده مرورگر (DevTools) برای دیباگ CSS
• 99. بررسی و رفع مشکلات رایج در چیدمان (Layout)
• 100. سازگاری بین مرورگرها و استفاده از پیشوندها (Vendor Prefixes)