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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در فناوری‌های مدیریت ناوگان
• 2. CSS چیست؟ (Cascading Style Sheets)
• 3. نحوه افزودن CSS به یک صفحه وب (External, Internal, Inline)
• 4. آشنایی با ساختار (Syntax) یک قانون CSS
• 5. مفهوم انتخابگرها (Selectors)
• 6. انتخابگرهای اصلی: Element, Class, ID
• 7. نحوه کامنت‌گذاری در CSS
• 8. آشنایی با DevTools مرورگر برای دیباگ CSS
• 9. مفهوم وراثت (Inheritance) در CSS
• 10. ترتیب اعمال استایل‌ها: آبشار (Cascade) و اولویت (Specificity)
• 11. واحدها در CSS: پیکسل (px)
• 12. واحدهای نسبی: em و rem
• 13. واحدهای Viewport: vh و vw
• 14. کار با رنگ‌ها: نام‌های کلیدی، HEX، RGB و RGBA
• 15. مدل رنگی HSL و HSLA
• 16. استایل‌دهی به پس‌زمینه: background-color و background-image
• 17. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 18. خاصیت shorthand برای پس‌زمینه: background
• 19. مبانی استایل‌دهی به متن: color, text-align, text-decoration
• 20. تنظیمات فونت: font-family, font-size, font-weight, font-style
• 21. فاصله‌گذاری در متن: line-height, letter-spacing, word-spacing
• 22. مقدمه‌ای بر Box Model: محتوا، Padding، Border، Margin
• 23. خاصیت box-sizing: content-box در مقابل border-box
• 24. تنظیم عرض و ارتفاع (width و height)
• 25. تنظیمات min/max-width و min/max-height
• 26. استایل‌دهی به حاشیه‌ها (Borders)
• 27. خاصیت display: block, inline, inline-block
• 28. مخفی کردن عناصر: display: none در مقابل visibility: hidden
• 29. مفهوم Position در CSS: static و relative
• 30. موقعیت‌دهی مطلق: position: absolute
• 31. موقعیت‌دهی ثابت: position: fixed و position: sticky
• 32. کنترل لایه‌ها با z-index
• 33. مدیریت سرریز محتوا با overflow
• 34. انتخابگرهای ترکیبی (Combinator Selectors)
• 35. انتخابگرهای ویژگی (Attribute Selectors)
• 36. شبه-کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 37. شبه-کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 38. شبه-عناصر (Pseudo-elements): ::before و ::after
• 39. مقدمه‌ای بر چیدمان Flexbox
• 40. مفاهیم اصلی Flexbox: کانتینر، آیتم، محور اصلی و متقاطع
• 41. ویژگی‌های کانتینر Flex: flex-direction, flex-wrap, justify-content
• 42. ویژگی‌های کانتینر Flex: align-items و align-content
• 43. ویژگی‌های آیتم Flex: flex-grow, flex-shrink, flex-basis
• 44. خاصیت shorthand آیتم Flex: flex
• 45. تغییر ترتیب عناصر با order
• 46. تراز کردن یک آیتم خاص با align-self
• 47. پیاده‌سازی یک هدر داشبورد با Flexbox
• 48. مقدمه‌ای بر چیدمان CSS Grid
• 49. تعریف یک گرید: grid-template-columns و grid-template-rows
• 50. واحد جدید fr در Grid
• 51. فاصله‌گذاری بین خانه‌های گرید: gap, column-gap, row-gap
• 52. مکان‌یابی آیتم‌ها در گرید با شماره خطوط
• 53. ادغام ستون‌ها و سطرها: grid-column و grid-row
• 54. نام‌گذاری خطوط و نواحی گرید (Grid Lines and Areas)
• 55. پیاده‌سازی چیدمان کلی داشبورد مدیریت ناوگان با Grid
• 56. طراحی واکنش‌گرا (Responsive Design) چیست؟
• 57. استفاده از متا تگ Viewport
• 58. رویکرد Mobile-First در طراحی
• 59. آشنایی با Media Queries
• 60. نقاط شکست (Breakpoints) رایج برای دستگاه‌های مختلف
• 61. تکنیک‌های ساخت تصاویر واکنش‌گرا
• 62. ساخت تایپوگرافی واکنش‌گرا
• 63. استایل‌دهی به دکمه‌ها و فراخوان‌ها (Call-to-Action)
• 64. استایل‌دهی به فرم‌ها و فیلدهای ورودی (input)
• 65. استایل‌دهی به برچسب‌ها (labels) و وضعیت‌های اعتبارسنجی (validation states)
• 66. ایجاد Checkbox و Radio Button سفارشی
• 67. استایل‌دهی به منوهای کشویی (select)
• 68. طراحی جداول داده برای نمایش لیست خودروها
• 69. استایل‌دهی به سربرگ، سطرها و سلول‌های جدول
• 70. ایجاد سطرهای شطرنجی (Zebra-striping) برای خوانایی بهتر جداول
• 71. طراحی نشانگرهای وضعیت (Status Indicators): آنلاین، آفلاین، در حرکت
• 72. ساخت پاپ‌آپ‌ها و مودال‌ها (Modals) برای نمایش هشدارها
• 73. ایجاد Tooltip برای آیکون‌ها و نشانگرهای روی نقشه
• 74. استایل‌دهی به نوارهای پیشرفت (Progress Bars)
• 75. استایل‌دهی به تب‌ها (Tabs) برای نمایش‌های چندگانه
• 76. آشنایی با متغیرهای CSS (Custom Properties)
• 77. استفاده از متغیرها برای ساخت تم (Theme): حالت روشن و تاریک
• 78. تابع calc() برای محاسبات دینامیک
• 79. استفاده از گرادیان‌ها (Gradients)
• 80. ایجاد سایه برای عناصر (box-shadow) و متن (text-shadow)
• 81. گرد کردن گوشه‌ها با border-radius
• 82. مقدمه‌ای بر Transitions در CSS
• 83. کنترل Transition ها: property, duration, timing-function, delay
• 84. مقدمه‌ای بر Transformations در CSS
• 85. تغییر مقیاس، چرخش و جابجایی عناصر با transform
• 86. مقدمه‌ای بر انیمیشن‌ها با @keyframes
• 87. ایجاد انیمیشن‌های Loading Spinner برای بارگذاری داده‌ها
• 88. استایل‌دهی به آیکون‌های SVG
• 89. فونت آیکون‌ها (Font Icons) و نحوه استفاده از آن‌ها
• 90. فیلترهای CSS: grayscale, blur, brightness
• 91. حالت‌های ترکیب (Blend Modes)
• 92. اصول معماری CSS: OOCSS و SMACSS
• 93. متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 94. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 95. بهینه‌سازی عملکرد CSS: کوچک‌سازی (Minification)
• 96. بهینه‌سازی عملکرد CSS: کاهش پیچیدگی انتخابگرها
• 97. مفهوم Critical CSS برای بارگذاری سریع‌تر صفحه
• 98. اصول دسترسی‌پذیری (Accessibility) در CSS
• 99. اطمینان از کنتراست رنگ مناسب
• 100. طراحی حالت focus برای عناصر تعاملی