Sign up with your OCAD U email

If you already have a GitHub account, keep it. Add your OCAD U email to it in Settings, Emails and go to the next step.

1. Go to github.com/signup.
2. Enter your OCAD U email address and a strong password.
3. Choose a username. Read the note below first.
4. GitHub emails you a code. Enter the code to verify your email.

github-signup.png. The sign-up form at github.com/signup. GitHub blocks automated browsers on this page, so it needs a manual capture.

Turn on two-factor authentication

Two-factor authentication (2FA) means GitHub asks for a code from your phone as well as your password. GitHub requires it for anyone who publishes code. The student benefits application also requires it. Set it up now so it never blocks you later.

The most reliable method is an authenticator app. If you already use one, such as Google Authenticator, Microsoft Authenticator, 1Password or the Passwords app on an iPhone, use that.

1. Go to github.com/settings/security. This is Settings, then Password and authentication.
2. Click Enable two-factor authentication.
3. Choose Authenticator app. GitHub shows a QR code.
4. Open your authenticator app on your phone. Add a new account and scan the QR code.
5. Type the 6 digit code from the app into GitHub.

Save your recovery codes

Recovery codes are the only way back into your account if you lose your phone. GitHub will not let you finish until you save them.

1. Click Download. You get a small text file.
2. Keep the file somewhere that is not only your phone. Your OCAD U OneDrive or a password manager are good places.
3. Click I have saved my recovery codes.

Add the GitHub Mobile app

With the app installed, GitHub can send a notification to your phone and you tap to approve the sign-in. It is a useful second method. It can only be added after the authenticator app or SMS is set up.

1. Install GitHub Mobile from the App Store or Google Play.
2. Sign in to the app and allow notifications.

Check if you already have it

1. If it is not there, go to the next step.
2. If it is there, open it and update it. On a Mac, use the GitHub Desktop menu, then About GitHub Desktop, then Check for Updates. On Windows, use Help, then About GitHub Desktop.
3. Then skip to step 4 and check the account and the name it is using.

Download and install

1. Go to desktop.github.com/download. The page offers the right download for your computer.

Sign in to GitHub

1. On the welcome screen, click Sign in to GitHub.com.
2. Your browser opens. Sign in if asked, check the username, and click Authorize desktop.
3. Your browser asks to open GitHub Desktop. Allow it.

desktop-welcome.png. The GitHub Desktop welcome screen with "Sign in to GitHub.com". Needs a first run of the app.

Let it set your name and email

Git writes a name and an email on every version you save. GitHub Desktop now offers to fill those in from your GitHub account.

1. On the Configure Git screen, leave Use my GitHub account name and email address selected.
2. Click Finish.

That is all GitHub Desktop needs to do for now. You can close it. VS Code and every other tool on your computer will use the same name and email.

If you already had GitHub Desktop

1. Under Accounts, check that it is signed in to the GitHub account you are using for this course.
2. Under Git, check the name and email. Fix them if they are from an old account, then click Save.

desktop-configure-git.png. The Configure Git screen with "Use my GitHub account name and email address" selected. Needs a first run of the app.

Already have VS Code? Start here

If VS Code is already on your computer, do not install it again. Bring it up to date and check three things. If you have never installed it, skip this step.

1. Update it

VS Code now updates every week, and a lot has changed in a year. Copilot used to be an extension. It is now built in. This guide needs version 1.125 or newer.

2. Check which account is signed in

1. Click the Accounts icon at the bottom left.
2. If it shows the GitHub username you want to use for this course, followed by (GitHub), you are signed in. You can skip steps 2 to 5 of this part.
3. If it shows a different account, such as an old GitHub account or a Microsoft account, click the account name, then Sign Out. Then sign in with the right one in step 3.
4. If it shows no account, carry on with step 3.

3. Look at your old extensions

Click the Extensions icon and look under Installed. Nothing here will break the setup, but some of it is no longer needed.

My VS Code is full of settings and extensions from other courses

You do not need to remove anything. VS Code has profiles. A profile is a separate set of extensions and settings. Make a clean one for this course and switch between them whenever you like.

