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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در مدیریت ناوگان
• 2. چرا CSS برای توسعه‌دهندگان مدیریت ناوگان حیاتی است؟
• 3. تنظیم محیط توسعه: ویرایشگر کد و مرورگر
• 4. ساختار یک سند HTML و ارتباط آن با CSS
• 5. نوشتن اولین خطوط CSS: تغییر رنگ متن
• 6. روش‌های افزودن CSS به HTML: Inline، Internal، External
• 7. قوانین CSS: انتخابگرها، خصوصیات و مقادیر
• 8. کامنت‌گذاری در CSS برای خوانایی بهتر
• 9. مفهوم Cascade، Specificity و Inheritance
• 10. ابزارهای توسعه‌دهنده مرورگر برای CSS
• 11. انتخابگرهای نوع (Type Selectors)
• 12. انتخابگرهای کلاس (Class Selectors)
• 13. انتخابگرهای ID (ID Selectors)
• 14. انتخابگرهای فرزند (Child Selectors)
• 15. انتخابگرهای نسل (Descendant Selectors)
• 16. انتخابگرهای همسایه (Sibling Selectors: Adjacent و General)
• 17. انتخابگرهای صفت (Attribute Selectors)
• 18. انتخابگرهای شبه‌کلاس (Pseudo-class Selectors): :hover, :focus, :nth-child
• 19. انتخابگرهای شبه‌عنصر (Pseudo-element Selectors): ::before, ::after
• 20. ترکیب انتخابگرها و اولویت‌بندی
• 21. مدل جعبه CSS: محتوا، پدینگ، بوردر، مارجین
• 22. خصوصیت width و height و مفهوم box-sizing
• 23. تنظیم پدینگ (padding) برای عناصر UI
• 24. تنظیم بوردر (border) و استایل‌های آن
• 25. تنظیم مارجین (margin) برای فاصله بین عناصر
• 26. مقادیر auto برای مارجین و مرکز قرار دادن عناصر
• 27. واحدهای اندازه‌گیری در CSS: px, em, rem, %
• 28. واحدهای viewport: vw, vh, vmin, vmax
• 29. مفهوم overflow و خصوصیات آن
• 30. Shadow DOM و Style Scoping (مقدمه‌ای)
• 31. فونت‌ها در CSS: family, size, weight
• 32. Import کردن فونت‌های سفارشی (Google Fonts, Font Awesome)
• 33. خصوصیت color برای رنگ متن
• 34. تراز بندی متن: text-align
• 35. فاصله بین خطوط (line-height) و حروف (letter-spacing)
• 36. تبدیل متن: text-transform (uppercase, lowercase)
• 37. دکوراسیون متن: text-decoration (underline, overline)
• 38. مدیریت فضای سفید: white-space
• 39. استایل‌دهی به لینک‌ها: :link, :visited, :hover, :active
• 40. طراحی خوانا برای گزارش‌ها و داشبوردهای مدیریت ناوگان
• 41. مدل‌های رنگی در CSS: Hex, RGB, RGBA, HSL, HSLA
• 42. انتخاب پالت رنگی مناسب برای UI حرفه‌ای
• 43. خصوصیت background-color
• 44. افزودن تصاویر پس‌زمینه: background-image
• 45. تنظیمات تصاویر پس‌زمینه: repeat, position, size
• 46. پس‌زمینه‌های چندگانه (Multiple Backgrounds)
• 47. گرادیانت‌های خطی (Linear Gradients)
• 48. گرادیانت‌های شعاعی (Radial Gradients)
• 49. شفافیت با opacity
• 50. استفاده از متغیرهای CSS برای مدیریت رنگ‌ها
• 51. معرفی Flexbox و ضرورت آن در طراحی مدرن
• 52. مفهوم کانتینر فلکس (Flex Container) و آیتم‌های فلکس (Flex Items)
• 53. خصوصیت display: flex
• 54. جهت‌دهی آیتم‌ها: flex-direction
• 55. بسته‌بندی آیتم‌ها: flex-wrap
• 56. هم‌ترازی در محور اصلی: justify-content
• 57. هم‌ترازی در محور متقاطع: align-items
• 58. هم‌ترازی خطوط: align-content
• 59. خصوصیات آیتم‌های فلکس: flex-grow, flex-shrink, flex-basis
• 60. طراحی اجزای داشبورد مدیریت ناوگان با Flexbox
• 61. معرفی CSS Grid و مزایای آن برای لایوت‌های پیچیده
• 62. display: grid: تعریف گرید کانتینر
• 63. تعریف ستون‌ها با grid-template-columns
• 64. تعریف ردیف‌ها با grid-template-rows
• 65. اندازه‌گیری واحدهای گرید: fr (Fraction Unit)
• 66. نام‌گذاری خطوط و مناطق گرید: grid-template-areas
• 67. قرار دادن آیتم‌ها در گرید: grid-column, grid-row
• 68. هم‌ترازی آیتم‌ها در گرید: justify-items, align-items
• 69. فاصله بین خانه‌های گرید: grid-gap (gap)
• 70. طراحی صفحات اطلاعات خودرو و راننده با CSS Grid
• 71. مفهوم طراحی واکنش‌گرا و Mobile-First
• 72. متا تگ viewport برای واکنش‌گرایی
• 73. معرفی Media Queries و ساختار آن‌ها
• 74. استفاده از Media Queries برای break-points مختلف
• 75. پرس‌وجو بر اساس عرض (min-width, max-width)
• 76. پرس‌وجو بر اساس ارتفاع (min-height, max-height)
• 77. پرس‌وجو بر اساس جهت‌گیری (orientation) دستگاه
• 78. پنهان کردن و نمایش عناصر بر اساس اندازه صفحه
• 79. تصاویر واکنش‌گرا و srcset
• 80. ساخت UI واکنش‌گرا برای اپلیکیشن‌های موبایل و دسکتاپ مدیریت ناوگان
• 81. معرفی CSS Transforms: حرکت، چرخش، مقیاس‌بندی، کج کردن
• 82. transform: translate() برای جابجایی عناصر
• 83. transform: rotate() برای چرخش عناصر
• 84. transform: scale() برای تغییر اندازه عناصر
• 85. transform: skew() برای کج کردن عناصر
• 86. معرفی CSS Transitions: انیمیشن‌های ساده
• 87. خصوصیات transition-property, transition-duration, transition-timing-function, transition-delay
• 88. معرفی CSS Animations: انیمیشن‌های پیچیده‌تر
• 89. @keyframes: تعریف فریم‌های کلیدی انیمیشن
• 90. خصوصیات animation: name, duration, timing-function, delay, iteration-count, direction
• 91. متغیرهای CSS (Custom Properties) و کاربرد آن‌ها
• 92. استفاده از سایه‌ها: box-shadow و text-shadow
• 93. فیلترهای CSS: filter (blur, grayscale, brightness)
• 94. مدیریت فرم‌ها و استایل‌دهی به inputها و buttonها
• 95. استایل‌دهی به جداول برای نمایش داده‌های ناوگان
• 96. طراحی دکمه‌های کنترلی و ناوبری سفارشی
• 97. مقدمه‌ای بر فریم‌ورک‌های CSS (Bootstrap, Tailwind CSS)
• 98. سازماندهی کد CSS در پروژه‌های بزرگ (BEM, SMACSS)
• 99. بهینه‌سازی عملکرد CSS و بارگذاری سریع
• 100. نکات و ترفندهای CSS برای رابط‌های کاربری مدیریت ناوگان پیشرفته