Setup for CSCI 461

The purpose of this page is to summarize how to develop and submit your work in CSCI 461. The topics covered are:

Please note that "assignment" here refers to either a lab or in-class exercise. On this page, we will step through working on and submitting an assignment called example. Please keep an eye out for the red boxes in the images since they highlight a button you need to click, or will draw your attention to something in an image.

Accepting an assignment.

The first thing you will (always) need to do is accept the assignment on GitHub. The links to these will generally be posted on our Ed discussion board. For example, to follow along with the steps on this page, click on the following link:

https://classroom.github.com/a/btP6QDiX

Once you click on a link, you will see the following:

Click on Accept.

It might take a moment to create your repository. Once GitHub is done setting it up, you should see a link to your own personal repository for the assignment. This repository is hosted in our GitHub Team called csci461s25. All the repositories you have permission to access can be viewed by clicking on the GitHub tab in the header of our course website.

Click on the link to see your repository.

Opening an assignment repository using GitHub Codespaces.

You should now see your repository:

There are various ways you can work on the code. Here, we'll use a GitHub Codespace, but all of this is possible on your own personal computer (see the section about this at the bottom of this page). There are a few ways to open the Codespace. Often, the README will have a button to open one directly (in the bottom-left part of the image above). If this button doesn't initially appear then try reloading the page. Otherwise, there's a chance I forgot to enable that feature for the assignment (sorry). In this case, you'll need to click Code (in the top-right part of the image above). Then click Codespaces:

Then click Create codespace on main:

Your codespace should now open in a new tab, which will look like VS Code.

Working on your code.

Here is an example of what your codespace might look like (with a file called index.html opened):

After the codespace finishes setting up (it might take a minute or two), some extensions will be installed so you can preview your work. Click on the Go Live button (in the bottom-right part of the image above). And now another tab should open up with the previewed index.html:

We're just drawing a red square right now. We'll make it blue instead. Back in the index.html file in your Codespace, find the line that says context.fillStyle = "red" and change the color to "blue". Save the file and go back to your preview tab. There's a good chance the change will automatically take effect (after saving the file). If not, just reload the preview page.

Submitting your code.

Back in your Codespace, click on the button in the left sidebar that looks like a tiny tree with three nodes. Because we changed the index.html file, there should be a badge (here, with a "1"):

We now need to add, commit and push these changes to GitHub. Please commit these steps to memory: add, commit, push. These are the general steps you'll take (in this class and beyond) for tracking your code changes with git.

First, add your changes by clicking on the + button on the file you want to include (this is also called "staging"):

Now, commit your changes by adding a commit message and clicking the Commit button:

The changes are saved locally in your Codespace (a virtual machine somewhere in the cloud). But we want to save them on GitHub (the "remote" repository). Click on Sync Changes:

Click OK:

Now, if you go back to your repository on GitHub, you should notice your commit message next to the index.html file:

If this is an in-class exercise, you're all done. For labs, you'll also need to submit your code to Gradescope.

Navigate to our Gradescope course and find the assignment you want to submit. After clicking on the assignment, you'll be asked to find a GitHub repository (and branch) to submit:

Select the branch you want to submit. This will almost always be main:

Done! If you go back and change your code in your Codespace (e.g. after receiving feedback), you'll have to stage (add), commit and push (sync) again and then resubmit your assignment on Gradescope.

Working locally instead of working in a Codespace.

It's entirely possible to work on your local computer instead of a Codespace. If you prefer to do so (or need to if you won't have internet access), then I would suggest using VS Code (download). You'll also need to make sure that git is installed on your computer (download).

The main difference with the workflow above is that you'll need to "clone" your repository to your computer so you can work on the assignment. VS Code can be used to do this, and you'll need to sign into GitHub within VS Code. All of the steps once you've cloned the repository (i.e. working on and submitting the assignment) will be the same as described above.

The only thing to keep in mind when working locally is that you should install the Live Server extension in VS Code (install). This is necessary to have the Go Live button which you can use to preview the HTML pages with your renderings. Generally, this will be available in a Codespace because I have added it in the .devcontainer.json file in your repository so GitHub knows to install it.

Please feel free to stop by during office hours if you want help getting set up with VS Code locally.

© Philip Caplan, 2025