1. Click the gear icon at the bottom left, then Profiles.
2. Create a new profile. Call it something like Atelier.
3. VS Code switches to it. It looks like a fresh install, and your old setup is untouched in the Default profile.

Download and install VS Code

1. Go to code.visualstudio.com/download.
2. Click the big button for your computer.

Open VS Code and sign in with GitHub

If this is a new install

The first time VS Code opens, it shows a welcome window that asks you to sign in.

1. Click Continue with GitHub.

If you have used VS Code before, or you closed that window

You will not see the welcome window. There are two other ways to sign in. They do the same thing.

1. Click the blue Sign In button at the top right of the VS Code window.

1. Or click the Accounts icon at the bottom left, then Sign in to use GitHub Copilot...

1. Either way you get this small window. Click Continue with GitHub.

Approve it in your browser

VS Code opens your web browser to finish signing in.

1. If GitHub asks you to sign in, sign in. It may ask for your 2FA code.
2. Check that it shows your username, then click Continue.
3. If GitHub shows a list of permissions, click Authorize Visual-Studio-Code.
4. Your browser asks to open Visual Studio Code. Click Open.

Pick a theme and get started

On a new install, the welcome window now asks what it should look like. If you have used VS Code before, you will not see this. Skip to the next step.

1. Pick any colour theme. You can change it later.
2. Click Get Started.

Find your way around

You will use six places in the VS Code window. Find each one now.

Two shortcuts worth learning today

Check you are signed in

1. Click the Accounts icon at the bottom left.
2. You should see your GitHub username with (GitHub) after it.
3. The blue Sign In button at the top right should be gone.

signin-accounts-signed-in.png. The Accounts menu after signing in, showing "username (GitHub)" at the top. Needs a signed-in VS Code.

Check if you already have Git

1. In VS Code, open the Terminal. Use the menu Terminal, then New Terminal.
2. Type this and press Enter.

git --version

If it answers with a version number, such as git version 2.50.1, you have Git. Skip the next step.

Install Git

xcode-select --install

1. Go to git-scm.com/install/windows and click Click here to download.
2. Run the installer. It asks many questions. Keep every default and click Next each time.
3. One exception. When it asks for the default editor, choose Use Visual Studio Code as Git's default editor.
4. When it finishes, close VS Code completely and open it again.
5. Open a new Terminal and run git --version. You should now see a version number.

Check Git knows who you are

Git writes your name and email on every version you save, and refuses to save anything without them. GitHub Desktop set them for you in part 3. Check that it worked.

1. Run this in the Terminal.

git config --global --list

1. Look for two lines that start with user.name= and user.email=. If both are there, you are done.

git config --global user.name "Your Name"

git config --global user.email "you@ocadu.ca"

Install p5.js 2.x Project Generator

1. Click the Extensions icon in the Activity Bar. It looks like four squares.
2. In the search box, type p5.js 2.x Project Generator.
3. Find the one by IrtizaNasar. Click its blue Install button.
4. If VS Code asks whether you trust the publisher, click Trust Publisher & Install.

Install Live Server

1. In the Extensions search box, type Live Server.
2. Find the one by Ritwick Dey. It has tens of millions of installs.
3. If it shows a gear icon instead of Install, you already have it.
4. If not, click Install.

Check your list

1. In the Extensions search box, type @installed.
2. You should see both. Extensions you had before will be listed too.

code --install-extension Irti.p5js-project-generator --install-extension ritwickdey.LiveServer

Make your own copy of the template

1. Make sure you are signed in to github.com in your browser.
2. Open the template: github.com/DigitalFuturesOCADU/atelier1-f26-simpleStart-p5.
3. Click the green Use this template button, then Create a new repository.
4. Under Owner, choose your own account.
5. Type a Repository name. Keep it short, lowercase, with hyphens instead of spaces. For example my-phone-sketch.
6. Leave it set to Public. Leave Include all branches off, and ignore the Copilot box at the bottom.
7. Click Create repository.

Switch on GitHub Pages

GitHub Pages is the free web hosting that comes with GitHub. The template already contains the instructions for publishing. You only need to flip the switch. You do this once for each new repo.

