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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در نرم‌افزارهای مدیریت ناوگان
• 2. CSS چیست؟ مفاهیم پایه
• 3. نحوه افزودن CSS به یک صفحه: Inline, Internal, External
• 4. آشنایی با ساختار یک قانون CSS: انتخاب‌گر، خصوصیت، مقدار
• 5. انتخاب‌گرهای اصلی: Element, Class, ID
• 6. کامنت‌گذاری در CSS
• 7. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 8. مفهوم Cascade و Inheritance (آبشار و وراثت)
• 9. اولویت در CSS و مفهوم Specificity
• 10. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 11. خصوصیت box-sizing: content-box در مقابل border-box
• 12. واحدهای اندازه‌گیری مطلق: px, pt
• 13. واحدهای اندازه‌گیری نسبی: %, em, rem
• 14. واحدهای اندازه‌گیری Viewport: vw, vh, vmin, vmax
• 15. کار با رنگ‌ها: نام رنگ، HEX, RGB, RGBA
• 16. کار با پس‌زمینه: background-color
• 17. افزودن تصویر به پس‌زمینه: background-image
• 18. کنترل تکرار پس‌زمینه: background-repeat
• 19. موقعیت‌دهی پس‌زمینه: background-position
• 20. اندازه پس‌زمینه: background-size
• 21. خصوصیت جامع background
• 22. تنظیمات فونت: font-family و فونت‌های امن وب
• 23. اندازه فونت: font-size
• 24. وزن فونت: font-weight
• 25. استایل فونت: font-style
• 26. خصوصیت جامع font
• 27. تراز کردن متن: text-align
• 28. تزئین متن: text-decoration
• 29. تغییر حالت حروف: text-transform
• 30. فاصله بین خطوط: line-height
• 31. استایل‌دهی به لینک‌ها و حالت‌های آن: :link, :visited, :hover, :active
• 32. استایل‌دهی به لیست‌های مرتب و نامرتب
• 33. انتخاب‌گرهای ترکیبی (Combinators): Descendant, Child, Adjacent Sibling, General Sibling
• 34. انتخاب‌گرهای ویژگی (Attribute Selectors)
• 35. کلاس‌های کاذب (Pseudo-classes): :nth-child, :first-child, :last-child
• 36. عناصر کاذب (Pseudo-elements): ::before, ::after
• 37. مفهوم Display: block, inline, inline-block
• 38. مخفی کردن عناصر: display: none و visibility: hidden
• 39. موقعیت‌دهی (Positioning): static, relative
• 40. موقعیت‌دهی (Positioning): absolute, fixed
• 41. موقعیت‌دهی (Positioning): sticky
• 42. مفهوم z-index و لایه‌بندی عناصر
• 43. مفهوم Float و Clear
• 44. مقدمه‌ای بر Flexbox برای چیدمان داشبورد
• 45. Flexbox: کانتینر و آیتم‌ها
• 46. خصوصیت flex-direction
• 47. تراز افقی در Flexbox: justify-content
• 48. تراز عمودی در Flexbox: align-items
• 49. چند خطی شدن در Flexbox: flex-wrap
• 50. خصوصیت جامع flex-flow
• 51. خصوصیات آیتم‌های Flexbox: flex-grow, flex-shrink, flex-basis
• 52. خصوصیت جامع flex
• 53. ترتیب‌دهی آیتم‌ها در Flexbox: order
• 54. مقدمه‌ای بر CSS Grid برای ساختار کلی برنامه
• 55. Grid: تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 56. ایجاد فاصله بین آیتم‌ها: gap, row-gap, column-gap
• 57. جایگذاری آیتم‌ها در Grid با شماره خط
• 58. جایگذاری آیتم‌ها با نام‌گذاری نواحی (grid-template-areas)
• 59. طراحی واکنش‌گرا (Responsive Design) چیست؟
• 60. استفاده از Media Queries برای نمایشگرهای مختلف
• 61. رویکرد Mobile-First در طراحی واکنش‌گرا
• 62. استایل‌دهی به جداول داده (Data Tables) برای نمایش اطلاعات خودروها
• 63. ایجاد هدر ثابت (Sticky Header) برای جداول طولانی
• 64. استایل‌دهی به ردیف‌های زوج و فرد جدول برای خوانایی بهتر
• 65. طراحی فرم‌های ورود اطلاعات: استایل‌دهی به input, textarea, select
• 66. استایل‌دهی به دکمه‌ها (Buttons) و حالت‌های مختلف آن
• 67. استایل‌دهی به Checkbox و Radio Button سفارشی
• 68. استفاده از کلاس‌های کاذب برای اعتبارسنجی فرم: :valid, :invalid, :required
• 69. ساخت کارت (Card) برای نمایش اطلاعات هر خودرو در داشبورد
• 70. استایل‌دهی به نشانگرهای وضعیت (Status Indicators): آنلاین، آفلاین، در حرکت
• 71. ایجاد Tooltip برای نمایش اطلاعات بیشتر روی نقشه
• 72. استایل‌دهی به پنجره‌های Modal برای نمایش هشدارها و جزئیات
• 73. طراحی سایدبار (Sidebar) ناوبری برنامه
• 74. استایل‌دهی به منوهای Dropdown
• 75. مقدمه‌ای بر Transitions برای ایجاد افکت‌های نرم
• 76. کنترل سرعت Transition با transition-timing-function
• 77. مقدمه‌ای بر Animations و @keyframes
• 78. ایجاد انیمیشن چشمک‌زن برای هشدارهای فوری
• 79. ایجاد انیمیشن حرکت نرم نشانگر خودرو روی نقشه
• 80. تبدیل‌های دو بعدی (2D Transforms): translate(), rotate(), scale()
• 81. تبدیل‌های سه بعدی (3D Transforms)
• 82. مفهوم متغیرها در CSS (Custom Properties)
• 83. ساخت تم روشن و تاریک (Light/Dark Mode) با متغیرهای CSS
• 84. استفاده از تابع ()calc برای محاسبات دینامیک
• 85. استفاده از توابع ()min(), max(), clamp برای اندازه‌های انعطاف‌پذیر
• 86. فیلترهای CSS: blur(), grayscale(), brightness()
• 87. حالت‌های ترکیبی (Blend Modes)
• 88. استایل‌دهی به نوارهای اسکرول (Scrollbar)
• 89. مفهوم BEM (Block, Element, Modifier) برای نام‌گذاری کلاس‌ها
• 90. سازماندهی فایل‌های CSS برای پروژه‌های بزرگ
• 91. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 92. استفاده از متغیرها و تودرتویی (Nesting) در SASS
• 93. استفاده از Mixin ها در SASS برای کدهای قابل استفاده مجدد
• 94. مباحث پیشرفته انتخاب‌گرها
• 95. مفهوم Critical CSS و بهینه‌سازی بارگذاری
• 96. بهینه‌سازی کارایی CSS: کاهش حجم فایل و قوانین استفاده نشده
• 97. ملاحظات دسترسی‌پذیری (Accessibility): کنتراست رنگ
• 98. ملاحظات دسترسی‌پذیری: استایل‌دهی به حالت focus
• 99. پروژه عملی: ساخت ساختار کلی داشبورد مدیریت ناوگان با Grid و Flexbox
• 100. پروژه عملی: استایل‌دهی به جدول نمایش لیست رانندگان و خودروها