HTML/CSS Debugging

There are loads of resources for learning HTML online- W3 Schools, youtube, HTML Tutorials yields millions of results. If you have specific questions, like "how to center text in a div with css", googling them will almost certainly yield a stackoverflow post on the topic.

There is a great way to test html code and see the results directly in the browser with the development tools built in to most modern browsers.

Modifying HTML

The easiest way to try HTML code is to view it in a browser. Simply create a document with a .html extension, open it in your favorite text editor (notepad works, but if you want good syntax highlighting Atom, Visual Studio Code, or Sublime Text are vastly superior). Then right click on your HTML file and select "open with Chrome". Note- both Firefox and Microsoft Edge have similar tools, and you should test your code in multiple browsers due to styling inconsistencies, but in my experience Chrome Development tools are the best to work with.

You should see your HTML rendered in the browser. If you modify your .html file and then refresh the browser page, you should see your updated changes!

Modifying CSS Live

The chrome dev tools gives us the ability to modify CSS and see the results live. First you want to open the inspector- this can be done through the keyboard shortcut Ctrl+Shift+I or through right-click -> Inspect. If neither of these work, your dev tools are not enabled, and you should search how to enable them (i.e. enable chrome dev tools).

Your view should be as follows:

Media:ChromeInspectorOverview.png

The Rendered HTML and Raw HTML are pretty straightforward. You can actually modify the Raw HTML if you really want to- but no changes made to that panel will persist to your .html file unless you copy them over.

The Device Emulator allows you to emulate different screen resolutions- which can be useful for testing what mobile devices will see.

The Styles panel can be modified to view what changes a specific style will do to your rendered HTML live- just select the element whose style you want to change, and then modify the Styles panel with the new style. note that element.style will modify just the style of that element, but below that you can also modify styles of the id on that element or any classes applied to that element, which will persist to the style of every other element on the page with the same class name. Note that yno changes to the Styles panel will persist to your .html file unless yo copy them over yourself.

Finally, the Element Properties panel lists the actual computed styles on an element- this can be useful for seeing the dimensions of an element, or various other uses. If you want to see the bounding box of a specific element on the HTML page, you can hover over that element in the Raw HTML panel and it will shade in that element;s border box in the Rendered HTML panel.

That's about all there is to it! Always remember, google is your friend!