# Getting Started

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](/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](https://git-scm.com/downloads), [VS Code](https://code.visualstudio.com/), [GitHub Desktop](https://desktop.github.com/), and [Chrome](https://www.google.com/chrome/) for its developer tools. All four are ordinary installers.

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](https://git-scm.com/download/win) with the default settings.

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

Sign in to **GitHub Copilot** inside VS Code with the same account. Copilot Free works right away, and approval for the [GitHub Student Developer Pack](https://education.github.com/pack) upgrades it to Copilot Student. For chat and agent mode, set up [Your Babson AI Key](/guides/babson-ai-key/).

The [VS Code setup guide](/guides/setup-vscode/) has the extensions and settings. Come back here when VS Code opens and `git --version` prints a version number.

## 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](https://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](https://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.

## 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 name is close but not exact.** See step 7.
4. **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.

Where to go next: [Git Basics](/guides/git-basics/) for commit, push and pull, and [GitHub Pages](/guides/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 the instructor circulating. Submit projects and check your grades on Canvas. The [schedule](/schedule/) shows what is happening each week, and the [syllabus](/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](/board/), or catch the instructor 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](/gallery/).