Assignment 1

Due Tuesday, September 29 at 1:00 pm Pacific

In this assignment, you'll get your development environment ready so that you can start vibecoding! This assignment will require a good deal of setup, so budget time appropriately.

Step 1: List Tutorial Time Preferences

We will be running tutorial sessions starting in the second week of the quarter. We will be running a matchmaking system to automatically assign students to tutorial sessions; we aim to do so in a way that guarantees as many people as possible get their preferred times while minimizing the number of students who are assigned a time they cannot make.

Fill out the form below to tell us about your session time preferences.

Tutorial Session Time Preferences Form

Step 2: Install the CS193V Development Environment

We've created a development environment you can use to run Claude Code and OpenAI Codex, as well as to download assignment starter files and submit your homework. Your first step is to install the development environment on your computer. Visit the link below and follow the instructions to get everything set up:

Installing the CS193V Development Environment

If you encounter any issues during installation, visit our troubleshooting guide.

Step 3: Join the cs193v-students GitHub Organization

We've created a group (organization) on GitHub that we'll use to distribute and collect your homework assignments. You should have received (or will soon receive) an email at your @stanford.edu address with a link you can use to join. Before proceeding, make sure you've joined the group on GitHub. You'll need this in order for the upcoming steps to work correctly.

Step 4: Launch the Development Environment

Now that you've installed the CS193V environment, you'll need to launch it. You'll do this for all work in the course. It's the space where you'll run your coding agents.

There are instructions on how to launch the environment here:

Launching the CS193V Development Environment

If you've done everything correctly, your terminal should have a title bar at the top that says "CS193V Development Environment," you should see a button marked "+ NEW TAB", and you should see the following message and prompt:

  Welcome to the CS193V Development Environment!

student@cs193v-development:~/projects$

If everything looks like this, great! If not, something has gone wrong and you should troubleshoot the issue or contact the course staff for help.

Step 5: Run the setup-git utility

Your next step is to set up git and your GitHub access. This will allow you to download assignment starter files and submit your work back to us.

Inside the development environment, type setup-git into your terminal and hit enter:

student@cs193-development:~/projects$ setup-git

You'll be guided through a series of prompts to create a personal access token on GitHub and store it in your development environment. This token (which has no relationship to the "tokens" you hear about in the context of LLMs) is what will let you download and submit your work.

Step 6: Get the coding starter files

You will now need to get the starter files for the assignment. To do so, copy the following line of text into your terminal. Paste it, but don't hit enter to execute it yet:

git clone https://github.com/cs193v-students/a1-[sunet] a1

You will need to change the [sunet] bit to your SUNetID. For example, if I were starting this assignment, since my SUNetID is htiek, my command would be

git clone https://github.com/cs193v-students/a1-htiek a1

If Cynthia Bailey (SUNetID cbl) were starting this assignment, she'd run this command:

git clone https://github.com/cs193v-students/a1-cbl a1

After you've run that command, you should see something along the following lines:

student@cs193-development:~/projects$ git clone https://github.com/cs193v-students/a1-htiek a1
Cloning into 'a1'...
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 6 (delta 1), reused 6 (delta 1), pack-reused 0 (from 0)
Receiving objects: 100% (6/6), done.
Resolving deltas: 100% (1/1), done.
student@cs193-development:~/projects$

Once that's done, type this cd a1 into the terminal and hit enter:

student@cs193-development:~/projects$ cd a1
student@cs193-development:~/projects/a1$

This will take you into the folder a1 holding your assignment starter files.

Step 7: Set up Claude Code

At the command prompt, type claude and press enter. This will launch Claude Code. Since you haven't run it before inside the development environment, you will be given a series of prompts to follow and asked to perform some tasks. Here's the rundown on what to expect.

  1. Customize look: Claude will ask you to customize what color scheme you want to use. You can choose any color scheme you want from the default list of options. (I personally have my terminal set to black background / white text, so I prefer the dark mode theme, but you can choose whatever you'd like.)

  2. Choose a login method: Choose Claude account with subscription.

  3. Open the link in the blue box. A blue box should pop up with a link for you to click. The link should have the form https://localhost:[some number]/magic-link. Follow the instructions to click the link from the terminal.

  4. Log in with your @stanford.edu account. You'll next be asked to log in to Anthropic. Use your @stanford.edu email address as your login. This will get you the benefits for the Claude for Education tier you signed up for in the previous assignment.

  5. Return to the terminal. When login succeeds, your browser will show a screen that tells you you can close the window. Return to the terminal, and you'll see a message saying that the login succeeded and asking you to press enter to continue. Do that.

  6. Read the security notes. Claude Code is an autonomous coding agent backed by an LLM. Anthropic includes a disclaimer you should read before proceeding. We will talk more about prompt injection later this quarter. You're encouraged to read the provided link here now, though, just so you're well-educated.

  7. Check that you're in the right folder. Claude will show you the path to your current folder. It should read

    /home/student/projects/a1

    If it doesn't, choose the "No, exit" option from the menu because you're in the wrong place. You'll need to use cd to move to the correct directory, which is the one given above.

    If the folder is correct, you should choose the "Yes, I trust this folder" option to tell Claude it's okay to work here. (We think it is, because we created the contents of this folder. If you want to check what's there first, please feel free to do so!)

Step 8: Create a Virtual Business Card

Whew! You just finished doing your one-time setup for the course. Now it's time for you to actually make something of your own!

At this point you should be inside Claude Code in the folder you downloaded for Assignment 1. Your cursor should be in a box at the bottom of the screen. It's now time to get Claude to make something for you!

Your task is to create a website that contains some basic information about you. Think of it as a virtual business card. It should include the following:

  • A picture of you.
  • Your name.
  • Your email address.
  • Your program and year (e.g. "undeclared sophomore," "second-year law student," etc.)
  • Something interesting about you.

You are free to format the page however you'd like as long as it has all the requisite information above. You could have it be absolutely minimalist and just list this information, in order, with no adornment. You could make something much more professional-looking. Be creative! We want to see what you come up with. Feel free to prompt Claude Code however you'd like. Remember: the more detail you specify, the more likely you are to like the finished product.

Once you're done, you can tell Claude Code to submit your homework on your behalf. We've set up a CLAUDE.md file (something Claude reads automatically) here that gives Claude some context about what you're going to be doing, and it will guide you through the process.

Step 9: Rejoice! You're Done!

Congrats! You've just finished the assignment. We promise future assignments will require far less setup than what you did here. For now, go relax! Enjoy the nice California weather. Maybe go for a hike?