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

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب CSS for Fleet Management Challenges

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

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

📋 سرفصل‌های کتاب (100 موضوع)

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. نحوه افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. آشنایی با سینتکس CSS: انتخابگرها، خصوصیات و مقادیر
• 4. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 5. کامنت‌گذاری در CSS
• 6. واحدهای اندازه‌گیری مطلق و نسبی (px, %, em, rem, vh, vw)
• 7. کار با رنگ‌ها: کلمات کلیدی، HEX، RGB و RGBA
• 8. فهم آبشار (Cascade) در CSS
• 9. مفهوم ارث‌بری (Inheritance)
• 10. مقدمه‌ای بر اولویت‌بندی و Specificity
• 11. مدل جعبه‌ای (Box Model): محتوا، Padding، Border و Margin
• 12. خصوصیت box-sizing: content-box در مقابل border-box
• 13. خصوصیت display: block, inline و inline-block
• 14. مبانی موقعیت‌دهی (Positioning): static و relative
• 15. موقعیت‌دهی پیشرفته: absolute, fixed و sticky
• 16. کنترل لایه‌ها با z-index
• 17. مفهوم Float و چالش‌های آن (برای آشنایی)
• 18. پاک‌سازی Float ها با Clearfix
• 19. کنترل سرریز محتوا با خصوصیت overflow
• 20. مقدمه‌ای بر تایپوگرافی در وب
• 21. خصوصیات font-family, font-size و font-weight
• 22. استفاده از فونت‌های سفارشی با @font-face
• 23. تراز و دکوراسیون متن (text-align, text-decoration)
• 24. استایل‌دهی به لیست‌ها برای نمایش لیست خودروها
• 25. استایل‌دهی به جداول برای گزارشات ناوگان
• 26. استایل‌دهی به لینک‌ها و دکمه‌ها
• 27. کار با پس‌زمینه‌ها: رنگ، تصویر و موقعیت
• 28. ایجاد گرادیان‌های خطی و شعاعی
• 29. استایل‌دهی به فرم‌ها: input, textarea, select
• 30. استایل‌دهی به حالت‌های مختلف فرم با شبه‌کلاس‌ها (pseudo-classes)
• 31. شبه‌کلاس‌های تعاملی: :hover, :focus, :active
• 32. شبه‌المان‌ها (pseudo-elements): ::before و ::after
• 33. استفاده از آیکن‌ها (Font Icons و SVG)
• 34. گرد کردن گوشه‌ها با border-radius
• 35. ایجاد سایه برای جعبه‌ها و متون (box-shadow, text-shadow)
• 36. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 37. استفاده از متا تگ viewport
• 38. مبانی Media Queries
• 39. رویکرد Mobile-First در طراحی داشبورد
• 40. نقاط شکست (Breakpoints) رایج برای داشبوردهای مدیریتی
• 41. معرفی Flexbox برای چیدمان‌های یک‌بعدی
• 42. خصوصیات کانتینر Flexbox: flex-direction, justify-content, align-items
• 43. خصوصیات آیتم‌های Flexbox: flex-grow, flex-shrink, flex-basis
• 44. ساخت نوار هدر واکنش‌گرا با Flexbox
• 45. ایجاد لیست کارت‌های خودرو با Flexbox
• 46. معرفی CSS Grid برای چیدمان‌های دوبعدی
• 47. تعریف ستون‌ها و ردیف‌ها در Grid
• 48. جایگذاری آیتم‌ها در Grid با شماره خطوط
• 49. استفاده از Grid Areas برای ساختار اصلی داشبورد
• 50. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده
• 51. واکنش‌گرا کردن تصاویر
• 52. تایپوگرافی واکنش‌گرا با تابع clamp()
• 53. انتخابگرهای صفات (Attribute Selectors) برای نمایش وضعیت خودروها
• 54. انتخابگرهای ترکیبی (Combinators): فرزند، نسل و همسایه
• 55. شبه‌کلاس‌های ساختاری: :nth-child, :first-child, :last-child
• 56. استفاده از شبه‌کلاس :not() برای استثنا قائل شدن
• 57. محاسبه و مدیریت Specificity در پروژه‌های بزرگ
• 58. قانون !important و زمان صحیح استفاده از آن
• 59. معماری CSS: معرفی متدولوژی BEM
• 60. سازماندهی فایل‌های CSS برای پروژه‌های بزرگ
• 61. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 62. مقدمه‌ای بر Transitions برای انیمیشن‌های نرم
• 63. خصوصیات Transition: property, duration, timing-function, delay
• 64. مقدمه‌ای بر Transforms: توابع translate(), rotate(), scale()
• 65. تغییر نقطه کانونی Transform با transform-origin
• 66. انیمیشن‌های پیچیده‌تر با @keyframes
• 67. کنترل انیمیشن‌ها با خصوصیت animation
• 68. فیلترهای تصویری CSS: blur(), brightness(), grayscale()
• 69. استفاده از clip-path برای ایجاد اشکال سفارشی
• 70. متغیرهای CSS (Custom Properties) برای مدیریت تم‌ها
• 71. استفاده از تابع calc() برای محاسبات دینامیک
• 72. کار با واحدهای منطقی (Logical Properties)
• 73. کنترل نسبت ابعاد با خصوصیت aspect-ratio
• 74. بهبود تجربه اسکرول با scroll-behavior و scroll-snap
• 75. حالت‌های ترکیب (Blend Modes) در CSS
• 76. کنترل نحوه نمایش تصویر در کانتینر با object-fit
• 77. مینیفای کردن (Minify) فایل‌های CSS برای بهینه‌سازی
• 78. ساخت ساختار اصلی داشبورد با CSS Grid
• 79. استایل‌دهی به کانتینر نقشه و مدیریت z-index برای لایه‌های روی آن
• 80. ایجاد نشانگرهای خودرو روی نقشه با CSS
• 81. انیمیشن‌دهی به نشانگرها بر اساس وضعیت (حرکت، توقف، هشدار)
• 82. طراحی لیست خودروها با نمایشگر وضعیت (آنلاین، آفلاین، در حال حرکت)
• 83. پیاده‌سازی نوار فیلتر و مرتب‌سازی برای لیست خودروها
• 84. طراحی هشدارهای آنی (Notification Toasts)
• 85. استایل‌دهی به پاپ‌آپ‌ها (Modals) برای نمایش جزئیات راننده/خودرو
• 86. ساخت جداول داده واکنش‌گرا برای گزارش‌گیری
• 87. ایجاد نوارهای پیشرفت (Progress Bars) برای وضعیت سفر یا سوخت
• 88. طراحی تایم‌لاین برای نمایش تاریخچه تردد خودرو
• 89. استایل‌دهی پایه به نمودارها (Bar Chart, Pie Chart) با CSS
• 90. طراحی فرم ورود به پنل مدیریت ناوگان
• 91. پیاده‌سازی منوی کناری جمع‌شونده (Collapsible Sidebar)
• 92. ایجاد یک سیستم تم روشن و تاریک (Light/Dark Mode) با متغیرهای CSS
• 93. اصول CSS برای دسترسی‌پذیری (Accessibility): استایل‌دهی به حالت focus
• 94. ایجاد استایل‌های مخصوص چاپ برای گزارشات (@media print)
• 95. تکنیک‌های دیباگ کردن CSS با ابزارهای مرورگر
• 96. بهینه‌سازی عملکرد CSS: کاهش Reflow و Repaint
• 97. پروژه نهایی: یکپارچه‌سازی تمام کامپوننت‌ها در یک داشبورد مدیریت ناوگان
• 98. **طراحی واکنش‌گرا (Responsive Design) و Media Queries برای مدیریت ناوگان:** (بهینه‌سازی نمایش وبسایت در دستگاه‌های مختلف مورد استفاده مدیران ناوگان)
• 99. **استفاده از Flexbox و Grid Layout برای ساخت داشبوردهای مدیریتی:** (طراحی ساختارهای منعطف و کارآمد برای نمایش اطلاعات ناوگان)
• 100. **انیمیشن‌ها و Transitionها در CSS برای بهبود UX:** (افزایش جذابیت و تعامل با داشبوردها و گزارش‌های مدیریتی)