We are going to be learning about JavaScript by using it in web pages. This is the most common use of JavaScript.

We have already created a web page for you to use, and have left a javascript file blank for you to put your code in. You can find this file by opening this project in your Code Editor and navigating to the muses-code-website folder. In here you will find a Javascript file named script.js, a CSS (style) file named style.css and an HTML file named index.html.

So what actually is a web page?

It’s just a text file with different types of content in it.

1. text content, ie the actual words that will be displayed
2. HTML tags, which tell the browser how the content is supposed to be displayed
3. CSS, which describes how HTML elements are styled (page layouts, colours, fonts, etc.)

We’ll explain more of the mechanics of the web on the next page.

Let’s get started!

For this workshop, you’ll be editing code inside the script.js file using your code editor. To see the changes you’ve made, open up the index.html file in your Web Browser. You can do this by:

• Mac: opening Finder, navigating to the project folder and double clicking on index.html
• Windows: opening File Explorer, nativating to the project folder and double clicking on index.html
• Either: opening your Web Browser, clicking on the File menu, clicking Open File, navigating to the project folder and clicking on the index.html file

So before we get started, make sure you have:

• a web browser open with this website and your index.html page loaded
• a code editor with your script.js file open.

Tip:

For every Challenge we give you, we will also show an Answer of what the completed code might look like. Try not to peek at this until you’ve attempted the code yourself. Also remember that there are many ways to code things, so your answer might look slightly different to ours.

Ready? Let’s go!