1. In your new repo, click Settings in the row of tabs at the top.
2. Click Pages in the list on the left.
3. Under Build and deployment, open the Source menu and choose GitHub Actions.
4. That is all. Do not click either Configure button that appears below.

Clone it to your laptop

There are two ways to do this. They give exactly the same result, a folder on your laptop that stays connected to GitHub. Use whichever you know. If you learned Git with GitHub Desktop, use option B.

Option A: clone in VS Code

1. In VS Code, click the Source Control icon in the Activity Bar.
2. Click Clone Repository.

1. At the top of the window, click Clone from GitHub.

1. If VS Code says The extension 'GitHub' wants to sign in using GitHub, click Allow and approve it in your browser, as you did before.
2. A list of your repos appears. Choose the one you just made. It looks like your-username/my-phone-sketch.
3. Choose where to keep it. Select your Documents/GitHub folder. Make it first if it does not exist. Click Select as Repository Destination.
4. When VS Code asks Would you like to open the cloned repository?, click Open.

clone-pick-repo.png. The list of your GitHub repos that appears after choosing Clone from GitHub. Needs a signed-in VS Code.

Option B: clone with GitHub Desktop

1. On your repo's page on github.com, click the green Code button, then Open with GitHub Desktop. Your browser asks to open GitHub Desktop. Allow it.

1. GitHub Desktop opens a Clone a Repository window. Check the Local Path. It should end in Documents/GitHub/ followed by your repo's name. Use Choose... if it does not.
2. Click Clone.

1. Now open that folder in VS Code. In GitHub Desktop, use the Repository menu, then Open in Visual Studio Code. Or in VS Code, use File, then Open Folder, and choose the folder inside Documents/GitHub.

From here on the guide uses VS Code to commit and sync. GitHub Desktop can do both as well, and you can mix them. They are two windows onto the same folder.

Trust the folder

VS Code is careful with folders it has not seen before. Until you say you trust a folder, it opens in Restricted Mode, where Git and your extensions are switched off. This is your own project, so trust it.

1. If VS Code asks Do you trust the authors of the files in this folder?, click Yes, I trust the authors. You are done.
2. If you see a bar across the top that says Restricted Mode instead, click Manage in that bar.

1. Click Trust.

You can tell it worked when the bar is gone and the bottom left corner shows a branch name, usually main.

Accept the recommended extensions

If you skipped part 6, VS Code shows a message at the bottom right: Do you want to install the recommended extensions from Ritwick Dey and IrtizaNasar for this repository?

1. Click Install. VS Code installs both.
2. The message hides itself after a few seconds. To get it back, click the bell at the right end of the bottom bar.
3. If there is no message at all, you already have both extensions.

Look at what you have

1. Click the Explorer icon at the top of the Activity Bar.
2. Click sketch.js to open it. Then click index.html.

Start Live Server

1. In the Explorer, right-click index.html.
2. Choose Open with Live Server.
3. Your browser opens at an address like 127.0.0.1:5500.
4. You should see a grey square on a dark page. That is the blank canvas, the same as a new sketch in the web editor.

You can also click Go Live at the right end of the bar along the bottom of the window. While it is running, that button shows Port: 5500. Click it again to stop.

Open the browser console

In the web editor, errors and print() messages appeared below your code. Now they appear in the browser's console.

Or use the menu. Click the three dots at the top right of Chrome, then More Tools, then Developer Tools, and choose the Console tab.

Change something and save

1. In sketch.js, find the line background(220);
2. Change it to a colour. For example background(237, 34, 93);
3. Save with Cmd + S on a Mac or Ctrl + S on Windows.
4. Look at the browser. The page reloads and the square changes colour.

Commit your change

1. Click the Source Control icon. It shows a number, which is how many files have changed.
2. Under Changes you see sketch.js. Click it if you want to see exactly what changed.
3. Type a short message in the box that describes the change. For example Change the background colour.
4. Click Commit.

The first time, VS Code asks about staging. Click Always. It will then include all your changes every time without asking.

Sync with GitHub

