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

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

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

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

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

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

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

• 1. مقدمه: نقش CSS در رابط‌های کاربری مدیریت ناوگان
• 2. CSS چیست و چرا برای داشبوردها حیاتی است؟
• 3. روش‌های افزودن CSS به صفحه: داخلی، خارجی و درون‌خطی
• 4. آشنایی با ساختار یک قانون CSS: انتخابگر، خصوصیت و مقدار
• 5. شروع کار: ساخت اولین استایل برای یک عنصر داشبورد
• 6. کامنت‌گذاری در CSS برای مستندسازی استایل‌های ناوگان
• 7. انتخابگرهای اصلی: انتخابگر عنصر، کلاس و شناسه (ID)
• 8. مفهوم آبشار (Cascade) در CSS
• 9. اولویت و امتیازدهی انتخابگرها (Specificity)
• 10. مفهوم وراثت (Inheritance) در استایل‌دهی
• 11. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 12. تنظیم ارتفاع و عرض عناصر رابط کاربری (Width & Height)
• 13. واحدهای اندازه‌گیری مطلق: پیکسل (px)
• 14. واحدهای اندازه‌گیری نسبی: درصد (%)، em و rem
• 15. کار با رنگ‌ها: نام‌های کلیدی، HEX و RGB
• 16. شفافیت با RGBA: استایل‌دهی به پاپ‌آپ‌های نقشه
• 17. استایل‌دهی به متون: font-family و font-size
• 18. تنظیم ضخامت و استایل فونت: font-weight و font-style
• 19. تراز کردن متون در جداول و کارت‌ها: text-align
• 20. فاصله بین خطوط و کاراکترها: line-height و letter-spacing
• 21. استایل‌دهی به پس‌زمینه: background-color
• 22. استفاده از تصاویر در پس‌زمینه: background-image
• 23. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 24. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن (:link, :visited)
• 25. افکت‌های تعاملی برای دکمه‌ها و لینک‌ها: :hover و :active
• 26. حالت فوکوس برای فیلدهای فرم: :focus
• 27. انتخابگرهای فرزند و نواده (Child and Descendant Selectors)
• 28. انتخابگرهای همسایه و برادر (Sibling Selectors)
• 29. انتخابگرهای ویژگی (Attribute Selectors): استایل‌دهی بر اساس ویژگی‌های HTML
• 30. کلاس‌های کاذب (Pseudo-classes): :first-child و :last-child
• 31. استایل‌دهی به ردیف‌های زوج و فرد جداول: :nth-child
• 32. عناصر کاذب (Pseudo-elements): :before و :after
• 33. ایجاد آیکون‌های وضعیت خودرو با :before
• 34. خصوصیت Display: درک مقادیر block، inline و inline-block
• 35. مخفی کردن عناصر با display: none و visibility: hidden
• 36. موقعیت‌یابی (Positioning): مقادیر static و relative
• 37. موقعیت‌یابی مطلق (Absolute Positioning) برای عناصر روی نقشه
• 38. موقعیت‌یابی ثابت (Fixed Positioning) برای هدر و منوی ثابت
• 39. کنترل لایه‌ها با Z-index: قرار دادن اطلاعات خودرو روی نقشه
• 40. مقدمه‌ای بر Flexbox برای چیدمان داشبورد
• 41. Flexbox: خصوصیات کانتینر (flex-direction, justify-content)
• 42. Flexbox: خصوصیات کانتینر (align-items, flex-wrap)
• 43. Flexbox: خصوصیات آیتم‌ها (flex-grow, flex-shrink, flex-basis)
• 44. ساخت یک نوار کناری (Sidebar) برای ناوبری با Flexbox
• 45. چیدمان کارت‌های KPI در داشبورد با Flexbox
• 46. مقدمه‌ای بر CSS Grid برای چیدمان‌های پیچیده
• 47. تعریف ستون‌ها و ردیف‌ها در Grid: grid-template-columns/rows
• 48. قرار دادن آیتم‌ها در Grid: grid-column و grid-row
• 49. ساخت یک چیدمان کامل داشبورد مدیریت ناوگان با CSS Grid
• 50. استایل‌دهی به جداول داده: border-collapse
• 51. استایل‌دهی به سربرگ (thead) و بدنه (tbody) جدول
• 52. ایجاد جداول خوانا با استایل‌دهی به سلول‌ها (td, th)
• 53. استایل‌دهی به فرم‌های ورود اطلاعات راننده
• 54. استایل‌دهی به فیلدهای ورودی (input)، ناحیه متنی (textarea) و لیست‌های کشویی (select)
• 55. طراحی دکمه‌های سفارشی برای فرم‌ها (Button Styling)
• 56. استایل‌دهی به چک‌باکس‌ها و دکمه‌های رادیویی
• 57. اعتبارسنجی فرم با CSS: استایل‌دهی به فیلدهای :valid و :invalid
• 58. گرد کردن گوشه‌ها با border-radius
• 59. ایجاد سایه برای جعبه‌ها و کارت‌ها با box-shadow
• 60. استایل‌دهی به لیست‌ها: حذف نشانگرها و ایجاد منوهای ناوبری
• 61. مقدمه‌ای بر Transition برای ایجاد انیمیشن‌های نرم
• 62. کنترل سرعت و تأخیر در Transition ها
• 63. انیمیشن تغییر رنگ وضعیت خودرو با Transition
• 64. مقدمه‌ای بر Transform: توابع scale و rotate
• 65. استفاده از transform: translate برای جابجایی عناصر
• 66. ایجاد انیمیشن‌های پیچیده با @keyframes
• 67. ساخت نشانگر "در حال حرکت" چشمک‌زن با انیمیشن CSS
• 68. استفاده از گرادینت‌های خطی و شعاعی در پس‌زمینه
• 69. فیلترهای CSS: تغییر روشنایی، کنتراست و اشباع تصاویر
• 70. مفهوم طراحی واکنش‌گرا (Responsive Design)
• 71. تنظیم Viewport برای نمایش صحیح در موبایل
• 72. مقدمه‌ای بر Media Queries
• 73. نوشتن Media Queries برای اندازه‌های مختلف صفحه (Mobile, Tablet, Desktop)
• 74. طراحی منوی ناوبری واکنش‌گرا (همبرگری)
• 75. واکنش‌گرا کردن جداول داده برای نمایش در صفحات کوچک
• 76. استفاده از واحدهای Viewport: vw و vh
• 77. مفهوم Mobile-First در طراحی واکنش‌گرا
• 78. متغیرهای CSS (Custom Properties) برای مدیریت تم‌ها
• 79. ساخت تم روشن و تاریک (Light/Dark Mode) برای داشبورد
• 80. استفاده از تابع calc() برای محاسبات دینامیک
• 81. استفاده از توابع min(), max() و clamp()
• 82. جلوگیری از سرریز محتوا با خصوصیت overflow
• 83. تکنیک‌های استایل‌دهی به نوارهای اسکرول (Scrollbar)
• 84. تکنیک Image Sprites برای بهینه‌سازی آیکون‌ها
• 85. استفاده از فونت‌های سفارشی با @font-face
• 86. استفاده از فونت‌های آیکون (Icon Fonts) مانند Font Awesome
• 87. استایل‌دهی به عناصر SVG برای آیکون‌های خودرو
• 88. اصول اولیه دسترسی‌پذیری (Accessibility) در CSS
• 89. استایل‌دهی به حالت :focus-visible برای کاربران کیبورد
• 90. استایل‌دهی بر اساس ویژگی‌های ARIA
• 91. استایل‌های مخصوص چاپ برای گزارش‌ها: @media print
• 92. بهینه‌سازی فایل‌های CSS: کوچک‌سازی (Minification)
• 93. سازماندهی کدهای CSS با متدولوژی BEM
• 94. پروژه عملی ۱: ساخت کارت اطلاعات یک خودرو (Vehicle Card)
• 95. پروژه عملی ۲: استایل‌دهی به یک لیست کامل از خودروها
• 96. پروژه عملی ۳: طراحی یک فرم ثبت گزارش تعمیر و نگهداری
• 97. پروژه عملی ۴: ساخت یک داشبورد KPI ساده
• 98. پروژه عملی ۵: استایل‌دهی به پنجره اطلاعات (Info-Window) روی نقشه
• 99. پروژه عملی ۶: طراحی سیستم هشدار و اعلان (Alerts & Notifications)
• 100. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS