Setup

Bring a laptop and charger. Try these steps before the meeting so we can spend the hour writing code. If you get stuck, come anyway and we can help you set things up.

Before Week 1

We need an editor to write code and a browser to see what it does. We'll use VS Code as the editor.

1. Download Visual Studio Code for your computer and install it. Open it once to make sure it works.
2. Create a folder called practice-page, somewhere you can find it again. Documents is fine.
3. In VS Code, open File > Open Folder and select practice-page.
4. Save avatar.svg in that folder. If the link opens the picture, use your browser's Save As option. Keep the filename avatar.svg.

This picture is the only file you need before Week 1. We will create the HTML and CSS files during the meeting. You can use your usual browser to open the page.

Before Week 3

This week, we will use Git from VS Code and its terminal. We will sign in with GitHub CLI, turn the practice-page folder into a repository, save its first version, and publish it from VS Code. Do not create a repository or upload the files on GitHub beforehand. We will do that together.

Install Git and GitHub CLI

VS Code has a Source Control view, but it uses Git installed on your computer. GitHub CLI, whose command is gh, will connect Git on your computer to your GitHub account.

1. Follow the Git installation instructions for your operating system. On Windows, keep the installer's default choices. On macOS, run git --version and accept the developer tools installation if macOS asks.
2. Follow the GitHub CLI installation instructions for your operating system.
3. Close and reopen VS Code after both installations.
4. Open the practice-page folder in VS Code. Choose Terminal > New Terminal.
5. Enter both commands, pressing Enter after each one:

git --version
gh --version

Each command should show a version number. If the terminal says it cannot find git or gh, restart your computer and try once more. Bring the error to the meeting if it still does not work.

Tell Git who you are

Git stores a name and email with each commit. In the VS Code terminal, replace the example values below with your own name and an email connected to your GitHub account:

git config --global user.name "Your Name"
git config --global user.email "yourname@stevens.edu"
git config --global init.defaultBranch main

Git will use this name and email for your commits on this computer. The last command makes new repositories start with a branch named main. To check what you saved, run:

git config --global --get user.name
git config --global --get user.email

Your commit email can be visible in a public repository. If you do not want to use a personal address, copy the no-reply address from your GitHub email settings and use it in the second command.

Sign in through GitHub CLI

1. Create a free GitHub account if you do not have one. Verify the email and sign in.
2. In the VS Code terminal, run these commands:

gh auth login --hostname github.com --git-protocol https --web
gh auth setup-git
gh auth status

The first command opens a browser so you can approve the sign-in. Return to the VS Code terminal when it finishes. The second command tells Git to use that sign-in when you clone, push, or pull. The last command should show your GitHub username and say that you are logged in to github.com.

3. In VS Code, open Extensions and install GitHub Pull Requests, published by GitHub. This extension may ask for its own account connection when we create a pull request. Git itself will still use the account shown by gh auth status.
4. Open your Week 2 page and try the button. The folder should contain index.html, styles.css, script.js, and avatar.svg. Use the Week 2 example if you need a copy.
5. Find a partner and exchange GitHub usernames. You will invite each other after the repositories are published during the meeting.

Desktop VS Code is required for this meeting because vscode.dev does not have a terminal or access to Git on your computer. If you cannot install VS Code, Git, or GitHub CLI, come anyway and work beside a partner. We will arrange time to help you finish your own setup.

The VS Code Git quickstart, GitHub CLI login guide, and Git credential setup guide cover these steps.