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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در مدیریت ناوگان
• 2. چرا CSS برای داشبوردهای مدیریت ناوگان حیاتی است؟
• 3. نحوه افزودن CSS به یک صفحه وب: داخلی، خارجی و درون‌خطی
• 4. آشنایی با ساختار یک قانون CSS: انتخابگر، خصوصیت و مقدار
• 5. کامنت‌گذاری در CSS برای خوانایی بهتر کد
• 6. انتخابگرهای اصلی: تگ، کلاس و شناسه
• 7. قانون اولویت و آبشاری (Specificity and Cascade)
• 8. مفهوم وراثت (Inheritance) در CSS
• 9. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 10. خصوصیت box-sizing: content-box در مقابل border-box
• 11. واحدهای اندازه‌گیری مطلق و نسبی: px, %, em, rem
• 12. واحدهای اندازه‌گیری Viewport: vw, vh, vmin, vmax
• 13. کار با رنگ‌ها: نام‌های رنگی، HEX، RGB و RGBA
• 14. کار با رنگ‌ها: HSL و HSLA برای کنترل بهتر
• 15. تنظیم فونت و خانواده قلم (font-family)
• 16. اندازه و وزن فونت (font-size, font-weight)
• 17. تراز و ارتفاع خط متن (text-align, line-height)
• 18. تزیینات متن: text-decoration و text-transform
• 19. سایه‌زنی متن و جعبه‌ها (text-shadow, box-shadow)
• 20. خصوصیات پس‌زمینه: background-color و background-image
• 21. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 22. خصوصیت display: block, inline, و inline-block
• 23. خصوصیت display: none و visibility: hidden
• 24. موقعیت‌یابی (Positioning): static و relative
• 25. موقعیت‌یابی (Positioning): absolute و fixed
• 26. موقعیت‌یابی (Positioning): sticky
• 27. کنترل لایه‌ها با z-index
• 28. رسیدگی به سرریز محتوا با خصوصیت overflow
• 29. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 30. خصوصیات کانتینر Flexbox: flex-direction و flex-wrap
• 31. تراز کردن آیتم‌ها در محور اصلی: justify-content
• 32. تراز کردن آیتم‌ها در محور متقاطع: align-items
• 33. تراز کردن خطوط چندگانه: align-content
• 34. خصوصیات آیتم‌های Flexbox: flex-grow, flex-shrink, flex-basis
• 35. کنترل ترتیب نمایش با خصوصیت order
• 36. ایجاد هدر و فوتر واکنش‌گرا با Flexbox
• 37. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 38. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 39. واحد fr و ایجاد ستون‌های انعطاف‌پذیر
• 40. ایجاد فاصله بین آیتم‌ها با gap
• 41. موقعیت‌دهی آیتم‌ها در گرید: grid-column و grid-row
• 42. نام‌گذاری خطوط و نواحی گرید برای چیدمان‌های پیچیده
• 43. ترکیب Flexbox و Grid برای ساخت داشبورد اصلی
• 44. انتخابگرهای ترکیبی (Combinators): نسل، فرزند، همسایه
• 45. شبه‌کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 46. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 47. شبه‌المان‌ها (Pseudo-elements): ::before و ::after
• 48. انتخابگرهای 속성 (Attribute Selectors) برای استایل‌دهی بر اساس داده
• 49. استایل‌دهی به جداول: border, padding و a-lignment
• 50. ایجاد جداول گورخری (Zebra-striped Tables) برای خوانایی لیست خودروها
• 51. استایل‌دهی به سربرگ جدول (thead) برای تمایز
• 52. طراحی جداول واکنش‌گرا برای نمایش در موبایل
• 53. استایل‌دهی به فرم‌ها و فیلدهای ورودی (input, textarea)
• 54. استایل‌دهی به دکمه‌ها (Buttons) برای اقدامات کلیدی
• 55. شخصی‌سازی Checkbox و Radio Button
• 56. استایل‌دهی به منوهای کشویی (select)
• 57. استایل‌دهی به فرم بر اساس وضعیت: :valid, :invalid, :required
• 58. ایجاد پالت رنگی برای داشبورد: رنگ‌های اصلی، ثانویه و هشدار
• 59. استفاده از رنگ برای نمایش وضعیت خودروها (آنلاین، آفلاین، در حال حرکت)
• 60. طراحی نشانگرهای وضعیت (Status Indicators) با CSS
• 61. استفاده از فونت‌های آیکون (مانند Font Awesome) در رابط کاربری
• 62. به‌کارگیری آیکون‌های SVG و استایل‌دهی به آن‌ها
• 63. طراحی کارت‌ها (Cards) برای نمایش خلاصه اطلاعات هر خودرو
• 64. استایل‌دهی به نوار ناوبری (Navigation Bar) و سایدبار (Sidebar)
• 65. ایجاد منوهای آبشاری (Dropdown Menus)
• 66. طراحی مودال‌ها (Modals) برای نمایش جزئیات
• 67. استایل‌دهی به راهنمای ابزار (Tooltips)
• 68. سفارشی‌سازی استایل عناصر نقشه (پاپ‌آپ‌ها و نشانگرها)
• 69. استایل‌دهی اولیه به نمودارها و گراف‌ها (Charts & Graphs)
• 70. طراحی نوارهای پیشرفت (Progress Bars) برای نمایش سطح سوخت یا تعمیرات
• 71. طراحی بنرهای هشدار و اطلاع‌رسانی (Alerts & Notifications)
• 72. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 73. رویکرد اول-موبایل (Mobile-First) در طراحی
• 74. آشنایی با Media Queries و نقاط شکست (Breakpoints)
• 75. ایجاد چیدمان واکنش‌گرای داشبورد با Grid و Flexbox
• 76. واکنش‌گرا کردن تصاویر با max-width
• 77. استفاده از خصوصیت object-fit برای کنترل تصاویر
• 78. مقدمه‌ای بر ترنزیشن‌ها (Transitions) برای ایجاد افکت‌های نرم
• 79. کنترل زمان‌بندی و تاخیر در ترنزیشن‌ها
• 80. مقدمه‌ای بر انیمیشن‌ها با @keyframes
• 81. ایجاد انیمیشن بارگذاری (Loading Spinner)
• 82. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 83. تبدیل‌های سه بعدی (3D Transforms) و پرسپکتیو
• 84. متغیرهای CSS (Custom Properties) برای مدیریت استایل‌ها
• 85. ایجاد تم تاریک و روشن (Dark/Light Mode) با متغیرهای CSS
• 86. استفاده از تابع ()calc برای محاسبات پویا
• 87. استفاده از توابع ()min(), max(), clamp برای طراحی روان
• 88. فیلترها و حالت‌های ترکیبی (Filters & Blend Modes)
• 89. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 90. مقدمه‌ای بر متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 91. نوشتن CSS ماژولار و قابل استفاده مجدد
• 92. معرفی پیش‌پردازنده‌های CSS: Sass/SCSS
• 93. استفاده از متغیرها و تودرتویی (Nesting) در Sass
• 94. استفاده از Mixin ها برای جلوگیری از تکرار کد
• 95. استفاده از توابع و عملگرها در Sass
• 96. معرفی PostCSS و افزونه Autoprefixer
• 97. بهینه‌سازی عملکرد CSS: کوچک‌سازی (Minification)
• 98. تکنیک Critical CSS برای بارگذاری سریع‌تر
• 99. بهبود دسترسی‌پذیری (Accessibility): کنتراست رنگ
• 100. طراحی حالت‌های focus برای کاربران کیبورد