"Inspecting the DOM with your browser's Developer Tools" is a sentence with quite a few new words. But have no fear, this repo makes it clear!

This repository containes a collection of live web pages designed to help you understand the lifecycle of an HTML web page (HTML+CSS source code -> the DOM -> rendered content) and how you can use your browser's Developer Tools to inspect and modify the DOM.

You'll know you have mastered this repo when you understand (and can explain to someone else!) the 3 stages in an HTML page's life-cycle using your DevTools and any simple website:

1. HTML & CSS Source Code: This is the text that you write in a .html file and open with your browser. HTML is a mark up language, meaning it describes to a computer how you want the content on your web page to be organized behind the scenes. CSS is a language to describe how your web page should be rendered on the screen. You can't edit the source code from the browser, only from your text editor. Any changes you make in the browser will disappear when you refresh the page.
2. The DOM Tree: When you open an HTML file in your browser, it parses the code you wrote and builds the DOM Tree. The DOM Tree is very similar to your HTML but will not be exactly the same, <table> tags are helpful for understanding this.
3. Rendered Content: The DOM is an abstract representation of the content in your website, it is NOT exactly what you see on the screen. This is easiest to understand when you think of CSS: it is possible to write one div below anther in your .html file, have them in that order in the DOM (dev tools), then switch them on screen in the final rendering using CSS. Why is this? Because (aproximately) HTML is used to describe the DOM, and CSS is used to describe how the DOM is rendered. (don't worry if that doesn't make sense right away, it'll take some practice to wrap your head around the idea).

"Great!" you say "This is a very well written explanation. But why does this matter, can't I just make pretty things?". Yes, you could just hack together some HTML & CSS to make pretty pages, but without learning to use the Developer Tools and without understanding the HTML lifecycle (HTML+CSS source code -> the DOM -> rendered content), you'll never leave the minor leagues.

Not only is it very difficult to catch your mistakes in HTML & CSS without mastering the DevTools, but mastering the DevTools before moving on to JavaScript is one of the single most helpful things you can do to prepare.

• learning objectives
• the exercises
• study links

• See the source code for any web page directly from the browser (ctr-u in FireFox)
• Inspect the DOM using your browser's Developer Tools
• Modify a live website from your browser's Developer Tools (not the source code!)

TOP

All exercises in this repository consist of an example meant to be studied as in a live web page, how else do expect to practice inspecting webistes!

Here they are:

1. basic example without CSS
2. basic example with CSS
3. rearrange with CSS
4. tables are not as they appear!
5. HTMl bugs:
   • no <tr>
   • unclosed tags
   • attributes vs. innerHTML
6. Ways of including CSS:
   • inline css
   • internal css
   • external css
7. CSS bugs:
   • exercise 1
   • exercise 2
   • exercise 3
   • exercise 4

TOP

What is the DOM?

• articles: w3schools.com, css-tricks.com
• videos: freecodecamp, udacity

visualizing the HTML life-cycle:

• Hixie's Live DOM Viewer

HTML -> DOM, CSS -> Rendering:

• stack overflow
• frontend babel

Dev Tools:

• FireFox: what are the devtools?, how to open them, editing live sites
• Chrome, Chromium, Brave: Getting Started Inspecting

HTML:

• 30 good things to do
• 10 bad things to avoid

CSS:

• 3 ways of styling
• good and bad practices

Looking for more like this?

• appspot: dom-tutorials

TOP