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

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

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

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

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

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

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

• 1. مقدمه: چرا CSS برای رابط‌های کاربری مدیریت ناوگان حیاتی است؟
• 2. آشنایی با نقش CSS، HTML و جاوا اسکریپت
• 3. راه‌اندازی محیط توسعه شما
• 4. کالبدشکافی یک قانون CSS: انتخابگرها، خصوصیات و مقادیر
• 5. سه روش افزودن CSS: درون‌خطی، داخلی و شیوه‌نامه خارجی
• 6. کامنت‌گذاری و سازماندهی کد در CSS
• 7. استفاده از ابزارهای توسعه‌دهنده مرورگر برای بازرسی CSS
• 8. مفاهیم اصلی: آبشار (Cascade) و وراثت (Inheritance)
• 9. درک ویژگی (Specificity): مرورگر چگونه استایل‌ها را انتخاب می‌کند
• 10. اولین کامپوننت مدیریت ناوگان: استایل‌دهی به یک کادر وضعیت
• 11. کار با رنگ‌ها: Hex، RGB و HSL
• 12. استایل‌دهی به متن: font-family، font-size و font-weight
• 13. تراز، تزئین و تبدیل متن
• 14. آشنایی با واحدهای CSS: واحدهای مطلق در مقابل نسبی (px, em, rem, %)
• 15. مدل جعبه‌ای (Box Model): محتوا، پدینگ، حاشیه و مرز
• 16. کنترل ابعاد: width, height, min/max-width
• 17. استایل‌دهی به حاشیه‌ها (Borders): استایل، عرض و رنگ
• 18. ایجاد گوشه‌های گرد با border-radius
• 19. اعمال پس‌زمینه: رنگ و تصویر
• 20. پس‌زمینه‌های پیشرفته: گرادیان‌ها و پس‌زمینه‌های چندگانه
• 21. کنترل اندازه و موقعیت پس‌زمینه
• 22. افزودن سایه: box-shadow و text-shadow
• 23. استایل‌دهی به لیست‌ها: نامرتب، مرتب و استایل‌های لیست
• 24. استایل‌دهی به لینک‌ها و وضعیت‌های آن‌ها
• 25. خصوصیت display: block, inline و inline-block
• 26. مقدمه‌ای بر چیدمان‌های CSS برای داشبوردها
• 27. جریان عادی و خصوصیت position
• 28. موقعیت‌یابی نسبی (Relative) و مطلق (Absolute)
• 29. موقعیت‌یابی ثابت (Fixed) برای عناصر ثابت UI (مانند هدر)
• 30. موقعیت‌یابی چسبنده (Sticky) برای منوهای هوشمند
• 31. درک زمینه‌های روی هم قرارگیری (Stacking Contexts) با z-index
• 32. مقدمه‌ای بر Flexbox: ابزاری مدرن برای چیدمان
• 33. کانتینر Flex: خصوصیات flex-direction, justify-content, align-items
• 34. آیتم‌های Flex: خصوصیات flex-grow, flex-shrink, flex-basis
• 35. ساخت هدر داشبورد ناوگان با Flexbox
• 36. تراز کردن آیتم‌ها در محور متقاطع با align-self
• 37. مرتب‌سازی و شکستن خط در آیتم‌های Flex
• 38. مقدمه‌ای بر چیدمان گرید (CSS Grid Layout)
• 39. تعریف یک گرید: grid-template-columns و grid-template-rows
• 40. قرار دادن آیتم‌ها در گرید
• 41. گسترش و اندازه‌دهی آیتم‌ها در گرید
• 42. ایجاد یک چیدمان داشبورد پیچیده با CSS Grid
• 43. ترکیب Flexbox و Grid برای چیدمان‌های بهینه
• 44. چیدمان‌های قدیمی: درک Float و Clear
• 45. راهنمای قطعی وسط‌چین کردن عناصر
• 46. طراحی فرم‌های کارآمد: یک نمای کلی
• 47. استایل‌دهی به ورودی‌های متنی و Textarea
• 48. استایل‌دهی به دکمه‌ها و کنترل‌های ارسال فرم
• 49. استایل‌دهی به Checkboxها و Radio Buttonها
• 50. استایل‌دهی به منوهای کشویی Select
• 51. ایجاد عناصر فرم سفارشی
• 52. ساختاربندی و استایل‌دهی جداول داده
• 53. استایل‌دهی به سربرگ‌ها، سطرها و سلول‌های جدول
• 54. ایجاد جداول راه‌راه و قابل هاور برای داده‌های خودرو
• 55. طراحی نوارهای ناوبری و منوها
• 56. ساخت یک منوی ناوبری جانبی برای داشبورد ناوگان
• 57. استفاده از آیکون‌ها: Font Awesome و آیکون‌های SVG
• 58. استایل‌دهی به نشانگرهای وضعیت با رنگ و آیکون
• 59. ایجاد کامپوننت‌های کارتی برای پروفایل خودرو یا راننده
• 60. شبه‌کلاس‌ها (Pseudo-classes): استایل‌دهی بر اساس وضعیت (:hover, :focus, :active)
• 61. شبه‌کلاس‌های ساختاری: :first-child, :last-child, :nth-child
• 62. استایل‌دهی بر اساس صفات (Attributes)
• 63. شبه‌عناصر (Pseudo-elements): افزودن محتوا با ::before و ::after
• 64. ایجاد Tooltip با شبه‌عناصر
• 65. خصوصیات opacity و visibility
• 66. مقدمه‌ای بر طراحی وب واکنش‌گرا (Responsive Web Design)
• 67. متا تگ Viewport
• 68. درک Media Queryها و نقاط شکست (Breakpoints)
• 69. استراتژی اول-موبایل در مقابل اول-دسکتاپ
• 70. ساخت یک منوی ناوبری واکنش‌گرا
• 71. واکنش‌گرا کردن جداول داده
• 72. تصاویر واکنش‌گرا با max-width
• 73. تصاویر واکنش‌گرای پیشرفته: عنصر picture و srcset
• 74. تایپوگرافی روان با واحدهای Viewport (vw, vh)
• 75. استفاده از clamp() برای اندازه‌های فونت واکنش‌گرا
• 76. چیدمان‌های واکنش‌گرا با Flexbox
• 77. چیدمان‌های واکنش‌گرا با CSS Grid
• 78. پنهان و آشکار کردن محتوا در اندازه‌های مختلف صفحه
• 79. تست واکنش‌گرایی در مرورگرها
• 80. پروژه: واکنش‌گرا کردن کامل داشبورد ناوگان
• 81. مقدمه‌ای بر ترنزیشن‌های CSS
• 82. کنترل زمان‌بندی و تأخیر ترنزیشن
• 83. اعمال ترنزیشن به عناصر UI برای تجربه کاربری بهتر
• 84. مقدمه‌ای بر انیمیشن‌های CSS با @keyframes
• 85. خصوصیات انیمیشن: duration, timing-function, iteration-count
• 86. ایجاد یک انیمیشن اسپینر بارگذاری
• 87. تبدیل‌های CSS: translate, rotate, scale
• 88. ترکیب تبدیل‌ها و ترنزیشن‌ها
• 89. تبدیل‌های سه‌بعدی برای افکت‌های پیشرفته
• 90. ملاحظات عملکردی برای انیمیشن‌ها
• 91. خصوصیات سفارشی CSS (متغیرها) برای پوسته‌بندی (Theming)
• 92. ساخت پوسته روشن/تاریک برای داشبورد
• 93. سازماندهی CSS شما: مقدمه‌ای بر متدولوژی BEM
• 94. ساختاربندی فایل‌ها و پوشه‌ها برای یک پروژه بزرگ
• 95. مقدمه‌ای بر پیش‌پردازنده‌های CSS: Sass/SCSS چیست؟
• 96. عملکرد CSS: کوچک‌سازی و ادغام فایل‌ها
• 97. نوشتن CSS دسترس‌پذیر: وضعیت‌های Focus و کنتراست رنگ
• 98. استفاده از prefers-reduced-motion برای انیمیشن‌های دسترس‌پذیر
• 99. اشکال‌زدایی مسائل پیچیده CSS
• 100. جمع‌بندی دوره و گام‌های بعدی در استایل‌دهی برنامه‌های کاربردی ناوگان