The commit is saved on your laptop only. The button now reads Sync Changes with a small number and an up arrow. That is how many commits are waiting to go up.

1. Click Sync Changes.
2. The first time, VS Code explains that this will pull and push. Click OK. To skip this message in future, click OK, Don't Show Again instead.

Watch it publish

1. Open your repo on github.com and click the Actions tab.
2. The top row is the run your push just started. A yellow dot means it is working.
3. Wait for a green tick. It usually takes under a minute.

actions-run-green.png. The repo's Actions tab with the first failed run (red X) below a successful run (green tick).

Find your web address

Every repo published with Pages gets an address in this pattern.

https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/

1. To see yours, go to Settings, then Pages in your repo. The address is at the top with a Visit site button.
2. Open it on your laptop first to check it works.

Open it on your phone

Typing a long address on a phone is slow. Chrome can make a QR code for any page.

1. With your page open in Chrome on your laptop, click the three dots at the top right.
2. Choose Cast, save, and share, then Create QR Code.
3. Point your phone's camera at the code and tap the link.
4. You should see the same sketch you saw on your laptop, with your change in it.
5. Add the page to your phone's home screen or bookmarks. The address never changes, so you only do this once per project.

The loop from now on

This is the whole cycle. You will do it many times a day.

1. Change your code and save. Check it in the browser on your laptop.
2. When something works, commit with a message.
3. Sync to push it to GitHub.
4. Wait about a minute and refresh the page on your phone.

The real test: laptop to phone

If this works, workflow 1 is right, whatever else is going on. It uses every piece once.

1. Open your project in VS Code. Change a colour or a size in sketch.js and save.
2. In Source Control, type a message and click Commit, then Sync Changes.
3. Wait a minute. Open your github.io address on your phone and refresh.
4. Your change is there.

Check by looking

No commands. Look in each place and compare.

In VS Code

In GitHub Desktop

On github.com

On your phone

Ask the agent to check

Copilot can run the checks for you and explain the results. Open your project in VS Code. Set the Chat to Agent and paste this. It asks permission before each command. None of them change anything.

Check my setup for this course. Run these commands in the terminal one at a time: git --version, git config --global user.name, git config --global user.email, git remote -v, git status -sb, code --version, code --list-extensions, gh auth status. Do not change or install anything. Then give me a short checklist in plain language of what passed and what is missing. I need Git installed, a git name and email set, VS Code 1.125 or newer, a GitHub remote on this folder, and these two extensions: Irti.p5js-project-generator and ritwickdey.LiveServer. The extension ltmoerdani.opencode-copilot-chat and the gh command are optional, so report them but do not count them as failures.

Run the check script

One command that inspects your computer and prints a report. It only reads. It never installs or changes anything. It needs Node.js, which you will also need later in the course.

1. Open your project in VS Code and open the Terminal.
2. See if you have Node.js. Run node --version. A version number means yes.
3. If not, install the LTS version from nodejs.org, then close VS Code and open it again.
4. Run the check.

npx ocadu-vscode-setup@2

npx.cmd ocadu-vscode-setup@2

The first time, it asks Ok to proceed? Press Enter. The report looks like this.

Git
  ✓ git version 2.50.1
  ✓ Name: Sam Student
  ✗ Git does not know your email  MUST
      Run: git config --global user.email "you@ocadu.ca"

Extensions
  ✓ Live Server
  ! p5.js 2.x Project Generator is not installed  SHOULD

This folder
  ✓ Connected to GitHub: sam-student/my-phone-sketch
  ✓ Publish workflow: static.yml
  · Your page: https://sam-student.github.io/my-phone-sketch/

If you have the GitHub CLI signed in, the script also asks GitHub whether Pages is switched on for your repo.

How it works: all you need is a key

Three pieces connect. The Chat is already in VS Code. An extension teaches the Chat how to talk to OpenCode. An API key proves the requests are yours.

An API key is a long code that starts with sk-. For Go models it is the only thing a tool needs. There is no sign-in inside VS Code. You paste the key once and the models appear.

