HTML

What is HTML?

HTML is the basic code your browser uses to turn into the DOM

It's just some text!

What is the DOM (document)?

DOM (Document Object Model) is the framework your computer uses to represent the webpage.

Any page is basically a collection of elements (nodes), ordered in a tree structure (parents and childs)

Document Tree

The DOM can load some powerful tools!

Q: What tools and how?

Demo

DOM vs. HTML

View Source just shows you the HTML that makes up that page. It's probably the exact HTML that you wrote.

When you're looking at the panel in whatever DevTools you are using that shows you stuff that looks like HTML, that is a visual representation of the DOM!

What is CSS?

CSS determines what elements in the DOM should look like. It's a simple language to style elements in the DOM

What is Javascript?

Javascript is a language you can use to programmatically interact with the Document

It's a complete programming language, so you can do pretty much anything you like to make changes to the document

Finish the mighty drawing!

Misc

What are classes and ids in the DOM? Why do we use them?

What is jQuery?

What is bootstrap?

Demo: network requests

Demo: javascript debugger