Home / Guides / Getting Started

Getting Started

On this page
  1. 1. Read the syllabus
  2. 2. Install the tools
  3. 3. Set up GitHub Desktop before you make anything
  4. 4. Create your personal site repository
  5. 5. Ship one word before you build anything
  6. 6. Make it yours
  7. 7. Create your course repository
  8. 8. Submit both URLs on Canvas
  9. When it does not work
  10. Come to class and submit your work
  11. How to succeed

New to the course, or behind on the first week? Work through the steps below in order. Each step needs only the step above it, so stop wherever you get stuck and bring the error to the next session or to office hours.

You end up with two public repositories, <your-github-username>.github.io and oim3690, each one live at its own URL and cloned to a folder on your own computer.

1. Read the syllabus#

Start with the syllabus. It covers how grading works, the late policy, and how generative AI fits into this course. Reading it takes 10 minutes and saves a lot of confusion later.

2. Install the tools#

Create a GitHub account with your Babson email, then install Git, VS Code, GitHub Desktop, and Chrome for its developer tools. Each is an ordinary installer. In the VS Code installer on Windows, check Add to PATH; on macOS, drag VS Code to Applications.

For Git:

  • macOS: open Terminal and type git --version. If Git is not installed, macOS offers to install it.
  • Windows: run the installer from git-scm.com with the default settings.

Once Git is installed, git --version in a terminal prints a version number.

Then set up VS Code:

Extensions. Click the Extensions icon in the left sidebar (four squares), then search for and install these:

Extension What it does
Live Server Preview your HTML files in a browser that auto-refreshes when you save
Prettier - Code formatter Auto-formats your HTML/CSS/JS on save

Copilot is built into VS Code, so there is nothing to install for it. Two more are optional: Error Lens puts the error message on the line that has the error, and Better Comments turns a comment starting with // ? blue, which is a good way to mark a line of AI-generated code you do not understand yet.

Settings. Open Settings with Ctrl+, (Windows) or Cmd+, (macOS), then search for and change these:

Setting Value Why
Editor: Tab Size 2 Standard for HTML/CSS/JS
Editor: Format On Save checked Prettier formats your code every time you save
Files: Auto Save afterDelay Saves your files automatically
Editor: Linked Editing checked Renames a closing HTML tag when you rename the opening one

GitHub Copilot. Hover over the Copilot icon in the status bar at the bottom of the window, choose Use AI Features, and sign in with the same GitHub account. If the status bar does not offer it, run GitHub Copilot: Sign in from the Command Palette, Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS). Copilot Free works right away. For chat and agent mode, set up Your Babson AI Key, which also covers the GitHub Student Developer Pack.

3. Set up GitHub Desktop before you make anything#

Do this first. A commit made while Git does not know who you are belongs to nobody, and fixing it afterwards is harder than doing it now.

Open GitHub Desktop, then File → Options on Windows or GitHub Desktop → Settings on macOS.

  1. Under Accounts, sign in with the GitHub account you registered for this course
  2. Under Integrations, set the external editor to Visual Studio Code
  3. Leave the shell on its default

Use the default folder, Documents/GitHub. A cloud-synced folder such as OneDrive, iCloud Drive or Dropbox writes to the same files Git is writing and can leave a repository in a state neither tool can fix. The Open in Visual Studio Code button takes you back to the folder every time, so the path is never something you have to remember.

4. Create your personal site repository#

Do this part on the web, at github.com/new.

Field What to put
Repository name Exactly <your-github-username>.github.io, all lowercase
Visibility Public
Add a README file Checked

Click Create repository.

The name has to match your username exactly. GitHub only serves a site at https://<your-github-username>.github.io when the repository is named that. One capital letter, one extra character, or a typo in your own username, and the URL returns 404 with nothing to tell you why. If you are not sure how your username is spelled, copy it from the top right of github.com.

Then bring it to your computer. In GitHub Desktop choose File → Clone repository → GitHub.com, pick the repository from the list, and accept the folder it suggests.

Already made this repository at some point? Use the one you have. Clone it and carry on.

5. Ship one word before you build anything#

Prove the pipeline works while there is nothing in it to debug.

  1. In GitHub Desktop, with your site repository selected, click Open in Visual Studio Code
  2. Make a new file at the top of that folder called index.html
  3. Type one word into it: hi
  4. Save it with Ctrl+S (Windows) or Cmd+S (macOS)
  5. Back in GitHub Desktop, type add index.html in the Summary box, click Commit to main, then Push origin
  6. On github.com, open the repository, go to Settings, then Pages in the left sidebar. Under Source choose Deploy from a branch, set the branch to main and the folder to / (root), and save
  7. Wait about a minute, then open https://<your-github-username>.github.io

You are done when the page says hi. From here on, deployment is something you have already seen work, so when a change does not appear you know the problem is in the change.

