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

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

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

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

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

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

• 1. مقدمه و مفاهیم پایه CSS
• 2. CSS چیست و چه نقشی در وب دارد؟
• 3. آناتومی یک قانون CSS: انتخابگر، خصوصیت و مقدار
• 4. روش‌های افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 5. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 6. ترکیب‌کننده‌ها: انتخابگرهای فرزند، نسل و همسایه
• 7. انتخابگرهای صفت (Attribute Selectors)
• 8. شبه‌کلاس‌ها (Pseudo-classes) مانند :hover و :focus
• 9. شبه‌المان‌ها (Pseudo-elements) مانند ::before و ::after
• 10. اولویت و آبشاری بودن در CSS (Specificity and Cascade)
• 11. مفهوم وراثت (Inheritance)
• 12. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 13. خصوصیت box-sizing: content-box در مقابل border-box
• 14. واحدها در CSS: واحدهای مطلق (px)
• 15. واحدها در CSS: واحدهای نسبی (em, rem)
• 16. واحدها در CSS: واحدهای Viewport (vh, vw)
• 17. کار با رنگ‌ها: نام، هگزادسیمال، RGB و RGBA
• 18. کار با رنگ‌ها: HSL و HSLA
• 19. استایل‌دهی به پس‌زمینه: background-color و background-image
• 20. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 21. استایل‌دهی به مرزها (Borders) و گرد کردن گوشه‌ها (border-radius)
• 22. مبانی تایپوگرافی: font-family و font-size
• 23. استایل‌دهی به متن: font-weight, font-style, line-height
• 24. تراز و دکوراسیون متن: text-align, text-decoration
• 25. کامنت‌گذاری در CSS و اهمیت آن
• 26. چیدمان و موقعیت‌یابی (Layout and Positioning)
• 27. خصوصیت display: بلاک، اینلاین و اینلاین-بلاک
• 28. موقعیت‌یابی (Positioning): static و relative
• 29. موقعیت‌یابی (Positioning): absolute و fixed
• 30. موقعیت‌یابی (Positioning): sticky
• 31. کنترل لایه‌ها با z-index
• 32. چیدمان با Float و پاک‌سازی آن (Clearfix)
• 33. مقدمه‌ای بر Flexbox برای چیدمان‌های یک‌بعدی
• 34. کانتینر Flexbox و خصوصیت‌های اصلی آن
• 35. تنظیم جهت و شکست خطوط در Flexbox (flex-direction, flex-wrap)
• 36. تراز کردن آیتم‌ها در محور اصلی (justify-content)
• 37. تراز کردن آیتم‌ها در محور متقاطع (align-items)
• 38. تراز کردن خطوط در کانتینر Flexbox (align-content)
• 39. خصوصیت‌های آیتم‌های Flexbox: flex-grow, flex-shrink, flex-basis
• 40. شورت‌هند flex و کنترل ترتیب با order
• 41. مقدمه‌ای بر CSS Grid برای چیدمان‌های دوبعدی
• 42. تعریف ستون‌ها و ردیف‌ها در Grid (grid-template-columns/rows)
• 43. استفاده از واحد fr و تابع ()repeat در Grid
• 44. ایجاد فاصله بین آیتم‌ها با gap
• 45. موقعیت‌دهی آیتم‌ها در Grid با شماره خطوط
• 46. تراز کردن آیتم‌ها در Grid (justify-items, align-items)
• 47. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 48. استایل‌دهی به کامپوننت‌های داشبورد مدیریت ناوگان
• 49. استایل‌دهی به دکمه‌ها و حالت‌های مختلف آن (hover, active, disabled)
• 50. طراحی فرم‌های ورود اطلاعات: فیلدهای متنی و ناحیه متنی
• 51. استایل‌دهی سفارشی به چک‌باکس‌ها و دکمه‌های رادیویی
• 52. ساخت یک فرم ورود (Login) برای مدیران ناوگان
• 53. استایل‌دهی به جداول برای نمایش لیست خودروها
• 54. استایل‌دهی شرطی به ردیف‌های جدول (مثلاً وضعیت "در دست تعمیر")
• 55. ایجاد هدرهای ثابت (Sticky Headers) برای جداول داده
• 56. طراحی نوار ناوبری اصلی (Navigation Bar)
• 57. ساخت منوی کناری (Sidebar) برای داشبورد
• 58. طراحی کارت‌ها (Cards) برای نمایش اطلاعات راننده یا خودرو
• 59. ایجاد نشانگرهای وضعیت (Status Indicators) با CSS (آنلاین، آفلاین)
• 60. استایل‌دهی به لیست‌ها برای نمایش تاریخچه سفرها
• 61. طراحی مودال‌ها (Modals) برای نمایش جزئیات
• 62. شخصی‌سازی پنجره اطلاعات روی نقشه (Map InfoWindow)
• 63. طراحی نوارهای پیشرفت (Progress Bars) برای نمایش میزان پیمایش
• 64. ایجاد تولتیپ‌های (Tooltips) سفارشی
• 65. استایل‌دهی به منوهای کشویی (Dropdown Menus)
• 66. طراحی سیستم هشدار و نوتیفیکیشن
• 67. شخصی‌سازی اسکرول‌بار مرورگر
• 68. طراحی و استایل‌دهی به نمودارهای ساده با CSS
• 69. تکنیک‌های پیشرفته و طراحی واکنش‌گرا (Responsive)
• 70. مقدمه‌ای بر طراحی واکنش‌گرا و تگ متا viewport
• 71. استفاده از Media Queries برای تعریف Breakpointها
• 72. رویکرد Mobile-First در مقابل Desktop-First
• 73. واکنش‌گرا کردن تصاویر با max-width
• 74. استفاده از تگ picture و srcset برای تصاویر واکنش‌گرا
• 75. تایپوگرافی واکنش‌گرا با تابع ()clamp
• 76. متحرک‌سازی با Transitions
• 77. کنترل زمان‌بندی و تأخیر در Transitions
• 78. انیمیشن‌های پیچیده‌تر با @keyframes
• 79. کنترل انیمیشن‌ها با خصوصیت animation
• 80. ترنسفورم‌های دوبعدی: translate, rotate, scale
• 81. ترنسفورم‌های سه‌بعدی (3D Transforms)
• 82. متغیرهای CSS (Custom Properties) و کاربرد آن‌ها
• 83. استفاده از متغیرها برای ساخت تم تاریک و روشن (Theming)
• 84. شبه‌کلاس :root و تعریف متغیرهای سراسری
• 85. استفاده از تابع ()calc برای محاسبات داینامیک
• 86. کاربردهای پیشرفته ::before و ::after
• 87. فیلترهای CSS برای افکت‌های تصویری (blur, grayscale)
• 88. حالت‌های ترکیبی (Blend Modes)
• 89. معماری، بهینه‌سازی و پروژه‌های عملی
• 90. سازماندهی فایل‌های CSS در پروژه‌های بزرگ
• 91. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 92. نوشتن CSS قابل نگهداری و مقیاس‌پذیر
• 93. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 94. استفاده از متغیرها و تودرتویی (Nesting) در Sass
• 95. استفاده از Mixinها و وراثت (Extend) در Sass
• 96. CSS و دسترسی‌پذیری (Accessibility): استایل‌دهی به حالت focus
• 97. پنهان‌سازی محتوا به روش صحیح برای دسترسی‌پذیری
• 98. ایجاد استایل‌شیت مخصوص چاپ (Print Stylesheets) برای گزارشات
• 99. بهینه‌سازی عملکرد: فشرده‌سازی (Minify) فایل‌های CSS
• 100. بهینه‌سازی عملکرد: شناسایی و حذف CSS استفاده‌نشده