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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. CSS چیست و چرا برای مدیریت ناوگان اهمیت دارد؟
• 3. روش‌های افزودن CSS به HTML (Inline, Internal, External)
• 4. قواعد و سینتکس اصلی CSS (Selector, Property, Value)
• 5. کامنت‌گذاری در CSS و اهمیت آن در پروژه‌های تیمی
• 6. آشنایی با انتخابگرهای پایه (Element, Class, ID)
• 7. مفهوم Cascade (آبشاری) و وراثت (Inheritance)
• 8. اولویت و ویژگی (Specificity) در CSS و نحوه محاسبه آن
• 9. کار با رنگ‌ها (Keywords, HEX, RGB, HSL)
• 10. واحدهای رنگ با شفافیت (RGBA, HSLA)
• 11. استایل‌دهی به پس‌زمینه (background-color, background-image)
• 12. کنترل تکرار و موقعیت پس‌زمینه (background-repeat, background-position)
• 13. اندازه پس‌زمینه (background-size) و الصاق (background-attachment)
• 14. استایل‌دهی به متون: رنگ و ترازبندی (color, text-align)
• 15. تزئین متن (text-decoration) و تغییر حالت (text-transform)
• 16. مقدمه‌ای بر مدل جعبه‌ای (Box Model)
• 17. ویژگی‌های width و height و واحدهای اندازه‌گیری
• 18. ویژگی padding برای ایجاد فاصله داخلی
• 19. ویژگی border (style, width, color)
• 20. ویژگی margin و مفهوم فروریختن حاشیه‌ها (collapsing margins)
• 21. ویژگی box-sizing: content-box در مقابل border-box
• 22. ویژگی outline و تفاوت آن با border
• 23. گرد کردن گوشه‌ها (border-radius)
• 24. ایجاد سایه برای جعبه‌ها (box-shadow)
• 25. کنترل سرریز محتوا (overflow)
• 26. انتخابگرهای ترکیبی (Combinators: descendant, child, sibling)
• 27. انتخابگرهای صفتی (Attribute Selectors)
• 28. انتخابگر عمومی (*) و گروه‌بندی انتخابگرها
• 29. شبه-کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 30. شبه-کلاس‌های مربوط به لینک: :link, :visited
• 31. شبه-کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 32. شبه-کلاس‌های فرم: :checked, :disabled, :required
• 33. شبه-المان‌ها (Pseudo-elements): ::before, ::after
• 34. کاربرد عملی ::before و ::after در ساخت آیکون‌ها و لیبل‌ها
• 35. شبه-المان‌های ::first-letter و ::first-line
• 36. کار با فونت‌ها: font-family و فونت‌های امن وب
• 37. ایمپورت فونت‌های سفارشی با @font-face
• 38. استفاده از سرویس‌های فونت (مانند Google Fonts)
• 39. اندازه فونت (font-size) و واحدهای نسبی (em, rem)
• 40. ضخامت فونت (font-weight) و استایل فونت (font-style)
• 41. ارتفاع خط (line-height) و فاصله بین حروف (letter-spacing)
• 42. فاصله بین کلمات (word-spacing)
• 43. ویژگی مختصرنویسی font
• 44. استایل‌دهی به لیست‌ها (list-style-type, list-style-image)
• 45. استایل‌دهی به جداول: border, padding, و border-collapse
• 46. ایجاد جداول گورخری (Zebra-striping) برای خوانایی بهتر داده‌ها
• 47. ویژگی display: block, inline, inline-block
• 48. مخفی کردن المان‌ها: display: none در مقابل visibility: hidden
• 49. موقعیت‌یابی (Positioning): static, relative
• 50. موقعیت‌یابی: absolute و اولین والد positioned
• 51. موقعیت‌یابی: fixed برای ساخت هدر و فوتر ثابت
• 52. موقعیت‌یابی: sticky برای المان‌های چسبان
• 53. کنترل لایه‌ها با z-index
• 54. مقدمه‌ای بر Flexbox: چیدمان تک‌بعدی
• 55. راه‌اندازی یک Flex Container (display: flex)
• 56. جهت‌دهی آیتم‌ها در Flexbox (flex-direction)
• 57. شکستن خط در Flexbox (flex-wrap)
• 58. ترازبندی در محور اصلی (justify-content)
• 59. ترازبندی در محور متقاطع (align-items)
• 60. ترازبندی خطوط چندگانه (align-content)
• 61. کنترل آیتم‌های Flex: order, flex-grow, flex-shrink, flex-basis
• 62. مقدمه‌ای بر CSS Grid: چیدمان دو بعدی
• 63. راه‌اندازی یک Grid Container (display: grid)
• 64. تعریف ستون‌ها و ردیف‌ها (grid-template-columns, grid-template-rows)
• 65. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 66. نام‌گذاری نواحی Grid (grid-template-areas) برای چیدمان داشبورد
• 67. ایجاد فاصله بین آیتم‌ها (gap, column-gap, row-gap)
• 68. ترازبندی آیتم‌ها در Grid (justify-items, align-items)
• 69. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 70. مفهوم Viewport و تگ meta viewport
• 71. آشنایی با Media Queries و Breakpointها
• 72. رویکرد Mobile-First در طراحی واکنش‌گرا
• 73. Breakpoint های رایج برای دستگاه‌های مختلف
• 74. ساخت منوهای واکنش‌گرا (Hamburger Menu)
• 75. تصاویر واکنش‌گرا (Responsive Images)
• 76. ویدیو و المان‌های embed واکنش‌گرا
• 77. طراحی جداول واکنش‌گرا برای نمایش داده‌های ناوگان
• 78. استفاده از واحدهای واکنش‌گرا (vw, vh, %, rem)
• 79. مقدمه‌ای بر Transitions
• 80. کنترل زمان و تابع زمانی Transition (transition-timing-function)
• 81. مقدمه‌ای بر Animations و @keyframes
• 82. کنترل تکرار و جهت انیمیشن
• 83. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 84. تبدیل‌های سه بعدی (3D Transforms)
• 85. فیلترهای CSS (blur, grayscale, brightness)
• 86. ترکیب المان‌ها با blend-mode
• 87. ایجاد افکت‌های Hover پیشرفته برای دکمه‌ها و کارت‌ها
• 88. انیمیشن‌های وضعیت برای داشبورد (مثال: نشانگر آنلاین/آفلاین)
• 89. متغیرهای CSS (Custom Properties) برای تم‌بندی
• 90. کاربرد عملی متغیرها: ساخت Dark Mode برای داشبورد
• 91. توابع CSS: calc() برای محاسبات دینامیک
• 92. توابع CSS: min(), max(), clamp() برای طراحی انعطاف‌پذیر
• 93. ویژگی object-fit برای کنترل تصاویر
• 94. استایل‌دهی پیشرفته به فرم‌ها و فیلدهای ورودی
• 95. استایل‌دهی سفارشی به Checkbox و Radio Button
• 96. استایل‌دهی به Scrollbar
• 97. سازماندهی فایل‌های CSS: رویکرد ماژولار
• 98. متدولوژی BEM برای نام‌گذاری کلاس‌ها در پروژه‌های بزرگ
• 99. بهینه‌سازی عملکرد CSS (Minification, Critical CSS)
• 100. پروژه نهایی: طراحی یک ویجت داشبورد مدیریت ناوگان