Скачать или смотреть HTML - Trees and the DOM

This video is part of a playlist covering how to get a web development job and basic coding skills. The full playlist can be found here:    • How To Get A Web Development Job  

-------------------------------------------------------------------
Lesson Description:

We learn about tree structures and how our HTML documents can be visualized as trees. Additionally, we introduce the "html", "head", and "body" elements along with the DOCTYPE preamble. Finally, we discuss "quirks mode" vs "standards mode".

Terminology:

Tree Structure - Method of hierarchically organizing data. A common example would be your family tree with you on top, your children below, and your grandchildren below your children.

Node (Tree Structure) - An individual data point in a tree structure. Continuing with our family tree example, this could be you, any of your children, or any of your grandchildren. Each of them would be a node.

Root (Tree Structure) - The top-most data point in your tree structure. The root is a node and there is only one of them in the tree. Continuing with our family tree example, you would be the root as you're the uppermost data point in the tree.

Branch (Tree Structure) - A connection between two nodes in the tree. Continuing with our family tree example, there would be a branch between you and your child. If you have more than one child, there would be multiple branches between you and each of your children.

Parent (Tree Structure) - The upper-level node in a relationship of two nodes that have been connected by a branch.

Child (Tree Structure) - The lower-level node in a relationship of two nodes that have been connected by a branch.

Leaf Node (Tree Structure) - The lower-most nodes in your tree structure that are furthest from the root. These nodes cannot have any children (otherwise they wouldn't be the lower-most node).

Sibling (Tree Structure) - Two nodes that are on the same level with the same parent node.

Ancestor (Tree Structure) - A node one or more branches above a node towards the root.

Descendant (Tree Structure) - A node one or more branches below a node away from the root.

"html" Element - The root element of our HTML document. It is required.

"head" Element - A required element for any HTML document. It must be the first child of the "html" element. It contains any machine-readable data that the browser needs to properly display the webpage.

"body" Element - A required element for any HTML document. It must be the second child of the "html" element, which also makes it a sibling of the "head" element. It contains all of the content of our webpage viewable by our webpage visitors.

DOCTYPE Preamble - Placed on the very first line of our HTML file. This preamble tells the browser to use "standards mode" instead of "quirks mode".

Standards Mode/No Quirks Mode - Most often used nowadays - a browser mode that conforms to all modern HTML, CSS, and JS standards that have been created and agreed upon by international organizations such as the World Wide Web Consortium (W3C) and Ecma International (ECMA).

Quirks Mode - Compatibility mode for older webpages that were created before web standards were agreed upon.

Document Object Model - Often referred to as the DOM. The Document Object Model is a representation of our HTML document as a tree structure in the browser's memory that allows our JavaScript to manipulate it for extra effects. We'll cover it in a later unit. We're mentioning it now because if you search for HTML tree structures on google.com or bing.com, a bunch of results related to the DOM will show up on the search results page.

Resources:

https://en.wikipedia.org/wiki/Tree_st...
https://en.wikipedia.org/wiki/Tree_(d...)
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...
https://developer.mozilla.org/en-US/d...

-------------------------------------------------------------------
THE GET A WEB DEV JOB COURSE:

You're in learn2code hell. We're gonna get you out.

You will go from ZERO to a $120,000+ skill set.

We'll learn web development together - from HTML and CSS (baby's first code) through React, GraphQL, Docker, and Kubernetes (big boy stuff worth $120,000+).

We'll also cover HOW TO ACTUALLY GET HIRED (resumes, interviews, projects, practice problems, and more) - the most important step that other web dev courses skip.