When step 5 does not work#

  • The page 404s and it has been under five minutes. Wait. The first build is the slow one.
  • The page still 404s after five minutes. The repository name is the usual cause. Compare it character by character against your username. The file name is the second cause: it has to be index.html, lowercase, with nothing before or after it.
  • Nothing appeared in GitHub Desktop to commit. The file was never saved. A dot instead of an X next to the filename in the VS Code tab means the file has unsaved changes, and Git cannot see anything you have not saved.
  • A later change does not appear. Open the Actions tab of your repository on github.com. Every push runs a job that rebuilds the site, which is why the page takes about a minute to change. A green check means the new version is live; a red X means the deploy failed and the old page is still up.

6. Make it yours#

  1. In VS Code, press Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS) and run Chat: Open Chat
  2. Describe the site: what it is for, and who it is for. Ask for everything in index.html alone
  3. Read what comes back before you accept it. You do not have to understand every line on the first day. You do have to look at it
  4. Commit, push, and reload your URL

🤖 AI tip: "a personal page for a Babson junior who plays hockey and wants to work in sports analytics" gets you something of your own. "make me a website" gets you the average page, which is the one everybody else got too.

Keep it to that one file for now. One file is a whole website, and it is enough to be live.

7. Create your course repository#

The second repository holds your in-class work and your weekly notes. Same steps as before, at github.com/new.

Field What to put
Repository name oim3690, all lowercase
Visibility Public
Add a README file Checked

Clone it in GitHub Desktop the same way, then open it in VS Code and build this much:

oim3690/
├── README.md      your name, and links to every project you build
├── index.html     this repository's own page
└── logs/
    └── wk01.md    one note per teaching week

Turn on GitHub Pages for this one too, exactly as in step 5. It ends up at https://<your-github-username>.github.io/oim3690/.

Git does not track an empty folder. Make logs/ at the moment you make the first file inside it, or it will vanish on the push and you will wonder where it went.

Names are checked exactly. The weekly note is logs/wk01.md. A folder called Logs, a file called wk1.md, and a file called Week 1 are three different things to a computer, and none of them is the one being looked for. Lowercase, no spaces, hyphens between words, and no capital letters anywhere.

8. Submit both URLs on Canvas#

Each repository has its own Canvas item. Submit the repository page, https://github.com/<your-github-username>/oim3690, and not the address bar of Live Server. Anything starting 127.0.0.1 or localhost is your own machine talking to itself, and nobody else on earth can open it. Copy it from the address bar while the repository is open on github.com. The address under the green Code button ends in .git and is for cloning.

When it does not work#

Bring the error itself. Select the text, copy it, and paste it into an email or into class. A screenshot works too. What almost never works is "it says an error", because the message is the part that says which of about 20 things happened.

These account for most of it, in the order they happen:

  1. The file was never saved. Git reads files on disk, never the editor. Look for the dot in the VS Code tab.
  2. A folder got made where a file should be. index.html with something inside it is a folder that happens to be called index.html. GitHub serves a file by that name, and there is no file. In VS Code the icon is different, and on GitHub a folder has an arrow next to it.
  3. The file is in the wrong folder. The root folder is the repository's outermost folder, the one that holds README.md. Do not make a folder called root. One folder too deep is wrong as well: a link to css/styles.css does not find css/css/styles.css.
  4. The name is close but not exact. Use the task's name letter for letter. An agent asked for a stylesheet may name it style.css or main.css, so check, and rename it. Full rules: File and Repo Naming Rules.
  5. A placeholder is still in the file. Replace all of <your-github-username>, angle brackets included. Replace template text too: a file that still says TODO or [ADD COMMIT LINK HERE] counts as not written.
  6. The commit never reached GitHub. Push it, then open the file itself on github.com and read it. The commit message at the top of the repository shows only that a commit arrived.
  7. The work is in a different repository from the one being read. Two repositories with similar names is a normal mistake and an invisible one. Open the repository on github.com and check that the files you expect are actually in the one you submitted.

Check yourself#

1. A task asks for logs/wk05.md in your oim3690 repository. Your agent made oim3690/root/Logs/week5.md. Find each difference.

Answer

The root folder should not exist, because the root folder is oim3690 itself. Logs has a capital L. The file is week5.md where the task says wk05.md.

2. A line of code says "X-Token": "<your-github-username>". You type your username between the angle brackets and run it. What does the server receive?

Answer

Your username with < in front of it and > after it. No GitHub username has angle brackets, so the server rejects the token.

3. On github.com, your latest commit message is at the top of the repository, and the checklist still says about-me.html is missing. Where do you look first?

Answer

Click the commit and read which files it changed. If about-me.html is not in the list, the file was never saved or was left out of the commit. Save it, commit, push, and then open about-me.html itself on github.com.

Where to go next: Git Basics for commit, push and pull, and GitHub Pages for deployment and the usual 404.

Come to class and submit your work#

Class meets in person, Tuesdays and Thursdays. Most of the building happens in the room, with me circulating. Submit projects and check your grades on Canvas. The schedule shows what is happening each week, and the syllabus has the room and the meeting time.

How to succeed#

  • Build something every week. You learn web development by making pages.
  • Use AI, then check it. Read what it writes, find the parts you do not understand, ask it to explain, and verify the code actually runs.
  • Ask early. Post in the Class Board, or catch me in the room during a session. A stuck hour is a question worth asking.
  • Ship in public. Your projects go live on the web and into the class gallery.

Last updated: Sunday, 11/01/2026