فلش‌کارت‌های آموزشی Debugging and Troubleshooting CSS

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

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

عنوان دوره: دوره Debugging and Troubleshooting CSS

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

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

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

• 1. مقدمه‌ای بر اشکال‌زدایی CSS
• 2. چرا اشکال‌زدایی CSS مهم است؟
• 3. چرخه توسعه CSS
• 4. ابزارهای توسعه‌دهنده مرورگر (Browser Developer Tools)
• 5. مرورگرهای محبوب و ابزارهای آنها
• 6. باز کردن ابزارهای توسعه‌دهنده
• 7. برگه Elements/Inspector
• 8. برگه Styles
• 9. برگه Computed
• 10. برگه Layout
• 11. برگه Sources
• 12. برگه Network
• 13. برگه Console
• 14. اصول بازرسی عناصر
• 15. انتخابگرها در ابزارهای توسعه‌دهنده
• 16. درک سلسله مراتب DOM
• 17. شناسایی مشکلات انتخابگر
• 18. بررسی قواعد CSS اعمال شده
• 19. فیلتر کردن قواعد CSS
• 20. پیدا کردن قواعد نادیده گرفته شده
• 21. درک اولویت‌بندی (Specificity)
• 22. قواعد !important و تاثیر آن
• 23. اولویت‌بندی مبتنی بر انتخابگر
• 24. اولویت‌بندی مبتنی بر نوع انتخابگر
• 25. اولویت‌بندی مبتنی بر کلاس و ID
• 26. اولویت‌بندی مبتنی بر صفت
• 27. اولویت‌بندی مبتنی بر شبه‌کلاس‌ها
• 28. اولویت‌بندی مبتنی بر شبه‌عناصر
• 29. اولویت‌بندی درون‌خطی (Inline styles)
• 30. اولویت‌بندی قوانین در جدول‌های سبک
• 31. بررسی مقادیر CSS
• 32. فهمیدن واحدهای اندازه‌گیری (px, em, rem, %, vw, vh)
• 33. مشکلات مربوط به واحدهای اندازه‌گیری
• 34. بررسی مقادیر رنگ (hex, rgb, rgba, hsl, hsla)
• 35. مشکلات مربوط به رنگ‌ها
• 36. بررسی مقادیر فونت (font-family, font-size, font-weight)
• 37. مشکلات مربوط به فونت‌ها
• 38. بررسی مقادیر فاصله‌گذاری (margin, padding)
• 39. مشکلات مربوط به margin و padding
• 40. بررسی مقادیر box model
• 41. درک content, padding, border, margin
• 42. مشکلات مربوط به box model
• 43. بررسی مشکلات مربوط به display (block, inline, inline-block, flex, grid)
• 44. مشکلات display: block
• 45. مشکلات display: inline
• 46. مشکلات display: inline-block
• 47. مشکلات display: flex
• 48. مشکلات display: grid
• 49. دیباگ کردن Flexbox
• 50. ویژگی‌های اصلی Flexbox (justify-content, align-items, flex-direction)
• 51. مشکلات رایج Flexbox
• 52. دیباگ کردن Grid
• 53. ویژگی‌های اصلی Grid (grid-template-columns, grid-template-rows, grid-gap)
• 54. مشکلات رایج Grid
• 55. دیباگ کردن مشکلات ارتفاع و عرض (height, width)
• 56. مشکلات height: auto
• 57. مشکلات width: auto
• 58. مشکلات max-height و max-width
• 59. مشکلات min-height و min-width
• 60. دیباگ کردن positioning (static, relative, absolute, fixed, sticky)
• 61. مشکلات position: static
• 62. مشکلات position: relative
• 63. مشکلات position: absolute
• 64. مشکلات position: fixed
• 65. مشکلات position: sticky
• 66. مشکلات z-index
• 67. دیباگ کردن floats و clearing
• 68. مشکلات float
• 69. مشکلات clear
• 70. استفاده از clear: both, left, right
• 71. دیباگ کردن overflow (visible, hidden, scroll, auto)
• 72. مشکلات overflow: visible
• 73. مشکلات overflow: hidden
• 74. مشکلات overflow: scroll
• 75. مشکلات overflow: auto
• 76. دیباگ کردن padding و margin در عناصر مختلف
• 77. مشکلات margin collapsing
• 78. دیباگ کردن مشکلات responsive design
• 79. استفاده از media queries
• 80. بررسی responsive behavior در ابزارهای توسعه‌دهنده
• 81. شبیه‌سازی دستگاه‌های مختلف
• 82. دیباگ کردن مشکلات viewport
• 83. تنظیم viewport meta tag
• 84. مشکلات viewport scaling
• 85. دیباگ کردن مشکلات فونت و تایپوگرافی
• 86. مشکلات font loading
• 87. مشکلات font fallback
• 88. مشکلات text alignment
• 89. مشکلات line-height
• 90. دیباگ کردن مشکلات رنگ و کنتراست
• 91. مشکلات contrast ratio
• 92. ابزارهای بررسی کنتراست
• 93. دیباگ کردن مشکلات انیمیشن و transition
• 94. بررسی animation properties
• 95. بررسی transition properties
• 96. مشکلات timing functions
• 97. دیباگ کردن مشکلات CSS variables (custom properties)
• 98. نحوه تعریف و استفاده از CSS variables
• 99. اشکال‌زدایی مقادیر متغیر
• 100. دیباگ کردن مشکلات cross-browser compatibility