# Day 2 Overview: The DOM
## Course Project Overview: What will I be building?
### App: Coffee Masters
* Web app for a coffee shop
* Menu of products
* Details of each product
* Order with Cart
* Data in JSON
* No JavaScript written
To start, I always thought that the DOM and the HTML file in my code editor that was served to the browser were the same thing. I mean, when I opened my console to inspect objects I saw pretty much the same HTML file I saw in my editor. However, I was wrong, since there is a difference between the DOM and the HTML file that gets loaded. The HTML file is the string representation of the DOM, but the DOM is always a structure in memory. The head and body can be implicit in an HTML file, which will then be added in the DOM, because it’s mandatory in the DOM. The browser parses our HTML code and creates the DOM from it, so they’re not the same.
The only thing mandatory in an HTML file is the `` and `` tags, and even without them, it still might work on some browsers apparently, lol.
```html
<!DOCTYPE html>
<style>
body { background: red;}
</style>
<title>My first HTML test
Quick HTML code
```
When the browser begins parsing our HTML file, it begins creating the `` tag in the DOM when it encounters my first visible element, something like an `
` tag:
```html
Title
Visible Text
```
## Scoping querySelector
While we can use the DOM API anywhere and everywhere, we can also scope its usage to the actual HTML element I'm interested in. For example, I could look for my `` element within my `