The screenshots below are specific to the Chrome web browser, which is available for Mac, PC, and Linux and has great developer tools. If you're partial to another browser, there's usually a similar set of tools you can use.
First, you've got to turn on your developer tools. They're hidden by default.
In Chrome, you can do this by clicking View > Developer > Developer Tools.
Click on the 'Elements' button to check out your HTML.
Clicking on an HTML tag in the elements panel will highlight that element in the browser window. It's a great tool for debugging styling problems. On the right side of the panel, you'll even get a list of styles that are being applied to that element.
In the 'Network' panel, you can see what other files and resources your HTML page is loading.
If you click on a file name, you can take a look at the contents of that file. This panel is a great place for debugging script linking or loading issues. (You can see HTTP headers and request params here too, with a little digging.)
Keep Learning with Developer Tools
Go on to Creating A List