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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در نرم‌افزارهای مدیریت ناوگان
• 2. نحو (Syntax) اصلی CSS: قوانین، انتخابگرها و اعلان‌ها
• 3. روش‌های افزودن CSS به صفحه: درون‌خطی، داخلی و خارجی
• 4. راه‌اندازی پروژه و اولین شیوه‌نامه (Stylesheet) شما
• 5. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 6. انتخابگرهای پایه‌ای: نوع، کلاس و شناسه (ID)
• 7. ترکیب انتخابگرها: فرزندان، نوادگان و هم‌نوعان
• 8. انتخابگرهای ویژگی (Attribute Selectors) برای استایل‌دهی داده‌محور
• 9. مفهوم آبشار (Cascade)، ویژگی (Specificity) و وراثت (Inheritance)
• 10. قانون !important و زمان صحیح استفاده از آن
• 11. واحدهای اندازه‌گیری مطلق (px) و نسبی (em, rem)
• 12. واحدهای اندازه‌گیری Viewport: vw, vh, vmin, vmax
• 13. کار با رنگ‌ها در CSS: کلمات کلیدی، HEX، RGB و RGBA
• 14. استفاده از مدل‌های رنگی HSL و HSLA
• 15. نوشتن توضیحات (Comments) و سازماندهی کد CSS
• 16. آشنایی با مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 17. کنترل ابعاد عناصر: width, height, min/max-width
• 18. ویژگی box-sizing: تفاوت content-box و border-box
• 19. استایل‌دهی به حاشیه‌ها (Borders): نوع، ضخامت و رنگ
• 20. ایجاد گوشه‌های گرد با border-radius
• 21. استایل‌دهی پس‌زمینه: background-color و background-image
• 22. کنترل تصاویر پس‌زمینه: تکرار، موقعیت و اندازه
• 23. استفاده از پس‌زمینه‌های چندگانه و گرادیان‌ها
• 24. ویژگی display: بلاک، درون‌خطی و درون‌خطی-بلاک
• 25. تفاوت display: none و visibility: hidden
• 26. اصول استایل‌دهی متن: font-family, font-size, font-weight
• 27. استفاده از فونت‌های وب با @font-face و سرویس‌های آنلاین
• 28. تراز کردن و تزئینات متن (Text Alignment and Decoration)
• 29. کنترل فاصله بین حروف و کلمات
• 30. مدیریت سرریز متن (Text Overflow)
• 31. مقدمه‌ای بر چیدمان (Layout) در داشبوردهای مدیریتی
• 32. درک جریان عادی سند (Normal Document Flow)
• 33. موقعیت‌یابی (Positioning) در CSS: static, relative, absolute
• 34. موقعیت‌یابی ثابت و چسبنده: fixed و sticky
• 35. مدیریت ترتیب لایه‌ها با z-index
• 36. استفاده از Float برای چیدمان‌های ساده (مفاهیم قدیمی)
• 37. پاک‌سازی Float ها (The Clearfix Hack)
• 38. مقدمه‌ای بر Flexbox: راه‌حل مدرن چیدمان
• 39. کانتینرهای Flexbox: display: flex و flex-direction
• 40. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 41. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 42. شکستن خط در Flexbox با flex-wrap
• 43. کنترل ابعاد آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 44. خاصیت کوتاه‌نویسی flex
• 45. تراز کردن یک آیتم خاص با align-self
• 46. تغییر ترتیب آیتم‌ها با ویژگی order
• 47. پروژه عملی Flexbox: ساخت هدر یک داشبورد
• 48. مقدمه‌ای بر CSS Grid Layout
• 49. تعریف یک گرید: grid-template-columns و grid-template-rows
• 50. قرار دادن آیتم‌ها در گرید با شماره خطوط
• 51. ادغام سلول‌های گرید (Spanning)
• 52. نام‌گذاری خطوط گرید برای چیدمان ساده‌تر
• 53. ایجاد فاصله بین ستون‌ها و ردیف‌ها با gap
• 54. پروژه عملی Grid: طراحی ساختار اصلی داشبورد
• 55. ترکیب Flexbox و Grid برای رابط‌های کاربری پیچیده
• 56. استایل‌دهی جداول HTML برای گزارشات ناوگان
• 57. بهبود خوانایی جداول با ردیف‌های یک‌درمیان رنگی
• 58. استایل‌دهی به سرآیند (Header) و پاصفحه (Footer) جداول
• 59. طراحی جداول داده واکنش‌گرا (Responsive)
• 60. استایل‌دهی فرم‌ها و فیلدهای ورودی
• 61. طراحی برچسب‌ها (Labels) و حالت فوکوس (Focus) ورودی‌ها
• 62. طراحی سفارشی Checkbox ها و Radio Button ها
• 63. استایل‌دهی دکمه‌ها برای عملیات (مانند "ارسال"، "مشاهده گزارش")
• 64. حالت‌های مختلف دکمه: hover, active, focus
• 65. ساخت منوهای ناوبری برای داشبورد
• 66. استایل‌دهی به منوهای کشویی (Dropdown Menus)
• 67. طراحی مسیر راهنما (Breadcrumbs)
• 68. استایل‌دهی لیست‌ها برای نمایش وضعیت خودروها یا رانندگان
• 69. طراحی کادرهای هشدار و اطلاع‌رسانی
• 70. استایل‌دهی پنجره‌های مودال (Modal) و پاپ‌آپ‌ها
• 71. استایل‌دهی پایه برای نمودارها (Charts)
• 72. ساخت راهنمای ابزار (Tooltip) سفارشی برای نقشه یا داده‌ها
• 73. طراحی نوارهای پیشرفت (Progress Bars) برای شاخص‌های کلیدی
• 74. طراحی کارت‌ها (Cards) برای نمایش خلاصه وضعیت خودروها
• 75. استفاده از فونت‌های آیکون (Icon Fonts) و SVG برای آیکون‌ها
• 76. مقدمه‌ای بر طراحی وب واکنش‌گرا (Responsive)
• 77. متا تگ Viewport
• 78. استفاده از Media Queries برای اندازه‌های مختلف صفحه
• 79. رویکرد اول-موبایل (Mobile-First) در مقابل اول-دسکتاپ
• 80. تغییر چیدمان با استفاده از Media Queries
• 81. تصاویر و رسانه‌های واکنش‌گرا
• 82. مخفی کردن و نمایش عناصر در دستگاه‌های مختلف
• 83. شبه‌کلاس‌ها (Pseudo-classes) برای تعامل کاربر: hover, focus, active
• 84. استایل‌دهی به لینک‌ها و حالت‌های مختلف آنها
• 85. شبه‌کلاس‌های ساختاری: first-child, last-child, nth-child
• 86. کاربرد nth-child برای استایل‌دهی پیشرفته جداول
• 87. شبه‌عناصر (Pseudo-elements): before:: و after::
• 88. ایجاد عناصر سفارشی با before:: و after::
• 89. استفاده از شبه‌کلاس target: برای تعاملات ساده
• 90. مقدمه‌ای بر ترنزیشن‌ها (Transitions) در CSS برای تغییرات نرم
• 91. آشنایی با انیمیشن‌های CSS با استفاده از keyframes@
• 92. متغیرهای CSS (Custom Properties) برای تم‌سازی (Theming)
• 93. استفاده از تابع calc() برای محاسبات دینامیک
• 94. سازماندهی CSS: آشنایی با متدولوژی BEM
• 95. نوشتن کدهای CSS قابل نگهداری و مقیاس‌پذیر
• 96. بهینه‌سازی عملکرد CSS
• 97. ایجاد شیوه‌نامه‌های مخصوص چاپ (Print Stylesheets) برای گزارش‌ها
• 98. اصول اولیه دسترس‌پذیری وب (Accessibility): کنتراست رنگ و حالت فوکوس
• 99. سازگاری با مرورگرهای مختلف و روش‌های تست
• 100. پروژه نهایی: استایل‌دهی کامل یک داشبورد مدیریت ناوگان