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

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

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

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

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

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

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

• 1. مقدمه‌ای بر دوره و چالش‌های UI در مدیریت ناوگان
• 2. CSS چیست و چه نقشی در یک برنامه مدیریت ناوگان دارد؟
• 3. روش‌های افزودن CSS به HTML: خارجی، داخلی و درون‌خطی
• 4. آشنایی با سینتکس CSS: انتخاب‌گر، خصوصیت و مقدار
• 5. کامنت‌گذاری در CSS و اهمیت آن در پروژه‌های تیمی
• 6. آشنایی با ابزارهای توسعه‌دهنده مرورگر برای دیباگ CSS
• 7. مفهوم آبشاری بودن (Cascade) و اولویت در استایل‌ها
• 8. وراثت (Inheritance) و نحوه عملکرد آن
• 9. مقادیر کلیدی: `initial`, `inherit`, `unset`, و `revert`
• 10. انتخاب‌گرهای پایه: نوع (Type)، کلاس (Class) و شناسه (ID)
• 11. انتخاب‌گرهای ترکیبی: نسل، فرزند، برادر مجاور و عمومی
• 12. انتخاب‌گرهای ویژگی (Attribute Selectors)
• 13. شبه‌کلاس‌ها (Pseudo-classes): `hover`, `focus`, `active`
• 14. استایل‌دهی به وضعیت‌های مختلف لینک‌ها: `:link`, `:visited`
• 15. شبه‌کلاس‌های ساختاری: `first-child`, `last-child`, `nth-child`
• 16. استفاده از `nth-child` برای استایل‌دهی سطرهای زوج و فرد در جداول
• 17. شبه‌المان‌ها (Pseudo-elements): `::before` و `::after`
• 18. کاربرد `::before` و `::after` برای افزودن آیکون به لیست‌ها
• 19. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 20. اهمیت `box-sizing: border-box` در چیدمان‌های قابل پیش‌بینی
• 21. واحدهای اندازه‌گیری مطلق (`px`, `pt`) و نسبی (`%`, `em`, `rem`)
• 22. تفاوت `em` و `rem` و کاربرد هرکدام
• 23. واحدهای Viewport: `vw`, `vh`, `vmin`, `vmax`
• 24. کار با رنگ‌ها: نام، HEX، RGB و RGBA
• 25. شفافیت با `opacity` در مقابل کانال آلفا (RGBA, HSLA)
• 26. استایل‌دهی به پس‌زمینه: `background-color` و `background-image`
• 27. کنترل تصویر پس‌زمینه: `background-repeat`, `position`, `size`, `attachment`
• 28. استفاده از چندین تصویر پس‌زمینه
• 29. پس‌زمینه‌های گرادیان (Linear and Radial Gradients)
• 30. استایل‌دهی به متون: `font-family`, `font-size`, `font-weight`, `font-style`
• 31. فونت‌های امن وب و استفاده از فونت‌های گوگل
• 32. بارگذاری فونت‌های سفارشی با `@font-face`
• 33. خصوصیات پیشرفته متن: `text-align`, `text-decoration`, `line-height`, `letter-spacing`
• 34. استایل‌دهی به لیست‌های مرتب و نامرتب
• 35. مقدمه‌ای بر خصوصیت `display`: `block`, `inline`, `inline-block`
• 36. پنهان کردن المان‌ها: `display: none` در مقابل `visibility: hidden`
• 37. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 38. محورهای اصلی و متقاطع در Flexbox
• 39. ویژگی‌های کانتینر Flex: `display`, `flex-direction`, `flex-wrap`, `justify-content`
• 40. تراز کردن آیتم‌ها در Flexbox: `align-items` و `align-content`
• 41. ویژگی‌های آیتم‌های Flex: `flex-grow`, `flex-shrink`, `flex-basis`
• 42. خاصیت کوتاه `flex`
• 43. مثال عملی Flexbox: ساخت نوار ناوبری داشبورد
• 44. مثال عملی Flexbox: طراحی کارت‌های اطلاعات خودرو
• 45. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 46. تعریف ستون‌ها و ردیف‌ها با `grid-template-columns` و `grid-template-rows`
• 47. واحد `fr` در Grid و کاربرد آن
• 48. ایجاد فاصله بین آیتم‌ها با `gap`
• 49. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 50. نام‌گذاری نواحی در Grid با `grid-template-areas`
• 51. مثال عملی Grid: پیاده‌سازی چیدمان اصلی داشبورد مدیریت ناوگان
• 52. ترکیب هوشمندانه Flexbox و Grid
• 53. مفهوم Positioning: `static`, `relative`, `absolute`
• 54. کاربرد `position: absolute` برای نمایش پاپ‌آپ روی نقشه
• 55. استفاده از `position: fixed` برای هدرها و منوهای ثابت
• 56. `position: sticky` برای المان‌های چسبان در اسکرول
• 57. مدیریت ترتیب لایه‌ها با `z-index`
• 58. کنترل سرریز محتوا با `overflow`
• 59. مفهوم طراحی واکنش‌گرا (Responsive Design)
• 60. تنظیم Viewport با Meta Tag
• 61. مقدمه‌ای بر Media Queries
• 62. استفاده از `min-width` و `max-width` برای Breakpointها
• 63. رویکرد Mobile-First در طراحی واکنش‌گرا
• 64. رویکرد Desktop-First و مقایسه آن با Mobile-First
• 65. تصاویر واکنش‌گرا با `max-width: 100%`
• 66. استفاده از تگ `<picture>` برای کنترل تصاویر در اندازه‌های مختلف
• 67. طراحی جداول داده واکنش‌گرا برای لیست خودروها
• 68. پیاده‌سازی منوی همبرگری واکنش‌گرا
• 69. افکت‌های انتقال نرم (Transitions)
• 70. کنترل Transitions: `property`, `duration`, `timing-function`, `delay`
• 71. انیمیشن‌های پیچیده‌تر با `@keyframes`
• 72. کنترل انیمیشن‌ها: `animation-name`, `duration`, `iteration-count`, `direction`
• 73. مثال انیمیشن: نمایش هشدار چشمک‌زن برای خودروهای متخلف
• 74. تبدیلات دو بعدی (2D Transforms): `translate`, `rotate`, `scale`, `skew`
• 75. مبدأ تبدیل با `transform-origin`
• 76. تبدیلات سه بعدی (3D Transforms)
• 77. فیلترهای گرافیکی CSS: `blur`, `grayscale`, `brightness`, `contrast`
• 78. حالت‌های ترکیبی (Blend Modes)
• 79. استایل‌دهی پایه به فرم‌ها: `input`, `textarea`, `button`
• 80. سفارشی‌سازی Checkbox و Radio Button
• 81. استایل‌دهی به `select` و `option`
• 82. شبه‌کلاس‌های فرم: `:focus`, `:checked`, `:disabled`
• 83. استایل‌دهی بر اساس وضعیت اعتبارسنجی: `:valid`, `:invalid`, `:required`
• 84. متغیرهای CSS (Custom Properties) و قدرت آن‌ها
• 85. تعریف متغیرهای سراسری (`:root`) و محلی
• 86. مثال عملی: ساخت سیستم تم (Theme) تاریک و روشن با متغیرها
• 87. توابع محاسباتی: `calc()`
• 88. توابع مقایسه‌ای: `min()`, `max()`, `clamp()`
• 89. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 90. متغیرها و تودرتویی (Nesting) در Sass
• 91. استفاده از Mixinها در Sass برای کدهای قابل استفاده مجدد
• 92. معماری و سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 93. متدولوژی BEM (Block, Element, Modifier)
• 94. کاربرد BEM در کامپوننت‌های داشبورد (مانند کارت، دکمه، ویجت)
• 95. بهینه‌سازی عملکرد CSS: کاهش حجم فایل و حذف کدهای اضافی
• 96. انتخاب‌گرهای بهینه و تأثیر آن‌ها بر سرعت رندر
• 97. استایل‌دهی برای چاپ (Print Stylesheets)
• 98. پروژه عملی: استایل‌دهی به یک داشبورد KPI کامل
• 99. پروژه عملی: استایل‌دهی به ویجت‌های نقشه و نشانگرهای خودرو
• 100. پروژه عملی: طراحی جدول داده پیشرفته با قابلیت مرتب‌سازی و فیلتر