When markup and styles disagree, browser DevTools are faster than guessing. Build this habit on every playground run.
Elements panel workflow
- Right-click → Inspect the wrong element.
- Read the Styles pane: winning rule, struck-through losers.
- Toggle classes and property values live—then copy the fix back to your source.
Computed tab
See final display, width, margin after cascade—great for box model mysteries.
Accessibility checks
- Verify heading order and landmark roles in the accessibility tree (browser-dependent panel).
- Tab through interactive elements—focus order should match visual order.
Foundations reminder: Browser developer tools lesson.
Important interview questions and answers
- Q: How do you find why a CSS rule applies?
A: Inspect element, read cascade order and specificity in Styles, trace selector to file. - Q: What is the difference between Styles and Computed?
A: Styles shows rules and overrides; Computed shows final used values. - Q: How do you debug layout overlap?
A: Check `position`, `z-index`, flex/grid gaps, and box model in Computed.