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

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

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

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

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

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

• 1. مقدمه ای بر CSS برای رابط کاربری مدیریت ناوگان
• 2. تنظیم محیط توسعه شما
• 3. درک نحو و ساختار CSS
• 4. اعمال CSS: استایل های خطی، داخلی و خارجی
• 5. مفاهیم اصلی: آبشار (Cascade)، اولویت (Specificity) و وراثت (Inheritance)
• 6. انتخابگرهای پایه: عنصر، کلاس و ID برای عناصر ناوگان
• 7. گروه بندی انتخابگرها و انتخابگر جهانی
• 8. رنگ ها و پس زمینه ها برای وضوح داشبورد
• 9. فونت ها و تایپوگرافی برای خوانایی در برنامه های ناوگان
• 10. مدل جعبه CSS: حاشیه، کادر و پدینگ
• 11. ویژگی های متن: تراز، دکوراسیون و تبدیل
• 12. کار با لیست ها: لیست موجودی وسایل نقلیه و گزارش رانندگان
• 13. استایل دهی لینک ها برای ناوبری در پرتال های ناوگان
• 14. درک ویژگی `display` برای بلاک، اینلاین و اینلاین-بلاک
• 15. تسلط بر `width` و `height` برای اجزای رابط کاربری
• 16. تصاویر پس زمینه و گرادیان ها برای تم سازی
• 17. استایل دهی کادرها: ضخامت، سبک و رنگ
• 18. معرفی شناورها (Floats) برای چیدمان های ساده
• 19. پاکسازی شناورها: تکنیک ها و بهترین روش ها
• 20. موقعیت دهی مطلق (Absolute Positioning) برای پوشش ها و نشان ها
• 21. موقعیت دهی نسبی (Relative Positioning) برای آفست ها و زمینه
• 22. موقعیت دهی ثابت (Fixed Positioning) برای نوارهای ناوبری ثابت
• 23. موقعیت دهی چسبنده (Sticky Positioning) برای جداول داده های قابل اسکرول
• 24. بافت پشته (Stacking Context) با ویژگی `z-index`
• 25. ویژگی `overflow`: مدیریت محتوا فراتر از مرزها
• 26. مقدمه ای بر فلکس باکس (Flexbox) برای چیدمان های پویا
• 27. ویژگی های کانتینر فلکس: `display: flex` و `flex-direction`
• 28. مدیریت تراز بندی آیتم ها با `justify-content` و `align-items`
• 29. کنترل فاصله آیتم ها با `align-content`
• 30. آیتم های فلکس: `flex-grow`, `flex-shrink`, و `flex-basis`
• 31. ویژگی کوتاه `flex` برای کنترل آیتم ها
• 32. مرتب سازی آیتم های فلکس برای رابط های سازگار
• 33. الگوهای فلکس باکس واکنش گرا برای داشبوردها
• 34. مقدمه ای بر گرید CSS برای چیدمان های دو بعدی
• 35. تعریف ستون ها و ردیف های گرید با `grid-template-columns` و `grid-template-rows`
• 36. `grid-gap`: فاصله گذاری آیتم ها و مسیرهای گرید
• 37. قرار دادن آیتم های گرید با `grid-column` و `grid-row`
• 38. نامگذاری مناطق گرید برای چیدمان های معنایی
• 39. تراز بندی آیتم های گرید: `justify-items` و `align-items`
• 40. توزیع محتوای گرید: `justify-content` و `align-content`
• 41. گرید های ضمنی و `grid-auto-flow`
• 42. چیدمان های گرید واکنش گرا برای دستگاه های مختلف
• 43. ترکیب فلکس باکس و گرید برای رابط های کاربری پیچیده ناوگان
• 44. چیدمان عملی فلکس باکس: کارت های وضعیت وسیله نقلیه
• 45. چیدمان عملی گرید: داشبورد مدیریت ناوگان
• 46. مقدمه ای بر اصول طراحی وب واکنش گرا
• 47. درک Viewports و Meta Tags
• 48. کوئری های رسانه (Media Queries): نحو و کاربرد پایه
• 49. نقاط شکست (Breakpoints) برای اندازه های مختلف دستگاه در برنامه های ناوگان
• 50. هدف گیری جهت گیری: عمودی در مقابل افقی
• 51. تصاویر و آیکون های واکنش گرا برای صفحه نمایش های مختلف
• 52. تایپوگرافی روان (Fluid Typography) برای خوانایی در تمام دستگاه ها
• 53. استراتژی طراحی موبایل-اول برای رانندگان ناوگان
• 54. رویکرد دسکتاپ-اول: چه زمانی از آن استفاده کنیم
• 55. ویژگی های پیشرفته Media Query: `min-resolution`, `prefers-color-scheme`
• 56. تطبیق منوهای ناوبری برای دستگاه های موبایل
• 57. بهینه سازی جداول داده برای صفحه نمایش های کوچک
• 58. فرم های واکنش گرا برای ورود داده در حین حرکت
• 59. تست چیدمان های واکنش گرا در ابزارهای توسعه دهنده
• 60. بهترین روش ها برای رابط های کاربری واکنش گرا ناوگان
• 61. استایل دهی دکمه ها برای اقدامات: "اختصاص راننده"، "مشاهده مسیر"
• 62. ایجاد ورودی های فرم سفارشی برای داده های وسیله نقلیه
• 63. استایل دهی لیست های کشویی و منوهای انتخاب برای گزینه ها
• 64. تقویت چک باکس ها و دکمه های رادیویی
• 65. ساخت و استایل دهی نوارهای ناوبری و سایدبارها
• 66. طراحی جداول داده برای لیست های وسایل نقلیه ناوگان
• 67. استایل دهی هدر و فوتر برای برنامه های ناوگان
• 68. ساخت کارت های جذاب برای جزئیات وسیله نقلیه یا پروفایل راننده
• 69. تجسم هشدارها و اعلان ها برای رویدادهای حیاتی
• 70. استایل دهی پنجره های مدال و دیالوگ برای تأییدیه ها
• 71. ایجاد Tooltips و Popovers برای اطلاعات اضافی
• 72. پیاده سازی لودرها و اسپینرها برای واکشی داده ها
• 73. نوار اسکرول های سفارشی برای تجربه کاربری بهبود یافته
• 74. استایل دهی نشانگرها و پوشش های نقشه (CSS مفهومی)
• 75. تجسم منطقه بندی های جغرافیایی و مناطق در نقشه ها
• 76. طراحی ویجت ها و پنل های داشبورد
• 77. ادغام آیکون ها در رابط های مدیریت ناوگان
• 78. ایجاد نوارهای پیشرفت برای وضعیت نگهداری وسیله نقلیه
• 79. سفارشی سازی انتخابگرهای تاریخ و اسلایدرها
• 80. انتقالات CSS: تغییرات حالت روان
• 81. `transition-property`, `duration`, `timing-function`, `delay`
• 82. تبدیلات CSS: `translate`, `rotate`, `scale`, `skew`
• 83. مقدمه ای بر انیمیشن های CSS: `@keyframes`
• 84. ویژگی های انیمیشن: `name`, `duration`, `iteration-count`, `direction`
• 85. ایجاد عناصر رابط کاربری تعاملی با انیمیشن ها
• 86. ویژگی های سفارشی (متغیرهای CSS) برای تم سازی
• 87. استفاده از `calc()` برای محاسبات مقادیر پویا
• 88. پیش پردازنده های CSS: یک مرور کلی (Sass/LESS برای پروژه های بزرگ)
• 89. متدولوژی BEM برای معماری CSS مقیاس پذیر
• 90. اصول SMACSS و OOCSS برای استایل های سازمان یافته
• 91. بهینه سازی عملکرد CSS: کوچک سازی و یکپارچه سازی
• 92. CSS حیاتی و بارگذاری تنبل برای رابط های کاربری سریعتر
• 93. اجتناب از پرش های طرح بندی و بازنقاشی ها
• 94. درک ویژگی `will-change` در CSS
• 95. دسترس پذیری وب (A11y) در رابط های کاربری مدیریت ناوگان
• 96. HTML معنایی و نقش آن در استایل دهی CSS
• 97. سازگاری بین مرورگرها و پیشوندهای فروشنده
• 98. تم سازی و حالت تاریک برای برنامه های مدیریت ناوگان
• 99. ادغام CSS با جاوااسکریپت برای تعاملات پویا
• 100. طراحی واکنش‌گرا (Responsive Design) با Media Queries برای نمایش در دستگاه‌های مختلف