فلش‌کارت‌های آموزشی CSS for Fleet Management Organizations

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. نحو (Syntax) پایه‌ای CSS: انتخابگر، خصوصیت، مقدار
• 3. روش‌های افزودن CSS به یک صفحه: Inline, Internal, External
• 4. آشنایی با کامنت‌گذاری در CSS
• 5. انتخابگرهای اصلی: Element, Class, ID
• 6. انتخابگرهای ترکیبی (Combinators)
• 7. مفهوم آبشار (Cascade)، اولویت (Specificity) و وراثت (Inheritance)
• 8. واحدها در CSS: مطلق (px, pt) و نسبی (em, rem, %, vh, vw)
• 9. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 10. خصوصیت‌های Width و Height
• 11. خصوصیت Box-Sizing: Content-Box در مقابل Border-Box
• 12. رنگ‌ها در CSS: نام رنگ، HEX, RGB, HSL
• 13. کار با پس‌زمینه: Background Color و Background Image
• 14. کنترل پس‌زمینه: Background Repeat, Position, Size
• 15. حاشیه‌ها (Borders): Style, Width, Color
• 16. گرد کردن گوشه‌ها با Border-Radius
• 17. سایه‌ها: Box-Shadow و Text-Shadow
• 18. خصوصیت‌های استایل‌دهی به متن: Font-Family, Font-Size, Font-Weight
• 19. تراز کردن و تزئین متن: Text-Align, Text-Decoration
• 20. فاصله‌گذاری در متن: Line-Height, Letter-Spacing, Word-Spacing
• 21. استایل‌دهی به لینک‌ها و حالت‌های آن‌ها (:link, :visited, :hover, :active)
• 22. استایل‌دهی به لیست‌های مرتب و نامرتب
• 23. مقدمه‌ای بر استایل‌دهی جداول برای نمایش داده‌های ناوگان
• 24. استایل‌دهی سربرگ و پاورقی جداول (thead, tfoot, tbody)
• 25. ایجاد جداول خوانا با Zebra Striping (سطرهای یک در میان رنگی)
• 26. مقدمه‌ای بر استایل‌دهی فرم‌ها
• 27. استایل‌دهی به ورودی‌های متنی (Input Fields)
• 28. استایل‌دهی به دکمه‌ها (Buttons) برای اقدامات مدیریتی
• 29. استایل‌دهی به Checkbox و Radio Button
• 30. استایل‌دهی به حالت‌های مختلف فرم: Focus, Disabled, Read-only
• 31. خصوصیت Display: Block, Inline, Inline-Block, None
• 32. تفاوت Visibility: hidden و Display: none
• 33. مفهوم چیدمان (Layout) در CSS
• 34. خصوصیت Position: Static, Relative, Absolute, Fixed
• 35. کنترل لایه‌ها با Z-Index
• 36. کار با Position: Sticky برای هدرهای ثابت
• 37. مقدمه‌ای بر Flexbox برای چیدمان‌های یک بعدی
• 38. خصوصیات Flex Container: Flex-Direction, Justify-Content, Align-Items
• 39. خصوصیات Flex Container: Flex-Wrap, Align-Content
• 40. خصوصیات Flex Items: Flex-Grow, Flex-Shrink, Flex-Basis
• 41. کنترل ترتیب عناصر با خصوصیت Order
• 42. کاربرد Flexbox: ساخت نوار ناوبری (Navbar) داشبورد
• 43. کاربرد Flexbox: چیدمان کارت‌های اطلاعاتی (KPI Cards)
• 44. مقدمه‌ای بر CSS Grid برای چیدمان‌های دو بعدی
• 45. تعریف ستون‌ها و ردیف‌ها با Grid-Template-Columns و Grid-Template-Rows
• 46. فاصله‌گذاری بین آیتم‌ها با Gap
• 47. قرار دادن آیتم‌ها در Grid با Line Numbers
• 48. قرار دادن آیتم‌ها با نام‌گذاری نواحی (Grid-Template-Areas)
• 49. کاربرد Grid: طراحی ساختار کلی داشبورد مدیریت ناوگان
• 50. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 51. مفهوم Viewport و استفاده از متا تگ Viewport
• 52. آشنایی با Media Queries و Breakpoints
• 53. رویکرد Mobile-First در طراحی واکنش‌گرا
• 54. ساخت جداول واکنش‌گرا برای نمایش در موبایل
• 55. تصاویر واکنش‌گرا (Responsive Images)
• 56. مقدمه‌ای بر شبه-کلاس‌ها (Pseudo-classes)
• 57. شبه-کلاس‌های ساختاری: first-child, last-child, nth-child
• 58. شبه-کلاس‌های ورودی (Input Pseudo-classes): checked, required, valid, invalid
• 59. مقدمه‌ای بر شبه-عناصر (Pseudo-elements)
• 60. استفاده از ::before و ::after برای افزودن محتوای تزئینی
• 61. استفاده از ::first-letter و ::first-line
• 62. مقدمه‌ای بر Transition ها برای ایجاد انیمیشن‌های نرم
• 63. کنترل Transition: Property, Duration, Timing-Function, Delay
• 64. مقدمه‌ای بر Transform های دو بعدی: Translate, Rotate, Scale
• 65. مقدمه‌ای بر Transform های سه بعدی
• 66. انیمیشن‌های پیچیده‌تر با Keyframes و خصوصیت Animation
• 67. کاربرد انیمیشن: نمایش وضعیت زنده خودرو (متحرک، متوقف)
• 68. متغیرها در CSS (Custom Properties)
• 69. کاربرد متغیرها: ایجاد تم تاریک و روشن برای داشبورد
• 70. کاربرد متغیرها: مدیریت پالت رنگی برند سازمان
• 71. تابع ()calc برای محاسبات دینامیک
• 72. گرادینت‌ها (Gradients): Linear-Gradient و Radial-Gradient
• 73. فیلترها در CSS: Blur, Grayscale, Contrast
• 74. حالت‌های ترکیبی (Blend Modes)
• 75. مفهوم Overflow و کنترل آن
• 76. استایل‌دهی به Scrollbar
• 77. استفاده از فونت‌های سفارشی با @font-face
• 78. استفاده از آیکون‌ها: فونت‌های آیکون (Icon Fonts)
• 79. استفاده از آیکون‌ها: کار با SVG در CSS
• 80. بهینه‌سازی کارایی CSS
• 81. ساختاردهی فایل‌های CSS برای پروژه‌های بزرگ
• 82. معرفی متدولوژی BEM برای نام‌گذاری کلاس‌ها
• 83. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS
• 84. استایل‌دهی کامپوننت کارت (Card) برای نمایش اطلاعات خودرو
• 85. استایل‌دهی به نوارهای پیشرفت (Progress Bars) برای نمایش وضعیت تعمیرات
• 86. استایل‌دهی پایه‌ای به نمودارها (Charts)
• 87. استایل‌دهی به Tooltip ها برای نمایش اطلاعات بیشتر
• 88. استایل‌دهی به Modal یا پنجره‌های پاپ-آپ
• 89. استایل‌دهی به منوهای کشویی (Dropdown Menus)
• 90. استایل‌دهی به تب‌ها (Tabs) برای دسته‌بندی اطلاعات
• 91. ساخت استایل‌های سفارشی برای نقشه (Map Styling)
• 92. استایل‌دهی به نشانگرها (Markers) و پاپ‌آپ‌های روی نقشه
• 93. استایل‌دهی به هشدارهای بصری (Alerts & Notifications)
• 94. ایجاد کلاس‌های کمکی (Utility Classes) برای فواصل و رنگ‌ها
• 95. اصول اولیه دسترسی‌پذیری (Accessibility) در CSS
• 96. استایل‌دهی به حالت Focus برای ناوبری با کیبورد
• 97. طراحی برای کنتراست بالا (High Contrast Mode)
• 98. استایل‌دهی برای چاپ (Print Stylesheets) جهت گزارش‌گیری
• 99. پروژه نهایی: ساخت صفحه اصلی داشبورد مدیریت ناوگان
• 100. پروژه نهایی: واکنش‌گرا کردن داشبورد برای تبلت و موبایل