Getting Started — Editors & Workflow

Every week you copy real game files into your own folder on your PC, edit them in your own editor (VS Code or Sublime Text), and view them in the browser. There is no server, no PHP and no database for these labs — you just open the HTML files directly.

Create your folders Copy the example files Open in a browser VS Code Sublime Text Weekly workflow Shortcuts Submitting work Troubleshooting

📁 Create your own folders

Make one folder on your PC for each lab week, named exactly like this:

Week1 Week2 Week3 Week4 Week5 Week6

For example, put them inside a folder called WebGames on your Desktop or in your Documents. Your work for each week stays in its own week folder.

Golden rule: never edit the original example files for grading. In your week folder, rename your working copy with your name (for example diceGame_yourname.html), then edit that copy.

📋 Copy the example files

The class website is where you get the example games. For each file in the lab activity:

Open the week's lab page on the class website.
Choose the game in the Finished example dropdown and press Download file (or right-click the game link and choose Save link as…).
Save it into your WeekN folder.
Repeat for every file named in the activity.

Keep every file and its images/audio/video in the same week folder so the links keep working. No XAMPP, Apache or database is required.

🌐 Open in a browser (no server)

Open the class website by double-clicking its index.html.
Double-click any file in your WeekN folder to open it in your default browser.
After editing, press F5 (or Ctrl+F5) to refresh and see the change.

The labs run straight from the file system (file:///…). There is nothing to install or start on a server.

💻 VS Code setup

Install Visual Studio Code from code.visualstudio.com.
Recommended extensions: HTML CSS Support, Prettier, Path Intellisense.
Optional: the Live Server extension gives auto-refresh in the browser.
Open your work: File → Open Folder… and choose your WeekN folder.
Click a game file in the Explorer to open it.
Save with Ctrl+S, then refresh the browser (or use Live Server).

Open your week folderFile → Open Folder… → Week2

📝 Sublime Text setup

Install Sublime Text from sublimetext.com.
Install Package Control (Tools → Install Package Control), then add HTML5, Emmet and ColorPicker if you like.
Open your work: Project → Add Folder to Project… and choose your WeekN folder.
Use the sidebar to click a game file.
Save with Ctrl+S, then double-click the file (or refresh the browser tab) to test.

Open your week folderProject → Add Folder to Project…

🔄 Weekly workflow

Create (or open) your WeekN folder.
Copy the example files named in the lab activity into it.
Open the week's lab page and read the Objectives and the Lab activity steps.
Work through each file in order, saving and refreshing as you go.
Tick the checkpoints and the Tasks for this file boxes on the lab page.
Finish with the Exit quiz, then submit your copies.

🔄 Preview tips

Double-click an HTML file to open it in your default browser.
After editing, press F5 (or Ctrl+F5) to refresh.
Right-click → Open with to choose a specific browser.
Keep the lab page open in one tab and your game in another.

⌨ Useful shortcuts

Action	VS Code	Sublime Text
Save file	`Ctrl`+`S`	`Ctrl`+`S`
Quick open file	`Ctrl`+`P`	`Ctrl`+`P`
Find in file	`Ctrl`+`F`	`Ctrl`+`F`
Comment / uncomment line	`Ctrl`+`/`	`Ctrl`+`/`
Format / re-indent document	`Shift`+`Alt`+`F`	`Ctrl`+`Shift`+`P` → Reindent
Refresh the browser	`F5`	`F5`

📦 Submitting your work

Keep all files for a week in that week's folder so relative paths keep working.
Name every edited file with your student name: slingshot_ali.html.
Before submitting, open each file in the browser and confirm it runs without errors (press F12 → Console to check).
Zip your WeekN folder and upload it, or share it as instructed by your lecturer.

🔧 Troubleshooting

Images or sounds missing? The file must sit in the same folder as its assets.
Blank canvas? Open the browser console (F12) and read the first error — a typo in a variable name is the usual cause.
Changes not showing? Save the file (Ctrl+S) and hard-refresh the browser (Ctrl+F5).
Video/audio will not play? Some browsers block autoplay until you interact with the page.