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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. چرا CSS برای داشبوردهای مدیریت ناوگان حیاتی است؟
• 3. آشنایی با سه روش افزودن CSS به صفحه
• 4. ساختار و سینتکس پایه در CSS
• 5. اولین استایل: تغییر رنگ و پس‌زمینه
• 6. کامنت‌گذاری در کدهای CSS
• 7. مفهوم انتخابگرها (Selectors)
• 8. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 9. مفهوم بنیادین مدل جعبه‌ای (Box Model)
• 10. آشنایی با Padding در Box Model
• 11. آشنایی با Border در Box Model
• 12. آشنایی با Margin در Box Model
• 13. خصوصیت display: مقادیر block, inline و inline-block
• 14. وراثت (Inheritance) در CSS
• 15. اولویت و آبشار (Specificity & The Cascade)
• 16. کار با رنگ‌ها: نام، HEX, RGB, HSL
• 17. استایل‌دهی به متون و پاراگراف‌ها
• 18. کار با فونت‌ها و خانواده‌های فونت (Font Families)
• 19. تنظیم اندازه و وزن فونت
• 20. ترازبندی متون (Text Alignment)
• 21. استایل‌دهی به لینک‌ها و حالت‌های آن (:hover, :active)
• 22. استایل‌دهی به لیست‌های مرتب و نامرتب
• 23. موقعیت‌یابی (Positioning): مقادیر Static و Relative
• 24. موقعیت‌یابی (Positioning): مقادیر Absolute و Fixed
• 25. موقعیت‌یابی (Positioning): مقدار Sticky
• 26. کنترل لایه‌ها با z-index
• 27. واحدهای اندازه‌گیری مطلق (px, pt)
• 28. واحدهای اندازه‌گیری نسبی (em, rem)
• 29. واحدهای اندازه‌گیری وابسته به Viewport (vh, vw)
• 30. مقدمه‌ای بر چیدمان با Flexbox
• 31. مفاهیم اصلی Flexbox: کانتینر و آیتم‌ها
• 32. خصوصیت flex-direction
• 33. خصوصیت justify-content برای ترازبندی افقی
• 34. خصوصیت align-items برای ترازبندی عمودی
• 35. خصوصیت flex-wrap برای شکستن خطوط
• 36. خصوصیت align-content
• 37. خصوصیات آیتم‌ها در Flexbox: flex-grow, flex-shrink, flex-basis
• 38. ترکیب خصوصیات آیتم‌ها با flex
• 39. مقدمه‌ای بر چیدمان با CSS Grid
• 40. تعریف ستون‌ها و ردیف‌ها در Grid
• 41. ایجاد فاصله بین آیتم‌ها با gap
• 42. جایگذاری آیتم‌ها با استفاده از شماره خطوط
• 43. نام‌گذاری خطوط در Grid
• 44. جایگذاری آیتم‌ها با استفاده از نام خطوط
• 45. ترکیب سلول‌ها با grid-column و grid-row
• 46. استفاده از grid-template-areas برای چیدمان‌های پیچیده
• 47. انتخابگرهای ترکیبی (Combinators)
• 48. انتخابگرهای فرزند و نواده (Child & Descendant)
• 49. انتخابگرهای همسایه (Sibling)
• 50. انتخابگرهای صفت (Attribute Selectors)
• 51. شبه‌کلاس‌ها (Pseudo-classes) و کاربرد آنها
• 52. کار با شبه‌کلاس‌های :nth-child و :nth-of-type
• 53. شبه‌المان‌ها (Pseudo-elements): ::before و ::after
• 54. استایل‌دهی به فرم‌ها: input, textarea, button
• 55. استایل‌دهی به Checkbox و Radio Button
• 56. استایل‌دهی به جداول داده (Tables)
• 57. ایجاد جداول راه‌راه (Zebra-striped Tables)
• 58. پس‌زمینه‌های تصویری (Background Images)
• 59. کنترل تکرار و موقعیت پس‌زمینه
• 60. گرادینت‌های خطی و شعاعی (Gradients)
• 61. تنظیم شفافیت با opacity و RGBA
• 62. ایجاد سایه برای جعبه‌ها (box-shadow)
• 63. ایجاد سایه برای متون (text-shadow)
• 64. گرد کردن گوشه‌ها با border-radius
• 65. مقدمه‌ای بر Transitions برای انیمیشن‌های نرم
• 66. کنترل زمان و تابع زمانی در Transition
• 67. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 68. مفهوم Viewport و تنظیم آن
• 69. آشنایی با Media Queries
• 70. تعریف نقاط شکست (Breakpoints) برای دستگاه‌های مختلف
• 71. رویکرد اول-موبایل (Mobile-First) در طراحی
• 72. ساخت تصاویر واکنش‌گرا
• 73. الگوهای پیشرفته Flexbox برای داشبورد
• 74. الگوهای پیشرفته Grid برای چیدمان داشبورد
• 75. مخفی کردن عناصر در اندازه‌های مختلف صفحه
• 76. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌سازی
• 77. استفاده از تابع ()calc برای محاسبات دینامیک
• 78. توابع ()min و ()max و ()clamp
• 79. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 80. تبدیل‌های سه بعدی (3D Transforms)
• 81. انیمیشن‌های پیچیده با @keyframes
• 82. کنترل مراحل و تکرار انیمیشن
• 83. فیلترهای CSS برای افکت‌های تصویری (blur, grayscale)
• 84. حالت‌های ترکیبی (Blend Modes)
• 85. سازماندهی فایل‌های CSS
• 86. متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 87. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 88. بهینه‌سازی عملکرد CSS
• 89. مفاهیم دسترسی‌پذیری (Accessibility) در CSS
• 90. شروع پروژه: طراحی ساختار داشبورد مدیریت ناوگان
• 91. استایل‌دهی به هدر اصلی و نوار ناوبری
• 92. طراحی و استایل‌دهی منوی کناری (Sidebar)
• 93. چیدمان اصلی داشبورد با Grid و Flexbox
• 94. طراحی کارت‌های اطلاعاتی (Data Cards) برای نمایش آمار
• 95. استایل‌دهی شاخص‌های وضعیت خودرو (آنلاین، آفلاین، در حال حرکت)
• 96. استایل‌دهی پیشرفته جداول داده برای نمایش لیست خودروها
• 97. واکنش‌گرا کردن جداول داده برای نمایش در موبایل
• 98. استایل‌دهی فرم‌های ورود اطلاعات (مانند ثبت گزارش سفر)
• 99. پیاده‌سازی تم روشن و تاریک با متغیرهای CSS
• 100. طراحی دکمه‌ها و عناصر تعاملی با افکت‌های hover و focus