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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و مفاهیم پایه
• 2. CSS چیست و چرا از آن استفاده می‌کنیم؟
• 3. نحوه افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 4. قوانین و سینتکس پایه CSS
• 5. کامنت‌گذاری در CSS
• 6. معرفی ابزارهای توسعه‌دهنده مرورگر (Developer Tools)
• 7. آشنایی با CSS Reset و Normalize.css
• 8. مفهوم آبشاری بودن (Cascade) در CSS
• 9. مفهوم وراثت (Inheritance)
• 10. مفهوم اولویت (Specificity)
• 11. انتخابگرهای پایه: عنصر، کلاس و شناسه (ID)
• 12. انتخابگرهای ترکیبی (Combinators)
• 13. انتخابگرهای صفت (Attribute Selectors)
• 14. شبه-کلاس‌ها (Pseudo-classes) مانند :hover و :focus
• 15. شبه-عناصر (Pseudo-elements) مانند ::before و ::after
• 16. انتخابگر عمومی (*) و کاربردهای آن
• 17. واحدها در CSS: واحدهای مطلق (px, pt)
• 18. واحدها در CSS: واحدهای نسبی (em, rem, %, vh, vw)
• 19. کار با رنگ‌ها: نام، HEX، RGB و RGBA
• 20. کار با رنگ‌ها: HSL و HSLA
• 21. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 22. ویژگی box-sizing: content-box در مقابل border-box
• 23. تنظیم عرض و ارتفاع (Width & Height)
• 24. ویژگی‌های min-width, max-width, min-height, max-height
• 25. کار با پس‌زمینه: background-color و background-image
• 26. ویژگی‌های پس‌زمینه: background-repeat, position, size
• 27. گرادینت‌های خطی و شعاعی (Gradients)
• 28. کار با حاشیه‌ها (Borders)
• 29. ویژگی border-radius برای گرد کردن گوشه‌ها
• 30. ویژگی box-shadow برای ایجاد سایه
• 31. مبانی تایپوگرافی: font-family و font-size
• 32. ویژگی‌های فونت: font-weight, font-style, font-variant
• 33. ویژگی‌های متن: text-align, text-decoration, text-transform
• 34. فاصله‌گذاری در متن: line-height, letter-spacing, word-spacing
• 35. استفاده از فونت‌های سفارشی با @font-face
• 36. استایل‌دهی به لیست‌ها (ul, ol, li)
• 37. مفهوم Display: بلاک، اینلاین و اینلاین-بلاک
• 38. مخفی کردن عناصر: display: none در مقابل visibility: hidden
• 39. مقدمه‌ای بر Flexbox
• 40. ویژگی‌های Flex Container: flex-direction, flex-wrap
• 41. ویژگی‌های Flex Container: justify-content
• 42. ویژگی‌های Flex Container: align-items, align-content
• 43. ویژگی‌های Flex Item: order, flex-grow, flex-shrink
• 44. ویژگی‌های Flex Item: flex-basis و flex
• 45. تراز کردن آیتم‌ها در Flexbox
• 46. کاربرد عملی Flexbox: ساخت نوار ناوبری (Navbar)
• 47. کاربرد عملی Flexbox: طراحی کارت‌های واکنش‌گرا
• 48. مقدمه‌ای بر CSS Grid
• 49. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 50. واحد fr در Grid
• 51. ایجاد فاصله بین آیتم‌ها با gap
• 52. جایگذاری آیتم‌ها در Grid با grid-column/row
• 53. نام‌گذاری خطوط و نواحی در Grid
• 54. تراز کردن آیتم‌ها در Grid
• 55. ساخت یک طرح‌بندی پیچیده داشبورد با Grid
• 56. مفهوم Position: static, relative
• 57. مفهوم Position: absolute, fixed
• 58. مفهوم Position: sticky
• 59. کنترل لایه‌ها با z-index
• 60. مفهوم شناورسازی (Float) و کاربردهای قدیمی آن
• 61. پاک‌سازی Float ها (Clearing Floats)
• 62. تکنیک‌های استایل‌دهی به فرم‌ها: Input و Textarea
• 63. استایل‌دهی به دکمه‌ها (Buttons) و حالت‌های مختلف آن
• 64. استایل‌دهی به Checkbox و Radio Button های سفارشی
• 65. استایل‌دهی به منوهای کشویی (Select)
• 66. استایل‌دهی به جداول داده (Data Tables)
• 67. واکنش‌گرا کردن جداول داده برای پلتفرم مدیریت ناوگان
• 68. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 69. استفاده از متا تگ Viewport
• 70. مفهوم Media Queries
• 71. رویکرد Mobile-First در مقابل Desktop-First
• 72. نقاط شکست (Breakpoints) رایج
• 73. ایجاد تصاویر واکنش‌گرا
• 74. تایپوگرافی واکنش‌گرا با واحدهای نسبی و clamp()
• 75. ساخت منوی ناوبری واکنش‌گرا (Hamburger Menu)
• 76. مقدمه‌ای بر Transition ها
• 77. ویژگی‌های transition-property, duration, timing-function, delay
• 78. مقدمه‌ای بر Transform های دو بعدی
• 79. توابع Transform: translate(), rotate(), scale()
• 80. توابع Transform: skew()
• 81. مقدمه‌ای بر انیمیشن‌ها با @keyframes
• 82. ویژگی‌های animation-name, duration, iteration-count
• 83. فیلترهای CSS: blur, grayscale, brightness
• 84. مفهوم Blending Modes
• 85. استفاده از متغیرهای CSS (Custom Properties)
• 86. دامنه (Scope) متغیرهای CSS
• 87. تابع calc() برای محاسبات دینامیک
• 88. توابع min(), max(), و clamp()
• 89. استفاده از شبه-کلاس :nth-child برای استایل‌دهی پیشرفته
• 90. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 91. مفهوم متغیرها و Nesting در Sass
• 92. مفهوم Mixin و Extend در Sass
• 93. روش‌شناسی BEM برای نام‌گذاری کلاس‌ها
• 94. بهینه‌سازی عملکرد CSS: کاهش حجم فایل
• 95. بهینه‌سازی عملکرد CSS: انتخابگرهای بهینه
• 96. مبانی دسترسی‌پذیری (Accessibility) در CSS
• 97. طراحی داشبورد اصلی پلتفرم مدیریت ناوگان
• 98. استایل‌دهی به ویجت‌های کلیدی (KPI Widgets)
• 99. استایل‌دهی به نمودارها و گراف‌ها (Chart.js, D3.js)
• 100. استایل‌دهی به نقشه‌های تعاملی (Leaflet, Mapbox)