1. Intro to Glitch

This course is structured to use the Glitch platform. Glitch is a web platform that provides you with a free JavaScript-based web server for your projects.

You should get acquainted with Glitch as soon as possible and create an account and a project where you will code all the exercises and final project.

Sign up

1. Start by signing up on Glitch.com so that you can save your work. Go to glitch.com and click "Sign up" (Figure 1). You have various options for creating an account from existing social networks and I recommend you use the one you are most used to (Figure 2).

2. Create a new project (Figure 3). After you sign up and login into Glitch, you should create a project (Figure 3): make sure you choose the hellp-webpage template.

3. Creating a new project will take you to the editor of Glitch (Figure 4).

4. Rename your project. Glitch assigns a random name to your project. To make it easier to locate, you should change it by clicking the name in the top left, and then entering a new one (Figure 5). Use your name to make it easy to identify who the project belongs to.

Learn to get back to your project after you sign out

You should also learn how to get back to your project after you log out. Imagine you have finished for the day and log out; on the following day you should be able to get back to the project easily:

1. Log out (Figure 6). You will be taken to Glitch's main page.

2. Log in again (Figure 7).

3. Locate your project (Figure 8).

4. Click on the project's name to edit. You are now back at the editor.

Glitch editor

The Glitch editor is a simple file editor.

1. You can see a list of files on the left
2. Clicking a file will open it in the file editor to the right
3. There is also an "Assets" folder for putting media files

Preview the results

On Glitch, you will most often edit a file and then preview how that file looks from the perspective of a user. To do this, we need to open that file in preview (or published mode).

Glitch does not allow us to directly preview a specific file. Instead, it opens the default website homepage file, which is called index.html. In order to make it easier for us to open the file we wish in preview mode, we should delete the file index.html by right-clicking on it and selecting Delete (see Figure 10).

To open Preview mode, we click on the Preview button at the bottom and select Preview in a new window -- see Figure 11 (I do not recommend the alternative option of Open preview pane because it opens a pane on the right side of the coding window which is too small and if you have auto-refresh on it will keep going back to the folder view).

The preview will open a new tab on your browser, which you can keep open (you don't need to keep opening new preview windows). It will show you the folder view of your project (see Figure 12), on which you can just pick the file that you want to preview. If you have your project structured in folders, you can open a folder and then select the file to preview.

An important thing to notice is the address of the file or of the folder view for your project (see Figure 13): this is the address you will need to enter on your smartphone or on your VR headset's browser to view it that device (it is usually easier to enter the folder view address and then select the specific file within your device's browser).