richardsaci

Let' Start Coding

---

In the "Let's Start Coding" section, we will begin building the header section of the body element. We will do this using JavaScript and the Document Object Model API.

---

• Open Visual Studio Code by right-clicking on your project folder and selecting the option "Open with Visual Studio Code."
• template

richardsaci

Add Above or Below League Average Column to Our Table

---

richardsaci

---

---

richardsaci

Building Our Basic Table

---

• Build Our Basic Table for Udemy Course Programmatically Build an HTML Table using Vanilla JavaScript, the Document Object Model, and JSON (JavaScript Object Notation).

• Open Visual Studio Code by right-clicking on your project folder and selecting the option "Open with Visual Studio Code."
• template
• Create a new folder titled "basicTable" by clicking on the icon to create a new folder.

richardsaci

firstDOM.js uses the Document Object Model to change the title, creates the header, main, and footer sections, adds h1 and h4 elements to describe the page.

• Prerequisites:
• Visual Studio Code
• Basic HTML, CSS, and JavaScript skills.

---

1. At the bottom of this page I have a GitHub Gist preview that contains the entire index.html file.
2. Use the emmet command "Shift !" in Visual Studio Code to automatically insert the boilerplate code for your index.html file.

• The only changes you need to make to the HTML before implementing this code are:

richardsaci

Document Object Model - Hands On Practice

---

• Let's Create an Object that represents our body element with the id of body.
• www.w3schools.com/jsreF/dom_obj_htmlcollection

richardsaci

GitHub Desktop

• Contents

• github.com - Free Account

• GitHub Free Account - There are several free videos online that will show you how to get a free GitHub account. If you have any problems, leave me a message.

• Installation

richardsaci

GitHub Gist Cheatsheet

• Thoughts and Notes for GitHub Gist

GitHub Gist Documentation

richardsaci

Node and Node Package Manager

---

• Reclass:
• npm cache clean --force
• How to completely remove node.js from Windows
• node --version

richardsaci

Document Object Model 3 of 3

• document is the root of our page.

• document.head

• document.body

• app.classList.add

• app.classList.contains // returns true of false

• Use # for ID