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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. چرا CSS برای راهنماهای مدیریت ناوگان اهمیت دارد؟
• 3. آشنایی با سه روش استفاده از CSS: Inline, Internal, External
• 4. ساختار یک دستور CSS: انتخابگر، خصوصیت، مقدار
• 5. نحوه اتصال فایل CSS به سند HTML
• 6. کار با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 7. مفهوم Box Model: محتوا، Padding, Border, Margin
• 8. واحد اندازه‌گیری: پیکسل، درصد، em و rem
• 9. خصوصیت box-sizing و اهمیت آن
• 10. تنظیم عرض (width) و ارتفاع (height) عناصر
• 11. مفهوم انتخابگرها (Selectors) در CSS
• 12. انتخابگرهای اصلی: Element, Class, ID
• 13. ترکیب انتخابگرها برای هدف‌گیری دقیق
• 14. انتخابگرهای فرزند و نواده (Descendant and Child Selectors)
• 15. انتخابگرهای همسایه (Adjacent and General Sibling Selectors)
• 16. مفهوم وراثت (Inheritance) در CSS
• 17. اولویت‌بندی و آبشاری بودن (Specificity and Cascade)
• 18. استفاده از کامنت در کدهای CSS
• 19. کار با رنگ‌ها: نام رنگ، HEX, RGB, RGBA
• 20. کار با پس‌زمینه: background-color و background-image
• 21. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 22. استفاده از گرادینت‌ها (Gradients) در پس‌زمینه
• 23. استایل‌دهی به متون: color, text-align, text-decoration
• 24. تنظیم فونت: font-family, font-size, font-weight
• 25. استفاده از فونت‌های وب (مانند Google Fonts)
• 26. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن (hover, active)
• 27. استایل‌دهی به لیست‌ها (ul, ol)
• 28. طراحی جداول: استایل‌دهی به سطرها، ستون‌ها و سلول‌ها
• 29. مثال عملی: طراحی جدول نمایش وضعیت خودروها
• 30. استایل‌دهی به فرم‌ها: input, textarea, button
• 31. مثال عملی: طراحی فرم ثبت اطلاعات راننده جدید
• 32. خصوصیت display: block, inline, inline-block
• 33. تفاوت display: none و visibility: hidden
• 34. ایجاد سایه برای جعبه‌ها (box-shadow) و متون (text-shadow)
• 35. تنظیم شفافیت عناصر با opacity
• 36. گرد کردن گوشه‌ها با border-radius
• 37. استایل‌دهی پیشرفته به حاشیه‌ها (Borders)
• 38. مقدمه‌ای بر چیدمان (Layout) در CSS
• 39. مفهوم Position: static, relative, absolute, fixed
• 40. کار با z-index برای مدیریت لایه‌ها
• 41. استفاده از Position: sticky برای هدرهای چسبان
• 42. چیدمان با Float (مفهوم و کاربردهای قدیمی)
• 43. مفهوم Clearfix برای حل مشکلات Float
• 44. مقدمه‌ای بر Flexbox: مدل چیدمان مدرن
• 45. ویژگی‌های Flex Container: display, flex-direction, justify-content
• 46. ویژگی‌های Flex Container: align-items, align-content, flex-wrap
• 47. مثال عملی: ساخت نوار ناوبری اصلی داشبورد با Flexbox
• 48. ویژگی‌های Flex Items: flex-grow, flex-shrink, flex-basis
• 49. ویژگی order برای تغییر ترتیب نمایش آیتم‌ها
• 50. مثال عملی: چیدمان کارت‌های نمایش اطلاعات خودرو با Flexbox
• 51. مقدمه‌ای بر CSS Grid: قدرتمندترین ابزار چیدمان
• 52. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 53. تنظیم فاصله بین آیتم‌ها با gap
• 54. مکان‌یابی آیتم‌ها در گرید با شماره خطوط
• 55. مثال عملی: طراحی ساختار کلی داشبورد مدیریت ناوگان با Grid
• 56. استفاده از grid-template-areas برای چیدمان بصری
• 57. تکنیک‌های مرکز قراردادن عناصر (Centering)
• 58. مبانی طراحی واکنش‌گرا (Responsive Design)
• 59. استفاده از Viewport Meta Tag
• 60. Media Queries و تعریف Breakpointها
• 61. رویکرد Mobile-First در طراحی واکنش‌گرا
• 62. استفاده از واحدهای واکنش‌گرا: vw, vh
• 63. مثال عملی: واکنش‌گرا کردن جدول اطلاعات ناوگان برای موبایل
• 64. تصاویر واکنش‌گرا (Responsive Images)
• 65. انتخابگرهای پیشرفته: Attribute Selectors
• 66. شبه‌کلاس‌ها (Pseudo-classes): hover, focus, active
• 67. مثال عملی: ایجاد افکت‌های تعاملی برای دکمه‌های داشبورد
• 68. شبه‌کلاس‌های ساختاری: first-child, last-child, nth-child
• 69. مثال عملی: ایجاد سطرهای یکی در میان رنگی (Zebra Striping) در جداول
• 70. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 71. مثال عملی: افزودن آیکون وضعیت به لیست خودروها با ::before
• 72. مقدمه‌ای بر Transitions برای انیمیشن‌های ساده
• 73. کنترل زمان‌بندی و تأخیر در Transitions
• 74. مثال عملی: افکت نرم در تغییر رنگ دکمه‌ها
• 75. مقدمه‌ای بر Transforms: scale, rotate, translate, skew
• 76. انیمیشن‌های پیچیده‌تر با @keyframes و animation
• 77. مثال عملی: انیمیشن بارگذاری داده‌ها در داشبورد
• 78. متغیرها در CSS (Custom Properties) و کاربرد آن
• 79. مثال عملی: ایجاد تم تاریک و روشن (Dark/Light Mode) برای داشبورد
• 80. استفاده از تابع calc() برای محاسبات دینامیک
• 81. استفاده از توابع min(), max(), و clamp()
• 82. اعمال فیلترهای گرافیکی با filter: blur, grayscale
• 83. کنترل نحوه نمایش تصاویر با object-fit
• 84. استایل‌دهی برای چاپ (Print Stylesheets)
• 85. مثال عملی: طراحی نسخه قابل چاپ برای گزارش‌های سفر
• 86. مبانی دسترسی‌پذیری (Accessibility) در CSS
• 87. اهمیت استایل‌دهی به حالت focus
• 88. انتخاب رنگ‌ها با کنتراست مناسب برای خوانایی
• 89. مخفی کردن محتوا به روش صحیح برای Screen Reader ها
• 90. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 91. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 92. استفاده از Reset CSS یا Normalize.css
• 93. بهینه‌سازی عملکرد: فشرده‌سازی (Minify) فایل‌های CSS
• 94. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 95. مفاهیم اصلی Sass: متغیرها و تودرتویی (Nesting)
• 96. استفاده از Mixin و Extend در Sass
• 97. جمع‌بندی و پروژه نهایی: ساخت کامل رابط کاربری داشبورد مدیریت ناوگان
• 98. **طراحی واکنش‌گرا (Responsive Design) با CSS: تطبیق راهنماها با دستگاه‌های مختلف**
• 99. **استفاده از Flexbox و Grid Layout برای ایجاد طرح‌بندی‌های پیچیده در راهنماها**
• 100. **بهینه‌سازی CSS برای افزایش سرعت بارگذاری و بهبود تجربه کاربری راهنماها**