Make sure you have forked this github Repo to your GitHub account.

You can do this by clicking the "Fork" button in the top right corner of this page.

https://github.com/olitreadwell/lecture-exercise-document-object-model-manipulation

Open the forked repo in your browser.

Open a codespace for the forked repo.

You can do this by clicking the blue "Code" button

Choosing the 'Codespaces' tab

Clicking the "New codespace" or "+" button

We will be working in the index.html file, initially.

Open the index.html file in the file explorer.

Open a preview of the index.html file in a new browser tab.

You can do this by right-clicking on the index.html file in the file explorer and selecting "Open Preview".

In the bottom right corner of the preview window, click the "Open Browser" button.

This will open a new browser tab with the index.html file loaded.

Or you in the bottom bar of your local or in-browser editor, you can click the Port 3000 button and choose the Live Preview: Open in External Browser option.

Where should we include styles.css & script.js?

View the HTML site in the Chrome DevTools and better understand how the DOM is like a Tree

Change the URL for an HTML image using the Chrome DevTools Elements Window

Select an HTML element using getElementById()

Select an HTML element using querySelector()

Store an HTML element in a variable

Change the text of an HTML element using innerText

Change the style of an HTML element using style

Remove an HTML element using remove()

Add an HTML element using appendChild()