Leveraging Page Inspector

You can learn a lot from looking into the source code of existing web pages.

Practically all web browsers support viewing that. However, when using JavaScript, the DOM of the page may change at run time and its source may not reflect the current structure of the page. Most browsers provide tools built directly into the browser to allow developers to examine the momentary state of the page structure. However, these tools are a bit different depending on your preferred browser.

In this exercise, you will learn to examine the DOM of the current page using the Developer Tools window of Chrome. Microsoft Edge and Firefox also have their own tools to discover the DOM.