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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. چرا CSS برای داشبوردهای مدیریت ناوگان حیاتی است؟
• 3. آشنایی با ساختار یک قانون CSS (Selector, Property, Value)
• 4. روش‌های افزودن CSS به HTML (External, Internal, Inline)
• 5. اولین استایل شما: تغییر رنگ و فونت متن
• 6. انتخابگرهای اصلی: Element, Class, ID
• 7. اهمیت کامنت‌گذاری در CSS
• 8. آشنایی با ابزارهای توسعه‌دهنده مرورگر (DevTools) برای CSS
• 9. بررسی یک نمونه داشبورد مدیریت ناوگان: تحلیل CSS
• 10. تنظیم محیط توسعه برای پروژه
• 11. کار با رنگ‌ها: Hex, RGB, RGBA, HSL
• 12. استایل‌دهی به متن: font-family, font-size, font-weight
• 13. خصوصیات پیشرفته متن: text-align, line-height, text-decoration
• 14. جعبه مدل (Box Model): Content, Padding
• 15. جعبه مدل: Border و استایل‌های آن
• 16. جعبه مدل: Margin و مفهوم collapsing margins
• 17. خصوصیت display: مقادیر block, inline, inline-block
• 18. مفهوم Cascade و وراثت (Inheritance)
• 19. اولویت و قدرت انتخابگرها (Specificity)
• 20. استفاده از !important و خطرات آن
• 21. واحدهای اندازه‌گیری مطلق: px, pt
• 22. واحدهای اندازه‌گیری نسبی: em, rem
• 23. واحدهای اندازه‌گیری Viewport: vw, vh
• 24. انتخابگرهای ترکیبی (Descendant, Child, Sibling)
• 25. انتخابگرهای ویژگی (Attribute Selectors)
• 26. مقدمه‌ای بر چیدمان (Layout) در CSS
• 27. موقعیت‌یابی (Positioning): static و relative
• 28. موقعیت‌یابی: absolute و مفهوم containing block
• 29. موقعیت‌یابی: fixed و sticky
• 30. کنترل لایه‌ها با z-index
• 31. چیدمان با Float (مفهوم و کاربردهای تاریخی)
• 32. رفع مشکل Float با Clearfix
• 33. مقدمه‌ای بر Flexbox: چرا به آن نیاز داریم؟
• 34. ایجاد یک Flex Container: خصوصیت display: flex
• 35. جهت‌دهی آیتم‌ها با flex-direction
• 36. تراز افقی آیتم‌ها با justify-content
• 37. تراز عمودی آیتم‌ها با align-items
• 38. مدیریت چند خطی آیتم‌ها با flex-wrap
• 39. کنترل فضای بین آیتم‌ها با gap
• 40. کنترل رشد آیتم‌ها با flex-grow
• 41. کنترل کوچک شدن آیتم‌ها با flex-shrink
• 42. اندازه پایه آیتم‌ها با flex-basis
• 43. خلاصه نویسی با خصوصیت flex
• 44. تغییر ترتیب آیتم‌ها با order
• 45. پیاده‌سازی نوار ناوبری داشبورد با Flexbox
• 46. مقدمه‌ای بر CSS Grid Layout
• 47. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 48. استفاده از واحد fr برای ستون‌های انعطاف‌پذیر
• 49. قرار دادن آیتم‌ها در Grid با grid-column و grid-row
• 50. ایجاد فاصله بین آیتم‌ها با grid-gap
• 51. تراز کردن آیتم‌ها در Grid
• 52. نام‌گذاری خطوط و نواحی در Grid
• 53. ساختار اصلی داشبورد مدیریت ناوگان با CSS Grid
• 54. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده
• 55. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 56. طراحی واکنش‌گرا (Responsive Design) چیست؟
• 57. متا تگ Viewport و اهمیت آن
• 58. مقدمه‌ای بر Media Queries
• 59. استراتژی Mobile-First در طراحی واکنش‌گرا
• 60. تعریف نقاط شکست (Breakpoints) رایج
• 61. واکنش‌گرا کردن تصاویر (Responsive Images)
• 62. تایپوگرافی واکنش‌گرا با واحدهای نسبی و clamp()
• 63. نمایش و پنهان کردن عناصر در اندازه‌های مختلف صفحه
• 64. واکنش‌گرا کردن چیدمان Grid داشبورد
• 65. تست و دیباگ طراحی واکنش‌گرا در مرورگر
• 66. استایل‌دهی به پس‌زمینه: background-color, background-image
• 67. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 68. استفاده از چندین تصویر پس‌زمینه
• 69. ایجاد گرادینت‌های خطی و شعاعی (Gradients)
• 70. گرد کردن گوشه‌ها با border-radius
• 71. ایجاد سایه برای جعبه‌ها با box-shadow
• 72. ایجاد سایه برای متن با text-shadow
• 73. تبدیل‌های دو بعدی: 2D Transforms (translate, rotate, scale)
• 74. انیمیشن‌های نرم با Transitions
• 75. کنترل زمان‌بندی Transition با timing-functions
• 76. مقدمه‌ای بر انیمیشن‌های پیچیده با Keyframes
• 77. ساخت یک انیمیشن لودینگ برای داشبورد
• 78. اعمال فیلترهای بصری: filter (blur, grayscale, sepia)
• 79. ترکیب رنگ لایه‌ها با background-blend-mode
• 80. استایل‌دهی به فرم‌ها: input, button, textarea
• 81. استایل‌دهی به لیست‌ها و جداول داده
• 82. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌بندی
• 83. پیاده‌سازی تم روشن و تاریک (Light/Dark Mode) با متغیرها
• 84. توابع محاسباتی: calc()
• 85. توابع مقایسه‌ای: min(), max(), clamp()
• 86. انتخابگرهای شبه-کلاس (Pseudo-classes) کاربردی: hover, focus, active
• 87. انتخابگرهای شبه-کلاس ساختاری: first-child, last-child, nth-child
• 88. انتخابگرهای شبه-المان (Pseudo-elements): ::before و ::after
• 89. کاربرد عملی ::before و ::after در طراحی آیکون‌ها و لیبل‌ها
• 90. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 91. متدولوژی نام‌گذاری BEM برای مدیریت کلاس‌ها
• 92. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 93. بهینه‌سازی عملکرد CSS: کاهش حجم و پیچیدگی
• 94. دسترسی‌پذیری (Accessibility) در CSS: استایل‌دهی focus و prefers-reduced-motion
• 95. بازنشانی (Reset) و نرمال‌سازی (Normalize) CSS
• 96. پروژه عملی: طراحی کارت اطلاعات خودرو (Vehicle Card)
• 97. پروژه عملی: استایل‌دهی به یک جدول نمایش وضعیت ناوگان
• 98. پروژه عملی: ساخت یک کامپوننت هشدار (Alert Component) با استایل‌های مختلف
• 99. پروژه عملی: استایل‌دهی به نمودارها و نشانگرهای داده (Data Indicators)
• 100. جمع‌بندی نهایی و مراحل بعدی برای تسلط بر CSS