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

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

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

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

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

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

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

• 1. نقش CSS در طراحی رابط کاربری برنامه‌های مدیریت ناوگان
• 2. ساختار پایه CSS: انتخاب‌گرها، ویژگی‌ها، مقادیر
• 3. روش‌های درج CSS: درون‌خطی، داخلی، خارجی
• 4. استفاده از ابزارهای توسعه‌دهنده مرورگر برای بررسی CSS
• 5. اصول UI/UX در داشبوردهای مدیریت ناوگان و نقش CSS
• 6. انتخاب‌گرهای عمومی، نوع، کلاس و ID
• 7. انتخاب‌گرهای ویژگی برای داده‌های دینامیک (مانند `[data-status="active"]`)
• 8. ترکیب‌کننده‌های فرزند و نواده
• 9. ترکیب‌کننده‌های همسایه مجاور و همسایه عمومی
• 10. گروه‌بندی انتخاب‌گرها برای اعمال یکسان استایل
• 11. شبه‌کلاس‌ها: `hover`, `active`, `focus` برای تعاملات
• 12. شبه‌کلاس‌ها: `first-child`, `last-child`, `nth-child` برای لیست‌ها و جداول
• 13. شبه‌کلاس‌ها: `target`, `checked`, `disabled`, `empty` برای وضعیت‌های UI
• 14. شبه‌عناصر: `::before`, `::after` برای تزئین محتوا
• 15. شبه‌عناصر: `::first-letter`, `::first-line`, `::selection`
• 16. رنگ‌ها: `color`, `background-color` (Hex, RGB, HSL, RGBA, HSLA)
• 17. متن: `font-family`, `font-size`, `font-weight`, `font-style`
• 18. تراز متن و دکوراسیون: `text-align`, `text-decoration`, `text-transform`
• 19. فاصله خطوط و حروف: `line-height`, `letter-spacing`, `word-spacing`
• 20. استایل‌دهی به لینک‌ها و دکمه‌های ناوبری
• 21. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 22. `box-sizing`: کنترل نحوه محاسبه ابعاد
• 23. تعیین عرض و ارتفاع (`width`, `height`, `min-width`, `max-width`)
• 24. Border ها: `border-width`, `border-style`, `border-color`
• 25. `border-radius` برای گوشه‌های گرد
• 26. `outline` Property برای نمایش تاکید
• 27. `display` Property: Block, Inline, Inline-Block, None
• 28. `overflow`: مدیریت محتوای سرریز
• 29. `list-style` برای لیست‌های وسایل نقلیه
• 30. `cursor` Property برای بازخورد کاربر
• 31. مقدمه‌ای بر Flexbox برای چیدمان‌های انعطاف‌پذیر
• 32. تعریف کانتینر فلکس: `display: flex`
• 33. `flex-direction`: جهت‌دهی عناصر (ردیف، ستون)
• 34. `flex-wrap`: شکست خطوط عناصر
• 35. `justify-content`: تراز افقی عناصر در کانتینر
• 36. `align-items`: تراز عمودی عناصر در کانتینر
• 37. `align-content`: تراز خطوط فلکس
• 38. `gap` Property (جدیدتر): فاصله بین آیتم‌ها
• 39. `order` Property: تغییر ترتیب نمایش آیتم‌ها
• 40. `flex-grow`: رشد آیتم‌ها برای پر کردن فضا
• 41. `flex-shrink`: کوچک شدن آیتم‌ها برای جا شدن
• 42. `flex-basis`: اندازه اولیه آیتم
• 43. `flex` Shorthand: ترکیب `grow`, `shrink`, `basis`
• 44. `align-self`: تراز انفرادی یک آیتم
• 45. طراحی نوار ناوبری و کارت‌های اطلاعات وسایل نقلیه با Flexbox
• 46. مقدمه‌ای بر CSS Grid برای چیدمان‌های دو بعدی
• 47. تعریف کانتینر گرید: `display: grid`
• 48. `grid-template-columns`: تعریف ستون‌های گرید
• 49. `grid-template-rows`: تعریف ردیف‌های گرید
• 50. `grid-gap`, `column-gap`, `row-gap`: فاصله‌گذاری آیتم‌های گرید
• 51. واحد `fr` و تابع `repeat()` برای شبکه‌های انعطاف‌پذیر
• 52. تابع `minmax()` برای ابعاد واکنش‌گرا
• 53. `grid-template-areas`: نام‌گذاری مناطق گرید برای خوانایی
• 54. قرار دادن آیتم‌ها با `grid-column` و `grid-row`
• 55. `grid-area` Shorthand برای تعیین منطقه و موقعیت
• 56. گرید ضمنی و چینش خودکار (`grid-auto-flow`)
• 57. `justify-items`, `align-items`, `place-items` برای تراز آیتم‌ها
• 58. `justify-content`, `align-content`, `place-content` برای تراز محتوا
• 59. طراحی طرح‌بندی اصلی داشبورد مدیریت ناوگان با CSS Grid
• 60. ساخت جداول و فرم‌های پیچیده با استفاده از CSS Grid
• 61. اصول طراحی واکنش‌گرا برای برنامه‌های مدیریت ناوگان
• 62. تگ `viewport` برای سازگاری با دستگاه‌های موبایل
• 63. مقدمه‌ای بر Media Queries برای استایل‌های شرطی
• 64. استراتژی نقاط شکست (Breakpoints) برای دسکتاپ، تبلت و موبایل
• 65. استفاده از `min-width` و `max-width` در Media Queries
• 66. پرس‌وجوهای جهت (Orientation Queries)
• 67. تصاویر و محتوای جاسازی‌شده روان (`fluid images`)
• 68. تایپوگرافی واکنش‌گرا با واحد‌های `rem`, `em`, `vw`
• 69. رویکرد Mobile-First در طراحی UI ناوگان
• 70. طراحی و تطبیق منوهای ناوبری برای صفحات کوچک (منوی همبرگری)
• 71. بهینه‌سازی نمایش جداول داده‌ای برای واکنش‌گرایی
• 72. تست و اشکال‌زدایی طرح‌بندی‌های واکنش‌گرا
• 73. `opacity` و `visibility`: کنترل شفافیت و نمایش
• 74. `box-shadow` برای افزودن عمق به کارت‌ها و پنل‌ها
• 75. `text-shadow` برای متن‌های برجسته
• 76. گرادیان‌ها: `linear-gradient` و `radial-gradient` برای پس‌زمینه
• 77. مقدمه‌ای بر Transitions CSS برای تغییرات روان
• 78. ویژگی‌های Transition: `property`, `duration`, `timing-function`, `delay`
• 79. Transforms: `translate()`, `rotate()`, `scale()`, `skew()`
• 80. Keyframe Animations: ساخت انیمیشن‌های پیچیده
• 81. ویژگی‌های Animation: `name`, `duration`, `iteration-count`, `direction`, `fill-mode`
• 82. فیلترهای CSS: `blur`, `grayscale`, `brightness` برای تصاویر و آیکون‌ها
• 83. آبشار CSS (Cascade)، اولویت‌بندی (Specificity) و وراثت (Inheritance)
• 84. استفاده از `!important` و دلایل پرهیز از آن
• 85. ویژگی `position`: `static`, `relative`, `absolute`, `fixed`
• 86. `z-index` برای مدیریت ترتیب روی هم قرارگیری عناصر
• 87. `sticky` Positioning برای سربرگ‌ها و سایدبارهای ثابت
• 88. متغیرهای CSS (Custom Properties) برای مدیریت تم‌ها
• 89. سازماندهی CSS با روش‌های نام‌گذاری (مانند اصول BEM)
• 90. مقدمه‌ای بر پیش‌پردازنده‌های CSS (مانند Sass و Less)
• 91. مدولار کردن CSS برای توسعه مبتنی بر کامپوننت
• 92. ملاحظات دسترس‌پذیری وب (Accessibility) در CSS
• 93. بهینه‌سازی عملکرد CSS: Reflows و Repaints
• 94. `will-change` برای بهینه‌سازی انیمیشن‌ها
• 95. استفاده و سفارشی‌سازی فریمورک‌های CSS (مفاهیم Bootstrap, Tailwind CSS)
• 96. `clip-path` برای اشکال هندسی پیچیده
• 97. `mask-image` و `mask-mode` برای اعمال ماسک
• 98. `scroll-behavior` برای اسکرول روان
• 99. طراحی حالت تاریک (Dark Mode) برای داشبوردهای ناوگان
• 100. معماری CSS مقیاس‌پذیر برای سیستم‌های بزرگ مدیریت ناوگان