Adding the files

In Visual Studio Code

Create a file, and call it index.html

Emmet Short cut for creating HTML Boiler Plate code

Shift-exclamation-Enter will give you the boiler plate code

Link to a script file

To start out with one of the most important things is to make sure that your html file is linked to a script file. You want to do this in the head tag underneath your title

to link to a script file, we use the word script in angle braces. Then we shorten the word source to just 3 letters.

src

we use an equal sign and inside quotation marks we use the name of the script file with the extension of .js

defer: after the script file, you will see the word defer-

If the defer attribute is set, it specifies that the script is downloaded in parallel to analyzing or (parsing) the page, and executed after the page has finished analyzing (parsing).

The script file

You will now need to create a script file.

Inside of Visual Studio Code:

New file

Name your new file

script.js

Messing with the body of the document

if we create a constant, it is a type of variable that cannot be messed with. Which means it does not change like a regular variable does. This means that! And it always means that! So, we are going to create a constant called body and set it to something, and that something is what body will always mean in this document. Well, I suppose we could change what this constant would be. And then it would always mean that. Because constant said so.

Append: append is the method that we use to add elements to the body. So, every time we say the word append, we are adding something to the body.

With using just append, we can append a string; however, there is also append child, but append child will not allow you to append text. With append child, you will need a node. Such as, a div or a span or an anchor tag. Those things will work with append child.

But the simple append method will also allow you to append multiple things, separated by commas and all text in the individual sections must be surrounded by quotation marks.

If you have the extension for “Go Live,” you can now hit the button on the bottom of the Visual Studio App to see what you did on the browser

This is using our simple append method, because if you were to try append child, which is that other method, you would show nothing, and only get an error.