درس 52: بررسی صفحه با ابزار توسعه دهنده مرورگر و رفع خطا
index.html را باز کنید؛ سه ایراد آموزشی عمدی دارد. اینترنت یا نصب لازم نیست.
fixed.html نسخه پاسخ است و solution.css را به جای bugs.css بارگذاری می کند.
اعداد کد انگلیسی هستند و فونت صفحه از Tahoma سیستم استفاده می کند.

1. عنوان کارت: HTML کلاس card__title دارد اما bugs.css کلاس card-title را هدف گرفته است.
2. رنگ متن lead: قانون #demo .lead نسبت به .lead اولویت بالاتری دارد. حذف قانون متعارض راه حل این نمونه است.
3. عرض: در مدل content-box عرض کل کارت 360 + 48 + 4 = 412 پیکسل است. در نمایشگر 320 پیکسل بیرون می زند.
راه حل: width:100%; max-width:420px; box-sizing:border-box;

هر بار فقط یک فرضیه را در Styles امتحان کنید؛ سپس تغییر درست را در فایل اصلی ذخیره کنید.
ویرایش معمول در DevTools با بارگذاری دوباره از بین می رود؛ مگر ابزار ذخیره سازی مانند Overrides یا Workspaces تنظیم شده باشد.
پاسخ را زود باز نکنید؛ اول علت و مسیر اصلاح هر ایراد را یادداشت کنید.
آزمایش نسخه نهایی: عرض های 320، 768 و 1280، پیوند با Tab و Enter، بزرگ نمایی 200 درصد.
شبیه ساز موبایل جای آزمایش دستگاه واقعی را نمی گیرد.
