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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در مدیریت ناوگان
• 2. نحوه افزودن CSS به یک صفحه وب: داخلی، خارجی و درون‌خطی
• 3. ساختار و سینتکس پایه CSS: انتخابگر، خصوصیت و مقدار
• 4. کامنت‌گذاری در CSS برای خوانایی کد
• 5. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 6. انتخابگرهای اصلی: نوع، کلاس و شناسه (ID)
• 7. انتخابگرهای ترکیبی (Combinators): نسل، فرزند، برادر مجاور و عمومی
• 8. انتخابگرهای صفات (Attribute Selectors)
• 9. شبه‌کلاس‌ها (Pseudo-classes): :hover، :focus، :active
• 10. شبه‌کلاس‌های ساختاری: :first-child، :last-child، :nth-child
• 11. شبه‌المان‌ها (Pseudo-elements): ::before و ::after
• 12. اولویت‌بندی و آبشار (Specificity and the Cascade)
• 13. مفهوم وراثت (Inheritance)
• 14. مقداردهی !important و زمان استفاده از آن
• 15. مدل جعبه‌ای (Box Model): محتوا، فاصله‌گذاری داخلی، حاشیه و فاصله‌گذاری خارجی
• 16. خصوصیت box-sizing: content-box در مقابل border-box
• 17. واحدهای اندازه‌گیری مطلق: px, pt
• 18. واحدهای اندازه‌گیری نسبی: %, em, rem
• 19. واحدهای اندازه‌گیری Viewport: vh, vw, vmin, vmax
• 20. رنگ‌ها در CSS: نام رنگ، HEX، RGB و RGBA
• 21. رنگ‌ها با شفافیت: HSL و HSLA
• 22. تنظیم رنگ پس‌زمینه (background-color)
• 23. استفاده از تصاویر پس‌زمینه (background-image)
• 24. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 25. گرادینت‌های خطی و شعاعی در پس‌زمینه
• 26. خصوصیات حاشیه (border): ضخامت، استایل و رنگ
• 27. گرد کردن گوشه‌ها با border-radius
• 28. ایجاد سایه برای جعبه‌ها با box-shadow
• 29. خصوصیت display: block, inline, inline-block
• 30. تفاوت visibility: hidden و display: none
• 31. کنترل شفافیت با opacity
• 32. تایپوگرافی: font-family و فونت‌های وب ایمن
• 33. استفاده از فونت‌های سفارشی با @font-face و Google Fonts
• 34. اندازه و وزن فونت (font-size, font-weight)
• 35. استایل و ارتفاع خط (font-style, line-height)
• 36. تراز و تزئین متن (text-align, text-decoration)
• 37. ایجاد سایه برای متن با text-shadow
• 38. استایل‌دهی به لیست‌های مرتب و نامرتب
• 39. استایل‌دهی پایه به جداول: حاشیه، فاصله‌گذاری و ترازبندی
• 40. استایل‌دهی به ردیف‌های زوج و فرد جداول برای خوانایی بهتر
• 41. استایل‌دهی به لینک‌ها و حالت‌های مختلف آنها
• 42. طراحی دکمه‌های کاربردی برای داشبورد
• 43. موقعیت‌یابی (Positioning): static و relative
• 44. موقعیت‌یابی: absolute و fixed
• 45. کنترل لایه‌ها با z-index
• 46. موقعیت‌یابی sticky برای هدرها و سایدبارها
• 47. استفاده از Float برای چیدمان (مفهوم Legacy)
• 48. مفهوم Clearfix برای حل مشکلات Float
• 49. مقدمه‌ای بر Flexbox و موارد استفاده آن در داشبورد
• 50. کانتینر Flexbox: خصوصیات display و flex-direction
• 51. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 52. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 53. مدیریت شکست خطوط با flex-wrap
• 54. رشد، کوچک‌شدن و پایه آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 55. تغییر ترتیب آیتم‌ها با order
• 56. مقدمه‌ای بر CSS Grid و قدرت آن در چیدمان داشبورد
• 57. ایجاد یک گرید با display: grid و grid-template-columns/rows
• 58. تعیین فاصله بین ستون‌ها و ردیف‌ها با gap
• 59. موقعیت‌دهی آیتم‌ها در گرید با شماره خطوط
• 60. ادغام سلول‌ها با grid-column-end و grid-row-end
• 61. نام‌گذاری نواحی گرید با grid-template-areas
• 62. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 63. تنظیم Viewport با تگ متا
• 64. استفاده از Media Queries برای اندازه‌های مختلف صفحه
• 65. رویکرد Mobile-First در مقابل Desktop-First
• 66. تصاویر واکنش‌گرا با max-width: 100%
• 67. استفاده از واحدهای نسبی برای طراحی واکنش‌گرا
• 68. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 69. استفاده از تابع calc() برای محاسبات دینامیک
• 70. انتقال‌ها (Transitions) برای ایجاد انیمیشن‌های نرم
• 71. تبدیل‌ها (Transforms): scale, rotate, translate, skew
• 72. انیمیشن‌های پیچیده‌تر با @keyframes
• 73. فیلترهای CSS: blur, grayscale, brightness
• 74. استایل‌دهی به فرم‌های ورود اطلاعات (Inputs, Textareas)
• 75. استایل‌دهی به دکمه‌های ارسال فرم (Submit Buttons)
• 76. سفارشی‌سازی ظاهر Checkbox و Radio Button
• 77. اعتبارسنجی فرم با شبه‌کلاس‌های :valid و :invalid
• 78. مفهوم Reset CSS در مقابل Normalize.css
• 79. بهینه‌سازی کارایی CSS
• 80. سازگاری بین مرورگرها و استفاده از پیشوندها (Vendor Prefixes)
• 81. معماری CSS: مقدمه‌ای بر BEM
• 82. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 83. طراحی ساختار کلی داشبورد مدیریت ناوگان
• 84. طراحی یک نوار ناوبری (Navbar) ثابت در بالای صفحه
• 85. طراحی یک سایدبار (Sidebar) برای منوهای اصلی
• 86. استایل‌دهی به کارت‌ها (Cards) برای نمایش اطلاعات هر وسیله نقلیه
• 87. ایجاد نشانگرهای وضعیت (Status Indicators): آنلاین، آفلاین، در حال تعمیر
• 88. طراحی جداول داده برای نمایش لیست وسایل نقلیه
• 89. افزودن قابلیت مرتب‌سازی (Sort Indicators) به هدر جداول
• 90. استایل‌دهی به پنجره اطلاعات روی نقشه (Map InfoWindow/Popup)
• 91. طراحی پایه نمودارهای میله‌ای و دایره‌ای با CSS
• 92. ایجاد بنرهای هشدار و اطلاع‌رسانی (Alerts and Notifications)
• 93. طراحی یک نمای تقویم برای برنامه‌ریزی تعمیرات
• 94. ایجاد یک پنجره مودال (Modal) برای نمایش جزئیات
• 95. طراحی یک فرم چندمرحله‌ای برای ثبت راننده جدید
• 96. ایجاد یک تم تیره (Dark Mode) با استفاده از متغیرهای CSS
• 97. آماده‌سازی استایل‌ها برای چاپ (Print Stylesheets) گزارش‌ها
• 98. بهینه‌سازی نمایش داشبورد بر روی تبلت
• 99. بهینه‌سازی نمایش داشبورد بر روی موبایل
• 100. پروژه نهایی: یکپارچه‌سازی تمام اجزا و ساخت داشبورد کامل