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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در پلتفرم‌های مدیریت ناوگان
• 2. چرا CSS برای داشبوردهای مدیریتی حیاتی است؟
• 3. آشنایی با سه روش افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 4. ساختار و قواعد اصلی CSS: انتخابگر، ویژگی و مقدار
• 5. نحوه استفاده از کامنت‌ها در CSS
• 6. انتخابگرهای اصلی: عنصر، کلاس و ID
• 7. انتخابگرهای ترکیبی و گروه‌بندی
• 8. انتخابگر فرزند (Child) و نواده (Descendant)
• 9. انتخابگرهای همسایه (Sibling)
• 10. انتخابگرهای ویژگی (Attribute Selectors) برای وضعیت خودروها
• 11. آشنایی با شبه‌کلاس‌ها (Pseudo-classes) مانند :hover و :focus
• 12. آشنایی با شبه‌عناصر (Pseudo-elements) مانند ::before و ::after
• 13. آشنایی با مفهوم آبشار (Cascade)، وراثت (Inheritance) و اولویت (Specificity)
• 14. واحدها در CSS: واحدهای مطلق (px) و نسبی (em, rem)
• 15. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 16. ویژگی Box-Sizing: border-box
• 17. کار با رنگ‌ها: نام، HEX، RGB و HSL
• 18. اعمال رنگ‌بندی برای نمایش وضعیت‌های مختلف (فعال، غیرفعال، در تعمیر)
• 19. ویژگی‌های پس‌زمینه: Background Color, Image, Position, Repeat
• 20. گرادیان‌های پس‌زمینه برای عناصر رابط کاربری
• 21. استایل‌دهی به متون: Font Family, Size, Weight, Style
• 22. ترازبندی و دکوراسیون متن
• 23. استایل‌دهی به لیست‌ها: مرتب و نامرتب
• 24. ویژگی Display: block, inline, inline-block
• 25. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 26. ویژگی‌های Flex Container: flex-direction, justify-content, align-items
• 27. ویژگی‌های Flex Container: flex-wrap, align-content
• 28. ویژگی‌های Flex Items: flex-grow, flex-shrink, flex-basis
• 29. کاربرد Flexbox در ساخت هدر و نوار ناوبری داشبورد
• 30. مقدمه‌ای بر Grid برای چیدمان‌های دوبعدی
• 31. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 32. واحد fr و ایجاد ستون‌های واکنش‌گرا
• 33. فاصله‌گذاری بین عناصر گرید با gap
• 34. چیدمان آیتم‌ها در گرید با grid-column و grid-row
• 35. استفاده از grid-template-areas برای ساختار داشبورد
• 36. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده
• 37. موقعیت‌یابی (Positioning): static, relative, absolute
• 38. موقعیت‌یابی (Positioning): fixed, sticky
• 39. کنترل لایه‌ها با z-index
• 40. مدیریت سرریز محتوا با Overflow
• 41. استایل‌دهی به جداول داده (لیست خودروها و رانندگان)
• 42. افزودن استایل خطوط راه‌راه (Zebra Stripes) به جداول
• 43. طراحی جداول واکنش‌گرا برای نمایش در موبایل
• 44. استایل‌دهی به فرم‌ها و ورودی‌ها (Inputs)
• 45. استایل‌دهی به دکمه‌ها و حالت‌های مختلف آن
• 46. شخصی‌سازی Checkbox ها و Radio Button ها
• 47. استایل‌دهی به منوهای کشویی (Select)
• 48. استایل‌دهی به فرم‌ها بر اساس وضعیت اعتبارسنجی (:valid, :invalid)
• 49. ساخت یک فرم کامل: "افزودن خودروی جدید"
• 50. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 51. استفاده از متا تگ Viewport
• 52. آشنایی با Media Queries و Breakpoint ها
• 53. رویکرد Mobile-First در طراحی واکنش‌گرا
• 54. واحدهای واکنش‌گرا: vw, vh, %
• 55. استفاده از تابع calc() برای محاسبات دینامیک
• 56. واکنش‌گرا کردن تصاویر و مدیا
• 57. طراحی منوی همبرگری برای نمایش موبایل
• 58. مقدمه‌ای بر Transition ها برای انیمیشن‌های نرم
• 59. ویژگی‌های Transition: property, duration, timing-function, delay
• 60. مقدمه‌ای بر Animation ها و Keyframe ها
• 61. ایجاد انیمیشن بارگذاری (Loading Spinner) برای داده‌ها
• 62. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 63. تبدیل‌های سه بعدی (3D Transforms)
• 64. ترکیب Transition و Transform برای افکت‌های تعاملی
• 65. متغیرهای CSS (Custom Properties) و کاربرد آن
• 66. استفاده از متغیرها برای ساخت تم تاریک و روشن (Theming)
• 67. دامنه (Scope) متغیرهای CSS: global و local
• 68. فیلترهای CSS: blur, grayscale, brightness
• 69. ایجاد سایه برای جعبه‌ها و متون (box-shadow, text-shadow)
• 70. استفاده از فونت‌های سفارشی با @font-face
• 71. استفاده از آیکون‌ها (Icon Fonts vs. SVG)
• 72. استایل‌دهی به کامپوننت کارت (Card) برای نمایش اطلاعات خودرو
• 73. طراحی کامپوننت‌های نشانگر کلیدی عملکرد (KPI)
• 74. طراحی نوارهای پیشرفت (Progress Bars) برای وضعیت تعمیرات
• 75. استایل‌دهی به عناصر نقشه (پاپ‌آپ اطلاعات خودرو)
• 76. طراحی Tooltip برای نمایش اطلاعات بیشتر
• 77. ساخت کامپوننت هشدار و نوتیفیکیشن
• 78. طراحی مودال (Modal) یا پنجره پاپ‌آپ
• 79. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 80. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 81. مقدمه‌ای بر پیش‌پردازنده‌های CSS: Sass/SCSS
• 82. نصب و راه‌اندازی Sass
• 83. متغیرها در Sass
• 84. تودرتویی (Nesting) در Sass
• 85. استفاده از Mixin ها برای کدهای قابل استفاده مجدد
• 86. استفاده از توابع و عملگرها در Sass
• 87. وراثت با @extend
• 88. دستورات کنترلی: @if, @for, @each
• 89. بهینه‌سازی عملکرد CSS: کوچک‌سازی (Minification)
• 90. تکنیک‌های کاهش Reflow و Repaint
• 91. انتخابگرهای بهینه برای عملکرد بهتر
• 92. دسترسی‌پذیری (Accessibility): اهمیت کنتراست رنگ
• 93. دسترسی‌پذیری: استایل‌دهی به حالت focus برای ناوبری با کیبورد
• 94. استفاده از مدیا کوئری prefers-reduced-motion
• 95. ایجاد استایل‌های مخصوص چاپ (Print Stylesheets) برای گزارش‌ها
• 96. شروع پروژه نهایی: طراحی داشبورد مدیریت ناوگان
• 97. ساختاربندی HTML پروژه
• 98. چیدمان کلی صفحه با CSS Grid
• 99. استایل‌دهی به هدر و سایدبار ناوبری
• 100. استایل‌دهی به بخش اصلی داشبورد و کارت‌های KPI