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

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

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

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

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

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

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

• 1. مقدمه: CSS چیست و چه نقشی در مدیریت ناوگان دارد؟
• 2. تنظیم محیط توسعه
• 3. نحوه اتصال CSS به HTML: روش‌های داخلی، خارجی و درون‌خطی
• 4. سینتکس پایه CSS: انتخابگر، خصوصیت و مقدار
• 5. کامنت‌گذاری در CSS
• 6. انتخابگرهای اصلی: عنصر، کلاس و شناسه (ID)
• 7. مفهوم Specificity (اولویت در CSS) و نحوه محاسبه آن
• 8. مفهوم وراثت (Inheritance)
• 9. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 10. خصوصیت box-sizing: content-box در مقابل border-box
• 11. واحدهای اندازه‌گیری مطلق: پیکسل (px)
• 12. واحدهای اندازه‌گیری نسبی: درصد (%)
• 13. واحدهای اندازه‌گیری نسبی: em و rem
• 14. واحدهای اندازه‌گیری Viewport: vw و vh
• 15. کار با رنگ‌ها: کلمات کلیدی، HEX، RGB و RGBA
• 16. تنظیم رنگ پس‌زمینه (background-color)
• 17. استفاده از تصاویر پس‌زمینه (background-image)
• 18. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 19. استایل‌دهی به متون: font-family و font-size
• 20. استایل‌دهی به متون: font-weight و font-style
• 21. تراز کردن متن: text-align و vertical-align
• 22. فاصله‌گذاری در متن: line-height و letter-spacing
• 23. استایل‌دهی به لینک‌ها و حالت‌های آن‌ها (link, visited, hover, active)
• 24. استایل‌دهی به لیست‌های مرتب و نامرتب
• 25. خصوصیت display: block, inline, inline-block
• 26. خصوصیت display: none و visibility: hidden
• 27. استایل‌دهی به حاشیه‌ها (Borders): ضخامت، نوع و رنگ
• 28. گرد کردن گوشه‌ها با border-radius
• 29. ایجاد سایه برای جعبه‌ها با box-shadow
• 30. ایجاد سایه برای متون با text-shadow
• 31. مفهوم شبه‌کلاس‌ها (Pseudo-classes): focus, first-child, last-child
• 32. مفهوم شبه‌عناصر (Pseudo-elements): ::before و ::after
• 33. انتخابگرهای ترکیبی (Combinators): فرزند، نسل، همسایه و عمومی
• 34. انتخابگرهای صفت (Attribute Selectors)
• 35. مقدمه‌ای بر Flexbox برای چیدمان داشبورد
• 36. خصوصیات Flex Container: flex-direction و flex-wrap
• 37. خصوصیات Flex Container: justify-content
• 38. خصوصیات Flex Container: align-items و align-content
• 39. خصوصیات Flex Items: flex-grow, flex-shrink, flex-basis
• 40. خصوصیت order برای تغییر ترتیب آیتم‌ها در Flexbox
• 41. ساخت یک هدر واکنش‌گرا برای اپلیکیشن با Flexbox
• 42. مقدمه‌ای بر CSS Grid برای چیدمان‌های پیچیده
• 43. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 44. ایجاد فاصله بین آیتم‌ها با gap
• 45. موقعیت‌دهی آیتم‌ها در Grid با grid-column و grid-row
• 46. نام‌گذاری نواحی در Grid با grid-template-areas
• 47. ساخت طرح‌بندی داشبورد مدیریت ناوگان با CSS Grid
• 48. موقعیت‌دهی (Positioning): static و relative
• 49. موقعیت‌دهی: absolute و fixed
• 50. موقعیت‌دهی: sticky برای هدرهای ثابت
• 51. کنترل لایه‌ها با z-index
• 52. مفهوم Floating و Clearfix
• 53. خصوصیت overflow برای کنترل محتوای سرریز شده
• 54. طراحی واکنش‌گرا (Responsive Design) چیست؟
• 55. استفاده از Media Queries برای دستگاه‌های مختلف
• 56. رویکرد Mobile-First در طراحی واکنش‌گرا
• 57. استفاده از تصاویر واکنش‌گرا
• 58. تایپوگرافی واکنش‌گرا با واحدهای نسبی و تابع clamp()
• 59. مقدمه‌ای بر Transition برای انیمیشن‌های ساده
• 60. کنترل زمان و نوع Transition
• 61. ترکیب چندین Transition
• 62. مقدمه‌ای بر Transform برای تغییرات بصری
• 63. توابع Transform: translate() و scale()
• 64. توابع Transform: rotate() و skew()
• 65. ایجاد انیمیشن‌های پیچیده با @keyframes
• 66. کنترل انیمیشن: animation-duration, animation-iteration-count
• 67. استفاده از متغیرهای CSS (Custom Properties) برای تم‌بندی
• 68. استفاده از تابع calc() برای محاسبات دینامیک
• 69. استایل‌دهی به فرم‌ها: مقدمه و ساختار
• 70. استایل‌دهی به Input و Textarea
• 71. استایل‌دهی به دکمه‌ها (Buttons)
• 72. ایجاد چک‌باکس‌ها و دکمه‌های رادیویی سفارشی
• 73. استایل‌دهی به فرم‌ها بر اساس وضعیت: :valid, :invalid, :required
• 74. استایل‌دهی جداول داده (Data Tables) برای نمایش لاگ خودروها
• 75. بهبود خوانایی جداول با zebra-striping
• 76. ایجاد هدرهای ثابت (Sticky Headers) برای جداول طولانی
• 77. طراحی کارت‌های اطلاعاتی (Cards) برای نمایش وضعیت هر خودرو
• 78. استایل‌دهی به نشانگرهای کلیدی عملکرد (KPIs) در داشبورد
• 79. طراحی و استایل‌دهی هشدارهای ناوگان (Alerts & Notifications)
• 80. استایل‌دهی به پاپ‌آپ‌ها و مدال‌ها (Modals)
• 81. استایل‌دهی اولیه به نمودارها و گراف‌ها
• 82. استایل‌دهی به عناصر نقشه (Map Markers & InfoWindows)
• 83. ایجاد Tooltip های سفارشی با CSS
• 84. فیلترهای CSS: grayscale, blur, brightness
• 85. ایجاد افکت‌های شیشه‌ای (Glassmorphism) برای داشبورد
• 86. استایل‌دهی برای چاپ (Print Stylesheets) جهت گزارش‌گیری
• 87. سازماندهی فایل‌های CSS
• 88. متدولوژی BEM برای نوشتن CSS مقیاس‌پذیر
• 89. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 90. استفاده از متغیرها و Nesting در Sass
• 91. استفاده از Mixin ها در Sass برای کدهای قابل استفاده مجدد
• 92. مفهوم CSS-in-JS (معرفی کلی)
• 93. بهینه‌سازی عملکرد CSS: کوچک‌سازی (Minification)
• 94. تکنیک‌های بارگذاری بهینه CSS
• 95. اشکال‌زدایی (Debugging) با استفاده از ابزارهای توسعه‌دهنده مرورگر
• 96. اطمینان از سازگاری بین مرورگرها (Cross-browser Compatibility)
• 97. استفاده از Autoprefixer
• 98. مبانی دسترسی‌پذیری (Accessibility): کنتراست رنگ
• 99. مبانی دسترسی‌پذیری: استایل‌دهی به حالت focus
• 100. استفاده از Reset CSS یا Normalize.css