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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در سیستم‌های مدیریت ناوگان
• 2. نحوه اتصال CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. آشنایی با سینتکس CSS: انتخابگر، خصوصیت و مقدار
• 4. کامنت‌گذاری در CSS
• 5. انتخابگرهای اصلی: عنصر، کلاس و شناسه
• 6. انتخابگرهای ترکیبی و گروه‌بندی
• 7. انتخابگرهای فرزند و نواده
• 8. انتخابگرهای همسایه و خواهر و برادر عمومی
• 9. انتخابگرهای صفت (Attribute Selectors)
• 10. مفهوم آبشار (Cascade) در CSS
• 11. اولویت و وزن انتخابگرها (Specificity)
• 12. مفهوم وراثت (Inheritance)
• 13. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 14. خصوصیت box-sizing: content-box در مقابل border-box
• 15. واحدهای اندازه‌گیری: مطلق (px, pt) و نسبی (em, rem)
• 16. رنگ‌ها در CSS: نام، HEX، RGB و HSL
• 17. کار با شفافیت: RGBA و HSLA
• 18. استایل‌دهی به متون: font-family و font-size
• 19. استایل‌دهی به متون: font-weight و font-style
• 20. ترازبندی و دکوراسیون متن
• 21. مقدمه‌ای بر چیدمان: خصوصیت display
• 22. چیدمان با display: block, inline, inline-block
• 23. مقدمه‌ای بر Flexbox برای چیدمان داشبورد
• 24. خصوصیات Flex Container: flex-direction و flex-wrap
• 25. خصوصیات Flex Container: justify-content
• 26. خصوصیات Flex Container: align-items و align-content
• 27. خصوصیات Flex Item: flex-grow, flex-shrink, flex-basis
• 28. خصوصیات Flex Item: order و align-self
• 29. پروژه عملی Flexbox: ساخت نوار ناوبری اصلی
• 30. مقدمه‌ای بر CSS Grid برای چیدمان صفحه اصلی
• 31. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 32. فاصله‌گذاری بین آیتم‌ها با gap
• 33. مکان‌یابی آیتم‌ها در Grid
• 34. چیدمان با grid-template-areas
• 35. ترازبندی در Grid: justify-items و align-items
• 36. مقدمه‌ای بر Position: static و relative
• 37. استفاده از position: absolute برای لایه‌های روی هم
• 38. استفاده از position: fixed برای عناصر ثابت
• 39. استفاده از position: sticky برای هدر جداول داده
• 40. مدیریت لایه‌ها با z-index
• 41. استایل‌دهی به فرم‌ها: input و textarea
• 42. استایل‌دهی به دکمه‌ها و وضعیت‌های آن‌ها (hover, active)
• 43. استایل‌دهی سفارشی به Checkbox و Radio Button
• 44. چیدمان فرم‌ها با Flexbox
• 45. استایل‌دهی به وضعیت‌های اعتبارسنجی فرم (:valid, :invalid)
• 46. ساختاردهی جداول داده: athead, tbody, tfoot
• 47. استایل‌دهی به هدر و فوتر جداول
• 48. استایل‌دهی به سطرها و سلول‌های جدول
• 49. ایجاد سطرهای شطرنجی با شبه‌کلاس nth-child
• 50. طراحی جداول واکنش‌گرا (Responsive)
• 51. ساخت منوی کناری (Sidebar) برای ناوبری
• 52. استایل‌دهی به لیست خودروها و رانندگان
• 53. طراحی کارت‌ها (Cards) برای نمایش اطلاعات خلاصه
• 54. استایل‌دهی به شاخص‌های کلیدی عملکرد (KPIs) در داشبورد
• 55. طراحی نوارهای پیشرفت (Progress Bars)
• 56. استفاده از فونت‌های آیکون (Icon Fonts) برای نمایش وضعیت‌ها
• 57. کار با تصاویر SVG برای آیکون‌های سفارشی
• 58. استایل‌دهی به کانتینر نقشه
• 59. سفارشی‌سازی پنجره‌های اطلاعاتی (InfoWindows) روی نقشه
• 60. استایل‌دهی به مسیرها (Polylines) روی نقشه
• 61. طراحی مودال‌ها (Modals) و پاپ‌آپ‌ها
• 62. استایل‌دهی به مسیر راهنما (Breadcrumbs)
• 63. استایل‌دهی به صفحه‌بندی (Pagination)
• 64. ایجاد راهنمای ابزار (Tooltips) سفارشی با CSS
• 65. شبه‌کلاس‌های لینک: :link, :visited, :hover, :active
• 66. شبه‌کلاس‌های ورودی: :focus, :checked, :disabled
• 67. شبه‌کلاس‌های ساختاری: :first-child, :last-child
• 68. کاربرد پیشرفته :nth-child و :nth-of-type
• 69. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 70. کاربرد عملی ::before و ::after برای افزودن آیکون
• 71. مقدمه‌ای بر Transition ها برای انیمیشن‌های نرم
• 72. کنترل Transition ها: property, duration, timing-function
• 73. مقدمه‌ای بر انیمیشن‌ها با @keyframes
• 74. کنترل انیمیشن‌ها: animation-name, duration, iteration-count
• 75. تبدیل‌های دو بعدی: translate(), rotate(), scale()
• 76. تبدیل‌های سه بعدی: perspective و transform-style
• 77. متغیرها در CSS (Custom Properties)
• 78. محدوده تعریف متغیرها: Global و Local
• 79. کاربرد متغیرها در ایجاد تم تاریک/روشن (Dark/Light Theme)
• 80. استفاده از تابع ()calc برای محاسبات پویا
• 81. استفاده از توابع رنگی: lighten(), darken()
• 82. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 83. مفهوم Viewport و متا تگ آن
• 84. کار با Media Queries برای ایجاد Breakpoint
• 85. رویکرد Mobile-First در مقابل Desktop-First
• 86. واحدهای اندازه‌گیری واکنش‌گرا: vw, vh, vmin, vmax
• 87. تکنیک‌های واکنش‌گرا کردن تصاویر
• 88. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 89. متغیرها و تودرتویی (Nesting) در SASS
• 90. استفاده از Mixin ها در SASS برای کدهای قابل استفاده مجدد
• 91. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 92. معماری CSS برای پروژه‌های بزرگ
• 93. بهینه‌سازی عملکرد CSS
• 94. فشرده‌سازی (Minification) فایل‌های CSS
• 95. مفهوم Critical CSS
• 96. اصول دسترسی‌پذیری وب (Accessibility) در CSS
• 97. مدیریت کنتراست رنگ برای خوانایی بهتر
• 98. استفاده از خصوصیت a:focus-visible برای دسترسی‌پذیری
• 99. سازگاری بین مرورگرها و استفاده از پیشوندها (Prefixes)
• 100. ابزارهای توسعه‌دهنده مرورگر برای دیباگ کردن CSS