Setting up a File System

Sidenote: An IDE is an Integrated Development Environment, which is a fancy way of saying, "this is where I write my code." Some IDEs help you correct mistakes when you're coding. They can be extremely helpful, whether you're new to coding or if you're a professional. However, you can write perfectly fine code in a basic file system like we're talking about here.

If you don't have access to an IDE or a website like http://repl.it, you can do all your coding anywhere you are. You need to use a text editor on your computer, like Notepad. There are some things you must do to get started.

Step 1: Make a folder

First, make a folder on your computer where you can store your files. If you're on a PC, this can be as simple as right-clicking the desktop and selecting New > Folder. It's the same basic process if you're using Google Drive (click New, then Folder) or something else like an iMac.

Step 2: Give the folder a useful name

Give the folder a meaningful name, like coding or Room Adventure Game.

Step 3: Create a new text file

Make sure you can see the file extension. By default a text document has .txt at the end of the file. You need to be able to change the extensions. You may get a warning not to change them, but it's ok.

Go inside your new folder and create a new text file. Right-click and select New > Text Document.

Step 4: Create three new files

You need create a set of three files,index.js, index.html and index.css.

Sidenote: Why did we start all their names with index? It's so we know they relate to each other.

When you go to a website, you often go to the website's domain. That's the .com or .edu type of thing. There are a bunch of them.

Each of those domains load up a default webpage. In most cases, that default webpage is index.html. Try this out: Go to a domain you know and at the end add /index.html and hit enter. This site's domain is http://coding.stephenjwolf.com. Go ahead and try this instead: http://coding.stephenjwolf.com/index.html. Go out and try it on other sites like www.amazon.com and www.snapchat.com!
[Note: some sites like google.com block this]

Now let's do an exercise to test these files out to make sure they work. You're going to edit all three of those files and then run index.html.

Set up the JavaScript file for testing

Open the index.js file in your text editor. Type in the following line and then save the file.

Set up the CSS file for testing

Open the index.css file in your text editor. Type in the following line and then save the file.

Set up the HTML file

Sidenote: It's good practice to type this in yourself. But you can also highlight it here, copy it (Ctrl+C), then paste it (Ctrl+V) into your index.html file.

There's a basic structure needed for HTML. Without getting into detail here, this code will give you a basic setup for all your webpages.

This code sample is called boilerplate code because you can essentially just start every HTML document with it. Some programs llet you create a file like this and then every time you start a new project, this would load automatically, saving you from having to set this structure up each time. This is repl.it's boilerplate with the <title> changed.

Some of the code isn't technically required, but it helps make your webpage look correct on different devices and in different browsers.

Notice where it has index.css and index.js? If you used other filenames or paths, then put those names here instead.

Watch your spelling, capitalization, and punctuation throughout.

I used the title The Room Adventure but you can change that to whatever you want. The <title> is what shows up in the browser tab or in the title bar.

Let's test it out

Go back into the coding folder you created and double-click the index.html file.

Your browser should load and give you a popup!

Before you click OK, you may notice that the browser wait icon may be spinning and that the background didn't change to lightsteelblue. That's because popups, like the alert take priority in the browser. When you click that OK button, you'll see!

One last thing to check. We put a console.log() command in there. Let's go to the console window to test it out. Open up your browser's developer tools to get there. Try pressing the F12 key on your keyboard. Then make sure you're in the console tab. It should say Test 2.

Testing complete

If all that worked than you're good to go. Leave the index.html file as it is. But go back into the index.js and the index.css files and delete the few lines in there so you're not stuck with the blue or the popup.

Remember

Only put JavaScript code into the index.js file.

Only put HTML code into the index.html file.

Only put CSS code into the index.css file.

You're all set

At this point, you're ready to dive into your files and code. You can always add files if you need them, but this will be more than enough for what you need to do.

You can file this lesson under "COMPLETED!"

—Dr. Wolf