فلش‌کارت‌های آموزشی CSS for Fleet Management Consulting

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. نحوه اتصال CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. سینتکس CSS: انتخابگرها، خصوصیات و مقادیر
• 4. آشنایی با کامنت‌گذاری در CSS
• 5. انتخابگرهای اصلی: عنصر، کلاس و شناسه (ID)
• 6. انتخابگر عمومی (*) و انتخابگرهای ترکیبی
• 7. اولویت و آبشاری شدن در CSS (Specificity & Cascade)
• 8. مفهوم وراثت (Inheritance)
• 9. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 10. خصوصیت box-sizing: content-box در مقابل border-box
• 11. واحدها در CSS: واحدهای مطلق (px, pt)
• 12. واحدها در CSS: واحدهای نسبی (em, rem, %)
• 13. واحدهای Viewport (vh, vw, vmin, vmax)
• 14. کار با رنگ‌ها: نام‌های رنگی، HEX، RGB و RGBA
• 15. کار با رنگ‌ها: HSL و HSLA
• 16. استایل‌دهی به پس‌زمینه: background-color
• 17. استایل‌دهی به پس‌زمینه: background-image
• 18. کنترل پس‌زمینه: background-repeat, background-position
• 19. کنترل پس‌زمینه: background-size و background-attachment
• 20. استایل‌دهی به متون: color, text-align, text-decoration
• 21. استایل‌دهی به متون: text-transform, text-indent, line-height
• 22. فونت‌ها: font-family و فونت‌های امن وب
• 23. فونت‌ها: font-size, font-weight, font-style
• 24. استفاده از فونت‌های سفارشی با @font-face
• 25. ادغام فونت‌های گوگل (Google Fonts)
• 26. استایل‌دهی به لیست‌ها: list-style-type, list-style-position
• 27. استایل‌دهی به جداول: border, padding, text-alignment
• 28. استایل‌دهی پیشرفته جداول: border-collapse, border-spacing
• 29. استایل‌دهی به لینک‌ها و حالت‌های آن (:link, :visited, :hover, :active)
• 30. خصوصیت display: block, inline, inline-block
• 31. خصوصیت visibility و تفاوت آن با display: none
• 32. موقعیت‌یابی (Positioning): static و relative
• 33. موقعیت‌یابی (Positioning): absolute
• 34. موقعیت‌یابی (Positioning): fixed و sticky
• 35. مفهوم z-index و مدیریت لایه‌ها
• 36. استفاده از Float برای چیدمان (مفهوم قدیمی)
• 37. مشکلات Float و روش‌های Clearfix
• 38. مقدمه‌ای بر Flexbox: چیدمان یک بعدی
• 39. ایجاد یک Flex Container: خصوصیت display: flex
• 40. جهت‌دهی آیتم‌ها در Flexbox با flex-direction
• 41. تراز افقی آیتم‌ها با justify-content
• 42. تراز عمودی آیتم‌ها با align-items
• 43. مدیریت شکست خطوط با flex-wrap
• 44. خصوصیات آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 45. ترتیب‌دهی آیتم‌ها با خصوصیت order
• 46. مقدمه‌ای بر CSS Grid: چیدمان دو بعدی
• 47. ایجاد یک Grid Container: خصوصیت display: grid
• 48. تعریف سطرها و ستون‌ها با grid-template-rows و grid-template-columns
• 49. ایجاد فاصله بین آیتم‌ها با gap
• 50. موقعیت‌دهی آیتم‌ها در Grid بر اساس خطوط
• 51. ادغام سلول‌ها با grid-column و grid-row
• 52. نام‌گذاری نواحی در Grid با grid-template-areas
• 53. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 54. استفاده از متا تگ Viewport
• 55. آشنایی با Media Queries
• 56. رویکرد Mobile-First در طراحی واکنش‌گرا
• 57. استفاده از min-width و max-width در Media Queries
• 58. ایجاد تصاویر واکنش‌گرا
• 59. تایپوگرافی واکنش‌گرا
• 60. مخفی کردن عناصر در اندازه‌های مختلف صفحه
• 61. انتخابگرهای خصوصیت (Attribute Selectors)
• 62. شبه‌کلاس‌ها (Pseudo-classes): :first-child, :last-child
• 63. شبه‌کلاس :nth-child برای انتخاب‌های پیچیده‌تر
• 64. شبه‌کلاس‌های مربوط به فرم‌ها: :focus, :checked, :disabled
• 65. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 66. کاربرد ::before و ::after برای افزودن آیکون و محتوای تزئینی
• 67. ترکیب‌کننده‌ها: انتخابگر فرزند (>) و نسل (+)
• 68. ترکیب‌کننده‌ها: انتخابگر همزاد مجاور (+) و همزاد عمومی (~)
• 69. مقدمه‌ای بر Transition ها برای انیمیشن‌های ساده
• 70. کنترل Transition ها: property, duration, timing-function, delay
• 71. مقدمه‌ای بر Transform های دو بعدی: translate(), rotate(), scale()
• 72. مقدمه‌ای بر Transform های سه بعدی
• 73. انیمیشن‌های پیچیده با @keyframes
• 74. کنترل انیمیشن‌ها: animation-name, duration, iteration-count
• 75. سایه‌ها: box-shadow و text-shadow
• 76. گرد کردن گوشه‌ها با border-radius
• 77. ایجاد گرادیان‌های خطی و شعاعی (Gradients)
• 78. فیلترهای CSS: blur(), brightness(), grayscale()
• 79. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌سازی
• 80. تابع ()calc برای محاسبات دینامیک
• 81. مفهوم پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 82. معماری و سازماندهی فایل‌های CSS
• 83. متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 84. استایل‌دهی به فرم‌ها: input, textarea, button
• 85. استایل‌دهی پیشرفته فرم‌ها: checkbox و radio button سفارشی
• 86. ایجاد Tooltip های سفارشی با CSS
• 87. ساخت Modal (پنجره پاپ‌آپ) با CSS
• 88. استایل‌دهی به نوارهای پیشرفت (Progress Bars)
• 89. استایل‌دهی به اعلان‌ها و هشدارها (Alerts)
• 90. ایجاد منوهای آبشاری (Dropdown Menus)
• 91. ساخت یک سایدبار (Sidebar) ثابت و واکنش‌گرا
• 92. کلاس‌های کاربردی (Utility Classes)
• 93. استفاده از Reset CSS در مقابل Normalize.css
• 94. بهینه‌سازی کارایی CSS
• 95. اشکال‌زدایی (Debugging) با ابزارهای توسعه‌دهنده مرورگر
• 96. پروژه عملی: طراحی کارت KPI برای داشبورد مدیریت ناوگان
• 97. پروژه عملی: استایل‌دهی به جدول داده‌های خودروها (واکنش‌گرا)
• 98. پروژه عملی: طراحی فرم ثبت گزارش تعمیر و نگهداری
• 99. پروژه عملی: استایل‌دهی به نقشه و نشانگرهای وضعیت خودرو
• 100. پروژه عملی: ساخت داشبورد اصلی مدیریت ناوگان با Grid و Flexbox