• Anyone who has your key can use your account. Their requests count against your subscription. Treat a key like a password. Never put it in your code, a commit, a screenshot or a chat message.
• Make one key for each place you use it. One called vscode, another for OpenCode later. If one leaks, you delete that one and nothing else breaks.
• You can share on purpose. If you and a collaborator want to share one subscription, make a separate key, name it after them, and give it to them privately. Their use comes out of the same limits as yours. Delete the key when the project ends.
• A lost key cannot be shown again. Delete it and make a new one. It takes ten seconds.

Install the OpenCode for Copilot Chat extension

1. Click the Extensions icon in the Activity Bar.
2. In the search box, type OpenCode for Copilot Chat.
3. Find the one by Laksmana Tri Moerdani. Click Install.

Sign in to OpenCode with GitHub

1. Go to opencode.ai/auth.
2. Click Continue with GitHub.
3. GitHub asks you to authorize OpenCode. Check the username and approve.
4. The OpenCode Console opens. It has a row of tabs along the top. You will use Go and Keys.

Subscribe to Go

1. In the OpenCode Console, click the Go tab.
2. Subscribe. It is 10 US dollars a month, paid by card.
3. When you are subscribed, the Go tab shows three usage bars. Go has limits that reset every five hours, every week and every month. This is where you see how much you have used.

opencode.ai/go lists the models and limits that come with the subscription.

opencode-go-subscribe.png. The Go tab for an account that has not subscribed yet, showing the subscribe button. Needs an account without Go.

Make an API key

1. Click the Keys tab.
2. Under Service Accounts there is one entry with your email address. Click it.

1. Click Add API Key.
2. Name it after where you will use it. Type vscode.
3. Copy the key when it is shown. Keep the page open until you have pasted it into VS Code in the next step.

opencode-key-created.png. The window that appears after Add API Key, with the name field filled in as "vscode". Capture it before the key is shown, or with the key painted out.

Add OpenCode Go in VS Code

1. Open the Command Palette. Type Chat: Manage Language Models and press Enter. You can also get here from the model menu under the chat box, with Manage Models...
2. Click Add Models.

1. Choose OpenCode Go from the list. It is there because of the extension you installed in step 2. Do not choose OpenCode Zen.

1. VS Code asks for a name for this group of models. Press Enter to accept OpenCode Go.

1. Paste your key and press Enter. It shows as dots.

1. Tick the models you want to see in the Chat, then confirm.

models-go-select.png. The list of OpenCode Go models with tick boxes.

Find the models in the Chat

1. Open the Chat. It is the panel on the right side of VS Code. If it is closed, press Ctrl + Cmd + I on a Mac or Ctrl + Alt + I on Windows.
2. Click the model menu under the chat box.
3. The models you ticked are listed under OpenCode Go.
4. If one is missing, go back to Manage Models... and click the eye icon beside it to show it.

models-picker-go.png. The model menu open in the Chat with the OpenCode Go models listed.

Send a test message

Seeing a model in the list only proves that your key was accepted. Check that it answers.

1. Choose one of the OpenCode Go models.
2. Set the mode to Ask, type Say hello in five words and press Enter.

models-go-test.png. The Chat showing a reply from an OpenCode Go model.

Why should I pay for models if I can use free ones?

You have free options. Copilot gives you a monthly allowance, and OpenCode has free models inside its own app. Free models can handle many tasks, and it is possible to complete the work in this course that way. There are trade-offs.

• A much smaller selection. Free lists are short and change without notice. The most capable free model on OpenCode right now is Muse Spark 1.3. Copilot's free and student plans pick the model for you.
• Slower and less reliable. Free models are shared by everyone. Expect slow replies at busy times, daily limits, and sometimes no access at all.
• Limited in where they run. OpenCode's free models only answer inside the OpenCode app.
• Your prompts may be used for training. Several free models say so in their terms. Do not send them anything private.
• You can combine them. A workflow does not need one model for everything. Use a free or cheap model for small edits and explanations, and save a stronger one for planning and for the problems the cheap one could not solve.

Open the Chat

The Chat panel sits on the right side of the window. If you closed it, open it again.

copilot-chat-signed-in.png. The Chat panel when signed in, showing the input box with the agent picker and the model picker.

