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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب اپلیکیشن‌های مدیریت ناوگان
• 2. نحوه افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. آشنایی با ساختار یک قانون CSS: انتخابگر، خصوصیت و مقدار
• 4. کامنت‌گذاری در CSS
• 5. انتخابگرهای اصلی: عنصر، کلاس و ID
• 6. مفهوم آبشار (Cascade)، وراثت (Inheritance) و اولویت (Specificity)
• 7. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای CSS
• 8. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 9. خصوصیت box-sizing: content-box در مقابل border-box
• 10. واحدهای اندازه‌گیری مطلق و نسبی (px, %, em, rem)
• 11. واحدهای اندازه‌گیری Viewport (vh, vw, vmin, vmax)
• 12. رنگ‌ها در CSS: کلمات کلیدی، HEX, RGB, HSL
• 13. کار با پس‌زمینه: background-color و background-image
• 14. کنترل پس‌زمینه: background-repeat, background-position, background-size
• 15. پس‌زمینه‌های گرادیان (Gradients)
• 16. کار با حاشیه‌ها (Borders): style, width, color
• 17. گرد کردن گوشه‌ها با border-radius
• 18. سایه‌ها: box-shadow و text-shadow
• 19. مقدمه‌ای بر تایپوگرافی در وب
• 20. خصوصیات فونت: font-family, font-size, font-weight, font-style
• 21. استفاده از فونت‌های سفارشی با @font-face و Google Fonts
• 22. تراز کردن متن: text-align, vertical-align
• 23. تزئین متن: text-decoration و text-transform
• 24. فاصله‌گذاری در متن: line-height, letter-spacing, word-spacing
• 25. استایل‌دهی به لیست‌ها (ul, ol, li)
• 26. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن (:link, :visited, :hover, :active)
• 27. خصوصیت display: block, inline, inline-block
• 28. کنترل نمایش عناصر: visibility و opacity
• 29. مدیریت سرریز محتوا با خصوصیت overflow
• 30. مقدمه‌ای بر چیدمان (Layout) در CSS
• 31. روش‌های چیدمان: از Float تا Flexbox و Grid
• 32. موقعیت‌یابی (Positioning): static, relative, absolute, fixed
• 33. موقعیت‌یابی چسبنده (Sticky Positioning)
• 34. مدیریت لایه‌ها با z-index
• 35. استفاده از Float برای چیدمان (مفاهیم قدیمی اما ضروری)
• 36. پاک‌سازی Float ها با Clearfix
• 37. مقدمه‌ای بر Flexbox: چرا برای کامپوننت‌های داشبورد حیاتی است؟
• 38. محورهای اصلی و متقاطع در Flexbox
• 39. خصوصیات Flex Container: display, flex-direction, flex-wrap
• 40. تراز کردن آیتم‌ها در Flexbox: justify-content
• 41. تراز کردن آیتم‌ها در Flexbox: align-items
• 42. تراز کردن خطوط در Flexbox: align-content
• 43. خصوصیات Flex Items: flex-grow, flex-shrink, flex-basis
• 44. کنترل ترتیب آیتم‌ها با order
• 45. تراز کردن یک آیتم خاص با align-self
• 46. مثال عملی Flexbox: ساخت نوار ناوبری (Navigation Bar)
• 47. مقدمه‌ای بر CSS Grid: بهترین ابزار برای چیدمان کلی صفحه
• 48. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 49. واحد fr در Grid
• 50. استفاده از تابع repeat() برای الگوهای تکراری
• 51. ایجاد فاصله بین آیتم‌ها با gap
• 52. جایگذاری آیتم‌ها بر اساس شماره خطوط در Grid
• 53. نام‌گذاری خطوط و نواحی در Grid
• 54. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده
• 55. مقدمه بر طراحی واکنش‌گرا (Responsive Web Design)
• 56. متا تگ Viewport
• 57. آشنایی با Media Queries و نقاط شکست (Breakpoints)
• 58. رویکرد اول-موبایل (Mobile-First) در طراحی واکنش‌گرا
• 59. ساخت گالری تصاویر واکنش‌گرا
• 60. ایجاد تایپوگرافی واکنش‌گرا
• 61. واکنش‌گرا کردن جداول داده (Data Tables)
• 62. واکنش‌گرا کردن فرم‌ها
• 63. استراتژی‌های نمایش و پنهان‌سازی عناصر در اندازه‌های مختلف صفحه
• 64. انتخابگرهای پیشرفته: فرزند (>) و همسایه (+)
• 65. انتخابگرهای 속성 (Attribute Selectors)
• 66. شبه‌کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 67. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 68. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 69. کاربرد ::before و ::after در ایجاد آیکون‌ها و لیبل‌ها
• 70. مقدمه‌ای بر Transitions در CSS
• 71. کنترل Transition ها: property, duration, timing-function, delay
• 72. ایجاد افکت‌های حرکتی نرم برای عناصر داشبord
• 73. مقدمه‌ای بر Transforms در CSS
• 74. تغییر شکل دو بعدی: translate(), rotate(), scale(), skew()
• 75. تغییر شکل سه بعدی (3D Transforms)
• 76. مقدمه‌ای بر انیمیشن‌ها با @keyframes
• 77. کنترل انیمیشن‌ها: animation-property, duration, iteration-count
• 78. مثال عملی: ساخت انیمیشن برای نشانگر وضعیت خودرو (Loading Spinner)
• 79. فیلترهای گرافیکی با خصوصیت filter
• 80. برش عناصر با clip-path
• 81. متغیرها در CSS (Custom Properties)
• 82. کاربرد متغیرها برای ایجاد تم‌های تاریک و روشن (Dark/Light Mode) در داشبورد
• 83. سازماندهی فایل‌های CSS
• 84. مقدمه‌ای بر متدولوژی‌های CSS: BEM
• 85. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 86. مفاهیم پایه Sass: متغیرها و تودرتویی (Nesting)
• 87. مفاهیم پیشرفته Sass: Mixins و Extend
• 88. بهینه‌سازی عملکرد CSS
• 89. استایل‌دهی به فرم‌های ورود اطلاعات راننده و خودرو
• 90. استایل‌دهی به دکمه‌ها و فراخوان‌ها (Call to Action)
• 91. استایل‌دهی به انواع input ها (text, checkbox, radio)
• 92. ایجاد Tooltip های سفارشی با CSS
• 93. طراحی کارت‌ها (Cards) برای نمایش اطلاعات خودروها
• 94. طراحی و استایل‌دهی به جداول بزرگ داده (Trip History, Maintenance Logs)
• 95. ایجاد افکت هاور (Hover) برای ردیف‌های جدول
• 96. طراحی صفحات گزارش‌گیری و چاپ (Print Stylesheets)
• 97. طراحی مودال‌ها (Modals) و پاپ‌آپ‌ها
• 98. ایجاد نوارهای پیشرفت (Progress Bars) برای نمایش وضعیت سفر
• 99. طراحی آیکون‌های سفارشی با CSS خالص
• 100. استایل‌دهی به عناصر نقشه (Map Markers, Polylines)