15 - HTML is OOP 🤯

Remember document.getElementById() ?

That's right! HTML uses something called the DOM - the Document Object Model

Note - this lesson does not use a premade Git Repo. You will be making your own - from scratch!

What are we learning?

In this lesson we will:

Review initializing a local git repo
- Review creating files and folders from scratch
Review making a new repository in Github
- Connect the local git repo to the Github remote repo
Review the structure of HTML, CSS, and JS
Review the most basic requirements of HTML
Practice HTML & JS by creating an image viewing website

Table of Contents

Create a new folder for your project (named accordingly)
- Either using a GUI or the command line: mkdir 15-HTML
Go into that folder (cd 15-HTML)
Initialize a new git repo: git init
Add some files for working:
- touch index.html
- touch style.css
- touch script.js
Create your first commit:
- git add *
- git commit -m "Initial Commit"

Login to your Github account and find the "New Repository" button
- Alternatively, go to https://github.com/new
Give your repo a meaningful name (Maybe "15-HTML" or "Practicing-HTML")
Select Private so that the general public does not see your work
Skip the rest of the options
Click "Create Repository"

In your terminal, add a remote to the Github repo
- Make sure you are in the correct folder
- Add the remote: git remote add origin https://github.com/<your url>
Link your local repo and push the initial commit to the remote
- Include the -u option to link the branches: git push -u origin main

An HTML document requires a certain structure. It is the blueprint for the Document Object Model (DOM).

At the very least, you should start with the DOCTYPE tag: <!DOCTYPE html>
The Document is composed inside the <HTML> tag: <html> </html>
The DOM has two sections, the HEAD and the BODY
- The head is for browser directives and hidden information
- The body is what the user will see and interact with

<!DOCTYPE html>
<html>

<head>

</head>

<body>

</body>
</html>

To load the stylesheet file, we add a link inside the head: <link rel="stylesheet" href="./path/filename.css">
Loading a script file is a bit different. You have two options:
1. Load the file at the very end of the body, just before the closing body tag. This ensures that the HTML content loads into the DOM before running the script:
  <script src="./path/to/script.js"></script>
2. Load the file inside the head with the defer option so that the browser loads the script last:
  <script src="./path/to/script.js" defer></script>