فلش‌کارت‌های آموزشی CSS for Fleet Management Market

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

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

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

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر CSS و نقش آن در رابط کاربری مدیریت ناوگان
• 2. نحوه افزودن CSS به HTML: External, Internal, Inline
• 3. سینتکس پایه CSS: انتخابگر، خصوصیت و مقدار
• 4. آشنایی با کامنت‌گذاری در CSS
• 5. انتخابگرهای اصلی: Element, Class, و ID
• 6. مفهوم آبشاری بودن (Cascade) و اولویت در CSS
• 7. وراثت (Inheritance) و مقدار initial
• 8. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 9. واحدها در CSS: واحدهای مطلق (px, pt) و نسبی (em, rem, %, vw, vh)
• 10. کار با رنگ‌ها: نام رنگ، HEX، RGB و HSL
• 11. تنظیمات پس‌زمینه: background-color و background-image
• 12. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 13. خصوصیت مختصرنویسی background
• 14. کار با Border و استایل‌های مختلف آن
• 15. گرد کردن گوشه‌ها با border-radius
• 16. سایه‌ها: افزودن عمق با box-shadow
• 17. مبانی تایپوگرافی: font-family و font-size
• 18. وزن و استایل فونت: font-weight و font-style
• 19. تراز کردن متن: text-align
• 20. تزئین متن: text-decoration
• 21. فاصله‌گذاری حروف و کلمات: letter-spacing و word-spacing
• 22. ارتفاع خط و خوانایی متن با line-height
• 23. استفاده از فونت‌های سفارشی با @font-face
• 24. انتخابگرهای ترکیبی (Combinator Selectors): Descendant, Child, Sibling
• 25. انتخابگرهای ویژگی (Attribute Selectors)
• 26. کلاس‌های کاذب (Pseudo-classes): :hover, :focus, :active
• 27. انتخاب فرزندان خاص: :first-child, :last-child, :nth-child
• 28. عناصر کاذب (Pseudo-elements): ::before و ::after
• 29. مفهوم Display: block, inline, و inline-block
• 30. پنهان کردن عناصر: display: none در مقابل visibility: hidden
• 31. موقعیت‌یابی (Positioning): static, relative, absolute
• 32. موقعیت‌یابی ثابت برای هدر داشبورد: position: fixed
• 33. موقعیت‌یابی چسبنده برای سایدبار: position: sticky
• 34. کنترل لایه‌ها با z-index
• 35. مقدمه‌ای بر Flexbox: چرا برای داشبوردهای مدیریت ناوگان ایده‌آل است؟
• 36. ایجاد یک Flex Container با display: flex
• 37. کنترل جهت آیتم‌ها با flex-direction
• 38. شکستن خط در Flexbox با flex-wrap
• 39. تراز کردن آیتم‌ها در محور اصلی: justify-content
• 40. تراز کردن آیتم‌ها در محور متقاطع: align-items
• 41. کنترل تراز چندین خط با align-content
• 42. تنظیم رشد و کوچک شدن آیتم‌ها: flex-grow, flex-shrink, flex-basis
• 43. مختصرنویسی flex
• 44. کنترل ترتیب نمایش آیتم‌ها با order
• 45. مقدمه‌ای بر Grid Layout
• 46. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 47. ایجاد فاصله بین آیتم‌ها با gap
• 48. موقعیت‌دهی آیتم‌ها در گرید بر اساس شماره خط
• 49. نام‌گذاری خطوط گرید برای خوانایی بهتر
• 50. موقعیت‌دهی با نام نواحی: grid-template-areas
• 51. تراز کردن آیتم‌ها در Grid
• 52. استایل‌دهی به لیست‌ها: list-style-type, list-style-position
• 53. طراحی جداول داده برای گزارشات ناوگان: table, tr, th, td
• 54. استایل‌دهی به ردیف‌های زوج و فرد جدول برای خوانایی
• 55. طراحی هدر ثابت برای جداول طولانی
• 56. استایل‌دهی به فرم‌ها: input, textarea, select
• 57. طراحی دکمه‌های تعاملی و فراخوان به عمل (Call-to-Action)
• 58. استایل‌دهی به Checkbox و Radio Button سفارشی
• 59. گروه‌بندی فیلدهای فرم با fieldset و legend
• 60. نمایش وضعیت فرم: اعتبارسنجی با :valid و :invalid
• 61. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 62. کار با Viewport متا تگ
• 63. مفاهیم Mobile-First در مقابل Desktop-First
• 64. استفاده از Media Queries برای نقاط شکست (Breakpoints)
• 65. طراحی واکنش‌گرا برای جداول داده
• 66. ایجاد منوی ناوبری واکنش‌گرا (همبرگری)
• 67. تصاویر واکنش‌گرا با max-width: 100%
• 68. استفاده از واحدهای vw و vh برای تایپوگرافی واکنش‌گرا
• 69. تبدیل‌های دو بعدی: transform: translate, rotate, scale
• 70. تبدیل‌های سه بعدی: 3D Transforms
• 71. انتقال‌های نرم با Transition
• 72. کنترل زمان‌بندی Transition با transition-timing-function
• 73. انیمیشن‌های سفارشی با @keyframes
• 74. کنترل انیمیشن‌ها: animation-name, duration, iteration-count
• 75. فیلترهای تصویری و گرافیکی: filter: blur, grayscale, brightness
• 76. ایجاد افکت شیشه‌ای (Glassmorphism) برای ویجت‌های داشبورد
• 77. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 78. کاربرد تابع calc() برای محاسبات دینامیک
• 79. مفهوم Specificity و نحوه محاسبه آن
• 80. استفاده از !important و زمان مناسب برای آن
• 81. سازماندهی فایل‌های CSS برای پروژه‌های بزرگ
• 82. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 83. مقدمه‌ای بر پیش‌پردازنده‌های CSS: Sass/SCSS
• 84. متغیرها و Nesting در Sass
• 85. استفاده از Mixins و Extends در Sass
• 86. توابع و عملیات ریاضی در Sass
• 87. تقسیم‌بندی کد با Partials و @import در Sass
• 88. بهینه‌سازی عملکرد CSS: کوچک‌سازی (Minification)
• 89. شناسایی و حذف CSS استفاده نشده
• 90. بارگذاری بهینه فونت‌ها
• 91. استایل‌دهی به عناصر نقشه (مانند Leaflet یا Mapbox)
• 92. طراحی Pop-up و Tooltip برای نمایش اطلاعات خودرو روی نقشه
• 93. ایجاد نشانگرهای وضعیت آنلاین/آفلاین/در حرکت
• 94. طراحی نمودارها و گیج‌های نمایش داده با CSS خالص
• 95. استایل‌دهی به کارت‌ها (Cards) برای نمایش اطلاعات هر خودرو
• 96. طراحی نوار پیشرفت (Progress Bar) برای نمایش وضعیت تعمیرات
• 97. ساخت یک سیستم تم روشن و تاریک (Light/Dark Mode) برای داشبورد
• 98. استایل‌دهی به اعلان‌ها (Notifications) و هشدارها
• 99. پروژه نهایی: طراحی کامل یک ویجت داشبورد مدیریت ناوگان
• 100. **طراحی واکنشگرا (Responsive Design) با CSS: Media Queries و Flexbox/Grid Layout برای انطباق با دستگاه‌های مختلف**