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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در رابط کاربری مدیریت ناوگان
• 2. نحوه افزودن CSS به صفحات وب (Inline, Internal, External)
• 3. آشنایی با Syntax اصلی CSS: Selector, Property, Value
• 4. انتخابگرهای پایه: Element, Class, ID
• 5. انتخابگرهای ترکیبی (Descendant, Child, Sibling)
• 6. کامنت‌گذاری و سازماندهی اولیه کدها
• 7. آشنایی با Cascade, Specificity و Inheritance
• 8. مفهوم وراثت (Inheritance) و مقدار initial
• 9. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 10. کنترل ابعاد: width, height, min/max-width, min/max-height
• 11. خصوصیت box-sizing: content-box در مقابل border-box
• 12. واحدهای اندازه‌گیری مطلق و نسبی (px, %, em, rem)
• 13. واحدهای اندازه‌گیری Viewport (vw, vh, vmin, vmax)
• 14. کار با رنگ‌ها: Keywords, HEX, RGB, HSL
• 15. تنظیم پس‌زمینه: background-color, background-image
• 16. کنترل تصویر پس‌زمینه: background-repeat, position, size
• 17. ایجاد گرادیان‌های خطی و شعاعی برای پس‌زمینه
• 18. مبانی تایپوگرافی: font-family, font-size, font-weight
• 19. استایل‌دهی به متن: text-align, text-decoration, text-transform
• 20. فاصله‌گذاری در متن: line-height و letter-spacing
• 21. استفاده از فونت‌های سفارشی با @font-face
• 22. مبانی چیدمان: خصوصیت display (block, inline, inline-block)
• 23. کنترل نمایش عناصر با visibility و display: none
• 24. موقعیت‌یابی با Position: Static, Relative, Absolute
• 25. موقعیت‌یابی با Position: Fixed و Sticky (برای هدرهای ثابت)
• 26. کار با z-index برای مدیریت لایه‌ها و همپوشانی
• 27. چیدمان با Float و پاک‌سازی آن (Clearfix)
• 28. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 29. خصوصیات Flex Container: flex-direction و flex-wrap
• 30. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 31. تراز کردن آیتم‌ها در محور متقاطع با align-items و align-content
• 32. کنترل نحوه چینش چند خطی با align-content
• 33. خصوصیات Flex Items: flex-grow, flex-shrink, flex-basis
• 34. کنترل ترتیب نمایش آیتم‌ها با order
• 35. ساخت یک نوار کناری (Sidebar) برای داشبورد با Flexbox
• 36. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 37. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 38. ایجاد فاصله بین آیتم‌ها با gap
• 39. موقعیت‌دهی آیتم‌ها در گرید با line numbers
• 40. ادغام سلول‌ها با grid-column-start/end و grid-row-start/end
• 41. نام‌گذاری خطوط و نواحی گرید با grid-template-areas
• 42. ساخت چیدمان اصلی داشبورد مدیریت ناوگان با CSS Grid
• 43. استایل‌دهی به دکمه‌ها و لینک‌ها
• 44. حالت‌های مختلف دکمه: hover, active, focus, disabled
• 45. طراحی فرم‌های ورود اطلاعات (بخش اول: input, textarea)
• 46. طراحی فرم‌های ورود اطلاعات (بخش دوم: checkbox, radio, select)
• 47. استایل‌دهی به Placeholder و Autofill در فرم‌ها
• 48. اعتبارسنجی فرم با Pseudo-classes مانند :valid و :invalid
• 49. استایل‌دهی به جداول داده (Table Styling)
• 50. ایجاد جداول خوانا با Zebra Striping (استایل خطوط یکی در میان)
• 51. استایل‌دهی به هدر و فوتر جدول (thead, tfoot)
• 52. مدیریت سرریز متن (Text Overflow) در سلول‌های جدول
• 53. ایجاد هدر ثابت (Sticky Header) برای جداول طولانی
• 54. استفاده از آیکون‌ها (Icon Fonts و SVG) در رابط کاربری
• 55. طراحی کارت‌ها (Cards) برای نمایش اطلاعات خلاصه هر خودرو
• 56. طراحی نشانگرهای وضعیت (Status Indicators): آنلاین، آفلاین، در حرکت
• 57. استایل‌دهی به لیست‌ها و منوهای ناوبری
• 58. ساخت Breadcrumbs برای نمایش مسیر کاربر
• 59. انتخابگرهای پیشرفته و Attribute Selectors
• 60. کار با Pseudo-classes کاربردی (:nth-child, :first-child, :last-child)
• 61. استفاده از Pseudo-classهای :not() و :focus-within
• 62. کار با Pseudo-elements مانند ::before و ::after
• 63. ایجاد Tooltip سفارشی با استفاده از Pseudo-elements
• 64. ایجاد افکت‌های حرکتی نرم با Transition
• 65. کنترل زمان‌بندی Transition با transition-timing-function
• 66. انیمیشن‌های پیچیده‌تر با Animation و @keyframes
• 67. کنترل تکرار و جهت انیمیشن
• 68. متحرک‌سازی یک نشانگر وضعیت خودرو (مثلاً چشمک‌زن)
• 69. تبدیل‌های دو بعدی با Transform (translate, rotate, scale)
• 70. تبدیل‌های سه بعدی با Transform (3D)
• 71. ایجاد افکت‌های Hover پیشرفته با Transform و Transition
• 72. مبانی طراحی واکنش‌گرا (Responsive Design)
• 73. کار با Media Queries برای دستگاه‌های مختلف
• 74. رویکرد Mobile-First در مقابل Desktop-First
• 75. ایجاد تصاویر واکنش‌گرا (Responsive Images)
• 76. واکنش‌گرا کردن منوی ناوبری (Navigation Menu)
• 77. چالش‌های جداول واکنش‌گرا و راه‌حل‌های آن
• 78. واکنش‌گرا کردن داشبورد ساخته شده با Grid
• 79. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 80. استفاده از متغیرها برای مدیریت رنگ‌های برند
• 81. ایجاد تم تاریک (Dark Mode) برای داشبورد
• 82. استفاده از تابع calc() برای محاسبات دینامیک
• 83. استفاده از توابع min(), max() و clamp() برای تایپوگرافی روان
• 84. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 85. سازماندهی کدها با متدولوژی BEM (Block, Element, Modifier)
• 86. بهینه‌سازی عملکرد CSS: کاهش حجم فایل و کدهای اضافی
• 87. تکنیک‌های جلوگیری از Render-Blocking در CSS
• 88. ملاحظات دسترسی‌پذیری (Accessibility): تمرکز روی کنتراست رنگ
• 89. استفاده از :focus-visible برای بهبود تجربه کاربری کیبورد
• 90. پشتیبانی از تنظیمات کاربر با media query مانند prefers-reduced-motion
• 91. استایل‌دهی به عناصر نقشه (Map Popups/InfoWindows)
• 92. طراحی نشانگرهای سفارشی (Custom Markers) برای نقشه با CSS
• 93. استایل‌دهی به مسیرهای ترسیم شده روی نقشه
• 94. مبانی استایل‌دهی به نمودارها و گراف‌ها با CSS
• 95. ایجاد Loading Spinners و Skeleton Screens
• 96. مدیریت سرریز محتوا با overflow: scroll, auto, hidden
• 97. استایل‌دهی به Scrollbar
• 98. فیلتر کردن و اعمال افکت روی تصاویر با filter
• 99. ترکیب لایه‌ها با mix-blend-mode
• 100. ایجاد اشکال هندسی با CSS (Shapes)