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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. CSS چیست و چرا برای داشبوردهای مدیریت ناوگان مهم است؟
• 3. نحوه افزودن CSS به HTML: Inline, Internal, External
• 4. قواعد و سینتکس اصلی CSS (Selector, Property, Value)
• 5. آشنایی با کامنت‌گذاری در CSS
• 6. سلکتورهای پایه: Element, Class, ID
• 7. گروه‌بندی سلکتورها
• 8. مفهوم وراثت (Inheritance) در CSS
• 9. آشنایی با ابزارهای توسعه‌دهنده مرورگر (DevTools) برای CSS
• 10. مفهوم Box Model: Content, Padding, Border, Margin
• 11. واحد اندازه‌گیری Width و Height
• 12. کار با Border و خصوصیات آن (style, width, color)
• 13. گرد کردن گوشه‌ها با border-radius
• 14. سایه‌ها در CSS: box-shadow
• 15. کار با رنگ‌ها: نام‌ها، HEX، RGB، HSL
• 16. تنظیم شفافیت با RGBA و opacity
• 17. تنظیم پس‌زمینه: background-color
• 18. استفاده از تصاویر در پس‌زمینه: background-image
• 19. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 20. استایل‌دهی به متون: font-family, font-size, font-weight
• 21. استایل‌های دیگر متن: font-style, text-decoration, text-transform
• 22. تراز کردن متن: text-align
• 23. فاصله‌گذاری بین حروف و کلمات
• 24. تنظیم ارتفاع خط (line-height) برای خوانایی بهتر
• 25. استایل‌دهی به لیست‌ها: نمایش لیست خودروها و رانندگان
• 26. استایل‌دهی به لینک‌ها و وضعیت‌های آن (link, visited, hover, active)
• 27. استایل‌دهی به جداول: border, padding, and layout
• 28. ایجاد نشانگرهای وضعیت با استفاده از رنگ (سبز: فعال، قرمز: هشدار)
• 29. مفهوم Display: Block, Inline, Inline-block
• 30. تغییر نمایش عناصر با display
• 31. مخفی کردن عناصر: display: none و visibility: hidden
• 32. مبانی Position: Static, Relative, Absolute, Fixed
• 33. مفهوم Z-Index و مدیریت لایه‌ها
• 34. استفاده از Float برای چیدمان (و چرا کمتر استفاده می‌شود)
• 35. مفهوم Clear و رفع مشکلات Float
• 36. مقدمه‌ای بر Flexbox: Container و Items
• 37. محورهای اصلی و متقاطع در Flexbox
• 38. تنظیم جهت آیتم‌ها با flex-direction
• 39. مدیریت شکست خط با flex-wrap
• 40. تراز افقی آیتم‌ها با justify-content
• 41. تراز عمودی آیتم‌ها با align-items
• 42. تراز خطوط چندگانه با align-content
• 43. تنظیم اندازه آیتم‌ها با flex-grow, flex-shrink, flex-basis
• 44. کار با خصوصیت flex
• 45. چینش مجدد آیتم‌ها با order
• 46. مقدمه‌ای بر CSS Grid Layout
• 47. تعریف ستون‌ها و ردیف‌ها (grid-template-columns/rows)
• 48. ایجاد فاصله بین خانه‌ها با gap
• 49. قرار دادن آیتم‌ها در Grid با شماره خطوط
• 50. نام‌گذاری خطوط Grid
• 51. قرار دادن آیتم‌ها با نام خطوط
• 52. مفهوم grid-area
• 53. طراحی داشبورد مدیریت ناوگان با CSS Grid
• 54. مبانی طراحی واکنش‌گرا (Responsive Web Design)
• 55. استفاده از Viewport Meta Tag
• 56. Media Queries: Syntax و کاربرد
• 57. رویکرد Mobile-First در طراحی واکنش‌گرا
• 58. استفاده از واحدهای نسبی (%, em, rem)
• 59. واحدهای وابسته به Viewport (vw, vh)
• 60. واکنش‌گرا کردن تصاویر
• 61. واکنش‌گرا کردن جداول داده‌ها (برای گزارشات ناوگان)
• 62. واکنش‌گرا کردن منوهای ناوبری
• 63. سلکتورهای ترکیبی (Descendant, Child, Sibling)
• 64. سلکتورهای Attribute
• 65. Pseudo-classes: :hover, :focus, :active
• 66. Pseudo-classes ساختاری: :first-child, :last-child
• 67. کار با :nth-child برای استایل‌دهی پیچیده به جداول
• 68. استایل‌دهی به ردیف‌های زوج و فرد جداول گزارش
• 69. Pseudo-elements: ::before و ::after
• 70. کاربرد ::before و ::after برای افزودن آیکون و محتوای تزئینی
• 71. افزودن آیکون وضعیت به لیست خودروها با ::before
• 72. استایل‌دهی به فرم‌ها: input, textarea, select
• 73. استایل‌دهی به دکمه‌ها (Buttons)
• 74. سفارشی‌سازی Checkbox و Radio Button
• 75. مقدمه‌ای بر CSS Transitions
• 76. خصوصیات Transition: property, duration, timing-function, delay
• 77. ایجاد افکت‌های Hover نرم برای دکمه‌ها و کارت‌ها
• 78. مبانی انیمیشن با @keyframes
• 79. کنترل انیمیشن: animation-name, duration, iteration-count
• 80. ایجاد انیمیشن بارگذاری (Loading Spinner) برای داده‌ها
• 81. مفهوم CSS Transforms: translate(), rotate(), scale()
• 82. ایجاد افکت‌های سه‌بعدی ساده با 3D Transforms
• 83. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌بندی
• 84. ایجاد تم روشن و تاریک برای داشبورد با متغیرها
• 85. تابع calc() برای محاسبات دینامیک
• 86. استفاده از فیلترهای CSS (blur, grayscale, etc.)
• 87. مقدمه‌ای بر پیش‌پردازنده‌ها (Sass/SCSS)
• 88. سازماندهی فایل‌های CSS: معماری BEM
• 89. مبانی دسترسی‌پذیری (Accessibility) در CSS
• 90. تکنیک‌های چاپ صفحات (Print Stylesheets) برای گزارشات
• 91. بهینه‌سازی عملکرد CSS: Minification و Concatenation
• 92. پروژه نهایی: برنامه‌ریزی و ساختاردهی کامپوننت‌ها
• 93. پروژه نهایی: ساخت هدر و نویگیشن داشبورد
• 94. پروژه نهایی: طراحی بخش کارت‌های KPI (مسافت، مصرف سوخت)
• 95. پروژه نهایی: استایل‌دهی به جدول اصلی خودروها با فیلترها
• 96. پروژه نهایی: ساخت فرم ورود داده (ثبت گزارش جدید)
• 97. پروژه نهایی: طراحی کامپوننت هشدار (Alert Component)
• 98. پروژه نهایی: استایل‌دهی به بخش نقشه و جزئیات مسیر
• 99. پروژه نهایی: واکنش‌گرا کردن کامل داشبورد
• 100. پروژه نهایی: بهینه‌سازی و جمع‌بندی نهایی CSS