Know the three modes

The first menu under the chat box sets how much the chat is allowed to do.

copilot-modes.png. The agent picker open, showing Agent, Ask and Plan. Needs a signed-in VS Code.

Try Ask

1. Open sketch.js so the chat can see it.
2. Set the mode to Ask.
3. Type a question and press Enter. For example:

Explain what setup and draw do in this sketch, and how often each one runs. Use plain language.

Try Agent, and read what it changed

1. Set the mode to Agent.
2. Ask for one small change. For example:

In sketch.js, draw a circle that follows the mouse. Change as little as possible.

1. The changed lines are marked in the editor. Green lines were added. Red lines were removed. Read them.
2. Check the result in your browser.
3. Click Keep if it is what you wanted, or Undo if it is not.

copilot-keep-undo.png. An agent edit in sketch.js showing green and red lines with the Keep and Undo buttons.

Know the limits of the free plan

• Copilot Free gives you 2,000 code suggestions a month and a small monthly allowance of AI Credits for Chat and Agent.
• Agent mode uses credits much faster than Ask, because it reads files and works in many steps.
• The free and student plans choose the model for you. The model menu shows Auto.
• When the credits run out, the Chat stops until next month. Code suggestions as you type keep working.
• Part 11 adds other models with your own key. Part 13 gets you the student plan and explains exactly what it includes.

What the student plan gives you

This changed during 2026. Students used to get Copilot Pro. There is now a separate student plan. This is what it includes, as of September 2026.

• Credits are spent by use, not by message. A short question in Ask costs very little. A long Agent session that reads many files and runs many steps costs a lot. Some students report using a month of credits in a few days of Agent work.
• When the credits run out, Chat and Agent stop until the monthly reset. Code suggestions as you type keep working.
• Models you add with your own key in part 11 do not use these credits. They are billed by whoever you got the key from.

Read it from GitHub, since this keeps changing:

• Plans for GitHub Copilot. The official comparison table.
• Updates to GitHub Copilot for students. GitHub's running post on the student plan, including the move to 200 credits and Auto only.
• Setting up Copilot as a student. The official steps.

Get your account ready

Most failed applications come from one of these. Check them all before you apply.

1. School email. Your OCAD U address is added and verified in Settings, Emails.
2. Two-factor authentication is on. You did this in part 2.
3. Billing name. Go to Settings, Billing, Payment information. Edit Billing information and enter your name exactly as it appears on your student ID. If you have a single legal name, enter it as both first and last name. You do not need to add a payment method.
4. Location. Turn off any VPN. Allow your browser to use your location when GitHub asks.

Apply

1. Go to github.com/settings/education/benefits.
2. Click Start an application.
3. Choose Student. Select OCAD University and your OCAD U email.
4. For proof, take a new photo of your student ID with your camera when the form asks. A live photo is approved more often than an uploaded file. Your name, the school name and a date must be readable.
5. Click Submit application.

Switch on Copilot Student once you are approved

GitHub emails you when you are approved. Being approved and getting Copilot Student are two separate things. The benefits can take a few more days to apply, and you then switch Copilot on yourself.

1. Go back to github.com/settings/education/benefits.
2. Under Free GitHub developer resources for students and teachers, click Learn more.
3. Follow the prompts to activate Copilot Student.
4. If you cannot find it, try github.com/github-copilot/free_signup.
5. Check Settings, Copilot. It should name your plan as Copilot Student.
6. Restart VS Code so it picks up the new plan.

Install it

brew install gh

winget install --id GitHub.cli --source winget

Sign in

1. Run the command below. It asks a few questions. Use the arrow keys and Enter to answer.

gh auth login

1. It shows a short code. Copy it and press Enter. Your browser opens.
2. Paste the code, check the username, and click Authorize github.
3. Check it worked with the command below.

gh auth status

Start a new project in one go

These three commands do everything in part 7. They copy the template, clone it, and switch on Pages. Change my-next-sketch to your project's name. Run them one at a time from your Documents/GitHub folder, so the new project lands beside your others.

gh repo create my-next-sketch --template DigitalFuturesOCADU/atelier1-f26-simpleStart-p5 --public --clone

