کتاب صوتی Debugging CSS: Common Pitfalls and Solutions

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

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

عنوان دوره: دوره Debugging CSS: Common Pitfalls and Solutions

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

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

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

• 1. مبانی CSS و شروع کار با Debugging
• 2. آشنایی با CSS و نقش آن در وب
• 3. ساختار یک قانون CSS (Selector, Property, Value)
• 4. نحوه لینک کردن CSS به HTML (External, Internal, Inline)
• 5. مروری بر انتخابگرهای CSS (Selectors)
• 6. اولویت CSS (Specificity) و cascade
• 7. ابزارهای توسعه‌دهنده مرورگر (DevTools) و بازرسی CSS
• 8. اصول اولیه Debugging و عیب‌یابی CSS
• 9. اشتباهات رایج در نوشتن CSS
• 10. اهمیت کامنت‌گذاری و خوانایی کد CSS
• 11. آشنایی با Box Model و نحوه عملکرد آن
• 12. شناسایی و رفع اشکالات Layout و Position
• 13. درک کامل Box Model (Margin, Border, Padding, Content)
• 14. مشکلات رایج Margin و Padding و راه‌حل‌ها
• 15. Debugging مشکلات مربوط به عرض و ارتفاع (width, height)
• 16. آشنایی با Display properties (block, inline, inline-block, none)
• 17. Debugging مسائل مربوط به Display و تأثیر آن بر layout
• 18. استفاده از Position property (static, relative, absolute, fixed, sticky)
• 19. Debugging مشکلات مربوط به Position و layout
• 20. درک مفهوم Z-index و مدیریت لایه‌ها
• 21. Debugging مسائل مربوط به Z-index و همپوشانی المان‌ها
• 22. استفاده از Overflow property و مدیریت محتوای اضافی
• 23. شناخت و رفع اشکالات مربوط به Text و Font
• 24. Debugging مسائل مربوط به متن و فونت (font-family, font-size)
• 25. Debugging مشکلات مربوط به فونت‌های سفارشی (Custom Fonts)
• 26. آشنایی با Text properties (color, text-align, line-height)
• 27. Debugging مشکلات مربوط به Text properties و نمایش متن
• 28. استفاده از Text-decoration و Text-transform
• 29. Debugging مشکلات مربوط به Text-decoration و Text-transform
• 30. مشکلات رایج در استفاده از Font Awesome و آیکون‌ها
• 31. Debugging مشکلات مربوط به Font Awesome و آیکون‌ها
• 32. استفاده از Text-shadow و Debugging آن
• 33. Debugging مسائل مربوط به فاصله حروف و کلمات
• 34. اشکالات مربوط به Flexbox و Grid
• 35. معرفی Flexbox و مفاهیم اصلی (flex-direction, justify-content, align-items)
• 36. Debugging مشکلات مربوط به Flexbox و چیدمان المان‌ها
• 37. آشنایی با Flex-grow, Flex-shrink, و Flex-basis
• 38. Debugging مسائل مربوط به Flex-grow, Flex-shrink, و Flex-basis
• 39. معرفی Grid Layout و مفاهیم اصلی (grid-template-columns, grid-template-rows)
• 40. Debugging مشکلات مربوط به Grid و چیدمان المان‌ها
• 41. آشنایی با Grid-gap و نحوه ایجاد فاصله بین المان‌ها
• 42. Debugging مسائل مربوط به Grid-gap و فضاسازی
• 43. استفاده از Grid Areas و Debugging آن‌ها
• 44. Debugging مشکلات پیچیده Flexbox و Grid
• 45. اشکالات مربوط به Responsive Design
• 46. مفاهیم Responsive Design و Mobile-First Approach
• 47. استفاده از Meta Viewport Tag
• 48. آشنایی با Media Queries و نحوه استفاده از آن‌ها
• 49. Debugging مشکلات مربوط به Media Queries و Responsive Design
• 50. Debugging مشکلات مربوط به تصاویر Responsive
• 51. Debugging مسائل مربوط به Layout در دستگاه‌های مختلف
• 52. تست Responsive Design با ابزارهای مختلف
• 53. Debugging مشکلات مربوط به فونت و اندازه متن در Responsive Design
• 54. بهینه‌سازی تصاویر برای Responsive Design
• 55. Debugging مسائل مربوط به ویدیوها در Responsive Design
• 56. مشکلات رایج و راه‌حل‌های مربوط به Animations و Transitions
• 57. معرفی Transitions و نحوه ایجاد آن‌ها
• 58. Debugging مشکلات مربوط به Transitions و انیمیشن‌ها
• 59. معرفی Animations و نحوه ایجاد آن‌ها
• 60. Debugging مشکلات مربوط به Animations و انیمیشن‌ها
• 61. استفاده از Keyframes و ایجاد انیمیشن‌های پیچیده
• 62. Debugging مشکلات مربوط به Keyframes و انیمیشن‌های پیچیده
• 63. Debugging مسائل مربوط به Performance در Transitions و Animations
• 64. مشکلات رایج در اجرای انیمیشن‌ها در مرورگرهای مختلف
• 65. بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر
• 66. آشنایی با کتابخانه‌های CSS انیمیشن
• 67. سایر خطاهای متداول و راه‌حل‌ها
• 68. Debugging مشکلات مربوط به انتخابگرهای CSS نادرست
• 69. Debugging مشکلات مربوط به ارث‌بری (Inheritance)
• 70. Debugging مشکلات مربوط به واحدهای اندازه‌گیری (px, em, rem, %)
• 71. Debugging مشکلات مربوط به رنگ‌ها (rgba, hex, hsl)
• 72. Debugging مسائل مربوط به background-image و background-size
• 73. Debugging مشکلات مربوط به hover, focus, و active states
• 74. استفاده از !important و عواقب استفاده بیش از حد از آن
• 75. Debugging مشکلات مربوط به !important و راه‌حل‌های جایگزین
• 76. مسائل مربوط به سازگاری با مرورگرهای مختلف
• 77. Debugging مشکلات مربوط به سازگاری با مرورگرهای مختلف
• 78. ابزارها و تکنیک‌های پیشرفته Debugging
• 79. استفاده از Linters و Validators برای CSS (e.g., stylelint)
• 80. استفاده از Preprocessors (e.g., Sass, Less) و Debugging آن‌ها
• 81. Debugging CSS در پروژه‌های بزرگ
• 82. استفاده از CSS Frameworks (e.g., Bootstrap, Tailwind CSS) و Debugging
• 83. استفاده از Git برای مدیریت تغییرات CSS
• 84. بررسی و اصلاح خطاهای عملکرد CSS (CSS Performance)
• 85. استفاده از ابزارهای Profiling برای بهینه‌سازی CSS
• 86. Debugging مشکلات مربوط به CSS در جاوااسکریپت (JavaScript)
• 87. تکنیک‌های عیب‌یابی CSS در محیط‌های توسعه پیچیده
• 88. خودکارسازی تست‌های CSS
• 89. بهبود کدنویسی و نگهداری CSS
• 90. نوشتن CSS تمیز و خوانا (Clean Code)
• 91. استفاده از نام‌گذاری مناسب برای کلاس‌ها (BEM, SMACSS)
• 92. سازماندهی فایل‌های CSS
• 93. استفاده از Comments و Documenting کد CSS
• 94. Refactoring و بازنویسی کد CSS
• 95. مدیریت نسخه‌های مختلف CSS
• 96. بهبود قابلیت نگهداری (Maintainability) CSS
• 97. استفاده از Design Systems و Style Guides
• 98. نقش CSS در Accessibility (دسترسی‌پذیری)
• 99. Debugging مشکلات مربوط به Accessibility در CSS
• 100. تکنیک‌های پیشرفته Debugging و حل مسائل پیچیده