Stage 1 · Lesson 6 of 7
Debugging with browser DevTools
is a panel built into every browser. In most browsers you can right-click any part of a page and choose Inspect to open it. It shows the live and every CSS rule applied to an element, with the file each rule came from.
The Network tab lists every file the page loads, with its size and timing. The Console shows errors. You can edit styles live to test a fix before changing the .
You can also switch to a phone view, and slow the network down to feel what a poor connection does. On every platform you will use it daily to answer "why does this look wrong" and "why is this slow". It is also where the performance stage starts.
Common trapchanging theme settings or at random to fix a visual bug that DevTools would explain in thirty seconds.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeMDN Web Docs
Mozilla
Free, accurate learning area for HTML, CSS and how the web works; the reference every builder keeps open
- GuideFreeW3Schools
W3Schools · Beginner
Short beginner examples of HTML and CSS you can edit in the browser straight away
Practise
Keep handy
Also worth your time
- web.devGo deeper
Google's guides on responsive design, images and performance for when the basics feel solid