cd my-next-sketch

gh api -X POST "repos/{owner}/{repo}/pages" -f build_type=workflow

Then open the folder in VS Code with code . and carry on from part 8.

Forward Live Server's port

1. Start Live Server and note the port number at the bottom right. It is usually 5500.
2. Open the bottom panel with View, then Terminal. Click the Ports tab.
3. Click Forward a Port, type 5500 and press Enter.
4. If VS Code asks to sign in with GitHub, click Allow.

Make it public

A forwarded port starts out private, which means only you, signed in to GitHub, can open it. A phone is simpler with a public address.

1. Right-click the row for port 5500.
2. Choose Port Visibility, then Public.
3. VS Code warns you that anyone with the address can open it. Click Continue.

Open it on your phone

1. In the Ports tab, hover over the forwarded address and click the globe icon to open it in Chrome.
2. Make a QR code for it, as in part 9, and scan it with your phone.
3. The first visit shows a Microsoft page that asks you to confirm. Tap Continue.

Source Control says Git is not installed

The panel shows a Download Git button instead of your files. Do part 5. Then close VS Code completely and open it again. VS Code only looks for Git when it starts.

"Make sure you configure your user.name and user.email in git"

Git does not know who you are yet. Open GitHub Desktop, go to its settings, choose Git, and fill in your name and email. Or use the two commands in Check Git knows who you are. Then click Commit again.

My github.io address shows a 404 page

• Check the address. It needs your exact username and your exact repo name. Capital letters matter in the repo name.
• Check Settings, then Pages. The source must be GitHub Actions.
• Check the Actions tab. The newest run needs a green tick. If it has a red X, open it and click Re-run all jobs.
• Check the repo is Public. It says so beside the repo's name.
• A brand new site can take a few minutes to appear the first time.

Sync fails, or the push is rejected

This happens when GitHub has a change your laptop does not, for example if you edited a file on github.com. Click Sync Changes again. Sync pulls before it pushes, which usually fixes it. If VS Code reports a merge conflict, stop there and ask for help. Your work is safe.

VS Code is signed in as the wrong person

Click Accounts, then the username, then Sign Out. Before you sign in again, open github.com in your browser and check which account is signed in there. VS Code connects to whichever account the browser is using.

The browser never returns to VS Code after I approve

Your browser blocked the link that opens VS Code. Look for a small prompt near the address bar asking to open Visual Studio Code, and allow it. If there is none, go back to VS Code, cancel the sign-in, and start again. Chrome is the most reliable browser for this step.

There is no Go Live button

• Live Server is not installed. See Install Live Server.
• Or no folder is open. Go Live only appears when a project folder is open, not a single file.
• Or the window is in Restricted Mode. Look for a bar across the top. See Trust the folder.

Live Server shows a different project, or will not start

Another VS Code window is already using port 5500. Find that window, click Port: 5500 in its bottom bar to stop it, then click Go Live in the window you want.

My sketch uses motion, but tilting the phone does nothing

• Tap the screen once. Phones only give a page motion data after a tap and your permission.
• The address must start with https. Your github.io address does.
• On an iPhone, if you tapped Deny earlier, close the tab completely and open the page again to be asked once more.

Windows says "running scripts is disabled on this system"

You typed a command such as npx or npm in the VS Code Terminal on Windows. That Terminal is PowerShell. By default, PowerShell refuses to run the small script files that Node.js uses for these commands.

Quick fix for one command. Add .cmd to the command name. For example npx.cmd ocadu-vscode-setup@2 or npm.cmd install.

Fix it for good. Run this once in the Terminal. It lets PowerShell run scripts you created on your own computer, and scripts from the internet only if they are signed. It only changes the setting for your Windows account.

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

If it asks you to confirm, type Y and press Enter. Then close the Terminal, open a new one, and run your command again.

Or use Command Prompt instead of PowerShell. In the Terminal panel, click the small arrow next to the + and choose Command Prompt. Plain npx works there.

The Terminal says "code" is not found

Inside VS Code's own Terminal, code always works. In a separate Terminal app it needs one more step.