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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در ابزارهای مدیریت ناوگان
• 2. نحوه افزودن CSS به HTML: خارجی، داخلی و درون‌خطی
• 3. آشنایی با سینتکس CSS: انتخابگر، خصوصیت و مقدار
• 4. کامنت‌گذاری در CSS برای خوانایی کد
• 5. انتخابگرهای اصلی: Element, Class, ID
• 6. ترکیب انتخابگرها (Descendant, Child, Sibling)
• 7. آشنایی با مفهوم Specificity و قانون اولویت‌بندی
• 8. مفهوم ارث‌بری (Inheritance) در CSS
• 9. مدل جعبه‌ای (Box Model): محتوا، Padding, Border, Margin
• 10. واحد‌های اندازه‌گیری: Px, %, em, rem
• 11. واحدهای Viewport: vh, vw, vmin, vmax
• 12. خصوصیات Width و Height و کنترل ابعاد
• 13. خصوصیت Padding و ایجاد فضای داخلی
• 14. خصوصیت Border و استایل‌دهی به حاشیه‌ها
• 15. خصوصیت Margin و ایجاد فاصله خارجی
• 16. کنترل Box Model با Box-sizing
• 17. مقدمه‌ای بر ابزارهای توسعه‌دهنده مرورگر (DevTools) برای CSS
• 18. استایل‌دهی به متون: Font-family و Font-size
• 19. خصوصیات Font-weight و Font-style
• 20. ترازبندی متن با Text-align و Vertical-align
• 21. فاصله‌گذاری بین خطوط و کاراکترها (Line-height, Letter-spacing)
• 22. استفاده از فونت‌های وب (Web Fonts) و @font-face
• 23. رنگ‌ها در CSS: نام رنگ، HEX, RGB, HSL
• 24. استایل‌دهی به پس‌زمینه: Background-color و Background-image
• 25. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 26. گرادینت‌های خطی و شعاعی در پس‌زمینه
• 27. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن (:link, :visited, :hover, :active)
• 28. استایل‌دهی به لیست‌های مرتب و نامرتب
• 29. مقدمه‌ای بر استایل‌دهی جداول برای نمایش داده‌های ناوگان
• 30. استایل‌دهی به سربرگ (thead) و بدنه (tbody) جداول
• 31. ایجاد جداول راه‌راه (Zebra-striping) برای خوانایی بهتر
• 32. کنترل Border و Spacing در جداول
• 33. استایل‌دهی به فرم‌ها و تگ Input
• 34. استایل‌دهی به دکمه‌ها (Buttons)
• 35. سودوکلاس‌ها (Pseudo-classes): focus, checked, disabled
• 36. شخصی‌سازی Checkbox و Radio Button
• 37. خصوصیت Display: block, inline, inline-block
• 38. پنهان کردن عناصر با Display: none و Visibility: hidden
• 39. مفهوم Positioning: static, relative, absolute, fixed
• 40. کنترل لایه‌ها با Z-index
• 41. موقعیت‌یابی چسبان (Sticky Positioning)
• 42. کار با Float برای چیدمان (مفهوم و کاربرد تاریخی)
• 43. مفهوم Clearfix برای حل مشکلات Float
• 44. مقدمه‌ای بر Flexbox برای چیدمان‌های مدرن
• 45. خصوصیات Flex Container: display, flex-direction, flex-wrap
• 46. تراز بندی در محور اصلی با Justify-content
• 47. تراز بندی در محور متقاطع با Align-items
• 48. کنترل چندین خط در Flexbox با Align-content
• 49. خصوصیات Flex Items: flex-grow, flex-shrink, flex-basis
• 50. کنترل ترتیب عناصر با Order
• 51. مثال عملی با Flexbox: ساخت نوار کناری (Sidebar)
• 52. مقدمه‌ای بر CSS Grid برای چیدمان‌های دو بعدی
• 53. تعریف ستون‌ها و ردیف‌ها با Grid-template-columns و Grid-template-rows
• 54. کنترل فاصله بین عناصر با Gap
• 55. جایگذاری آیتم‌ها با استفاده از شماره خطوط Grid
• 56. جایگذاری آیتم‌ها با استفاده از Grid-template-areas
• 57. تراز بندی آیتم‌ها در Grid: justify-items و align-items
• 58. تراز بندی محتوای Grid: justify-content و align-content
• 59. مثال عملی با Grid: طراحی لایه‌بندی داشبورد
• 60. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 61. کار با Viewport Meta Tag
• 62. استفاده از Media Queries برای Breakpoint‌های مختلف
• 63. رویکرد Mobile-First در طراحی واکنش‌گرا
• 64. ساخت تصاویر واکنش‌گرا
• 65. ساخت جداول واکنش‌گرا برای نمایش در موبایل
• 66. سودوکلاس‌های ساختاری: first-child, last-child, nth-child
• 67. سودوالمنت‌ها (Pseudo-elements): ::before و ::after
• 68. کاربرد عملی ::before و ::after در طراحی آیکون‌ها
• 69. متحرک‌سازی نرم با Transition
• 70. تغییر شکل عناصر با Transform: scale, rotate, translate, skew
• 71. ترکیب Transition و Transform برای افکت‌های تعاملی
• 72. انیمیشن‌های پیچیده با @keyframes و خصوصیت Animation
• 73. متغیرهای CSS (Custom Properties) برای تم‌سازی
• 74. استفاده از تابع calc() برای محاسبات دینامیک
• 75. استایل‌دهی بر اساس خصوصیات (Attribute Selectors)
• 76. ایجاد سایه برای جعبه‌ها با Box-shadow
• 77. ایجاد سایه برای متون با Text-shadow
• 78. فیلترهای CSS: blur, grayscale, brightness
• 79. کنترل محتوا با Overflow
• 80. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 81. متغیرها و Nesting در SASS
• 82. میکسین‌ها (Mixins) در SASS برای کدهای قابل استفاده مجدد
• 83. سازماندهی فایل‌های CSS با متدولوژی BEM
• 84. بهینه‌سازی عملکرد CSS: کاهش حجم و افزایش سرعت بارگذاری
• 85. طراحی لایه‌بندی اصلی داشبورد مدیریت ناوگان
• 86. طراحی کامپوننت کارت (Card) برای نمایش وضعیت هر خودرو
• 87. استایل‌دهی به نشانگرهای وضعیت آنلاین/آفلاین (Status Indicators)
• 88. طراحی نمودارها و گراف‌ها (استایل‌دهی اولیه)
• 89. استایل‌دهی پیشرفته جداول: سربرگ‌های چسبان (Sticky Headers)
• 90. استایل‌دهی فرم‌های ورود داده (ثبت گزارش سفر، سوخت و...)
• 91. استایل‌دهی به Tooltip برای نمایش اطلاعات اضافی
• 92. طراحی و استایل‌دهی نوارهای پیشرفت (Progress Bars)
• 93. استایل‌دهی به نقشه تعاملی (سفارشی‌سازی پاپ‌آپ‌ها و مارکرها)
• 94. طراحی منوی ناوبری اصلی و کناری (Sidebar Navigation)
• 95. استایل‌دهی به مودال‌ها (Modals) و پنجره‌های پاپ‌آپ
• 96. ساخت تم تاریک (Dark Mode) با استفاده از متغیرهای CSS
• 97. ایجاد یک سیستم طراحی (Design System) کوچک برای ثبات ظاهری
• 98. استایل‌دهی برای چاپ (Print Stylesheets) جهت تهیه گزارش
• 99. ملاحظات دسترسی‌پذیری (Accessibility) در استایل‌دهی
• 100. پروژه نهایی: یکپارچه‌سازی و ساخت کامل رابط کاربری داشبورد