Skip to main content

HW 0 - Getting Started

Introduction​

Welcome to Web Development at Berkeley's Introduction to Full-Stack Web Development Decal! This homework is meant to guide you through setting up your machine for web development this semester.

Learning Objectives​

  • How to read technical documentation
  • Set up git on your local computer and how to use git
  • Set up a GitHub account and create a GitHub repository
  • Save your work from your local computer into a GitHub repo.

Q0 - Syllabus​

Please refer to the syllabus and familiarize yourself with course policies.

Q1 - Installation​

For this course, you will need both client-side and server-side JavaScript. You do not need to know what this means, we will walk you through how to install the software, and explain later why these are necessary.

Be sure to download each of these softwares and follow the installation instructions to set up each of them. Ensure that both Git and Node are in your PATH. In your terminal of choice, enter the following

git --version
node -v
npm -v

These should print the version numbers for each of these softwares. It is perfectly ok if the numbers do not match, so long as it prints something.

git version 2.32.1 (Apple Git-133)
v18.0.0
8.6.0

You will also need an editor to help you write code for the semester. We recommend using VS Code, which is a lightweight text-editor that is nearly standard at Berkeley.

VS Code

If you have any questions, feel free to come to OH or ask after lecture, and we should be able to help.

Q2 - Debugging​

There are two main methods of debugging. The first is the traditional method: refer to the developer documentation and try to find the errors in your code based on the intended behaviors of the technology you are using. The second is the more common and sometimes quicker method: finding someone who has had the same question as you and checking their solution.

The former method is the most robust. The documentation is considered the single source of truth for many of the tools that we will use. That means that no matter what, the documentation should explain what a function does an how to use it. More often than not, that is not the case. Not all documentation is thorough. However, that being said, the documentation is always the first place to look when something is not working the way that you thought it would.

Q3 - GitHub​

Now that you've installed git, let's create a GitHub account. If you do not have one, you can make one at the link below:

GitHub

Now that you've installed and verified git and created a Github account, let's talk about why these are necessary tools for all developers and programmers. git is a distributed source control management tool. That's a fancy way of saying that it's an easy way to share code and work on it together with a large team. It's also a very convenient way to backup your code off your computer and onto a location online so other people can use it. Here's a great high-level overview of git.

Q4 - Using the Terminal​

We are going to interact with git from the terminal. If you're on Mac or Linux, just open your terminal. Because different machines has different ways to navigate, we may refer to the terminal as the git client. This just means that the terminal is what you use to use git. On Windows, the workflow is not centralized to the terminal, so the git client may be something else.

note

For this courses, our examples will use a UNIX environment, more suited for macOS and Linux. If you're on Windows, you can either try to adjust all of our instructions for Windows. You will have to translate everything from the UNIX-style terminal to the Windows analogue, cmd.exe. Alternatively, you can set upp your development environment to use Windows powershell. Powershell is a UNIX-like tool, similar to terminal. For any questions or help setting up, please feel free to come to OH.

Now, open your Terminal and let's get comfortable with navigating in bash. You can think of bash (or zsh in the case of macOS) as a utility for navigating files and executing commands. We use bash to quickly execute commands on our computer. For example, I can easily navigate to a repository on my computer and open it in VS Code from the Terminal using a combination of file navigation and commands. Bash is a powerful utility with many more feautres, but for now, let's just focus on those two.

You should be able to just enter the following commands into your terminal and hit enter to see a result.

pwd

Type pwd and hit enter.

The terminal will print the folder that you are currently inside. You will likely see something starting with "\Users". pwd stands for "print working directory", where a "directory" is just a "folder".

ls

Type ls and hit enter.

The terminal will print all of the folders and files contained inside the current folder. ls stands for "list".

cd

cd is how we actually move between files. To move into a subdirectory, or a directory contained inside the current directory we type cd [directory name]. We can also move relative to the current directory. .. and . are what are known as symbolic links. A symbolic link moves us to a relative location. In this case, .. moves us one folder up, to the inside of the parent folder.

For example, imagine that I got \Users\username\folder\subfolder when I do pwd. That means this is my current directory. If I do cd .., then pwd again, it will pring \Users\username\folder. It moved us one folder up. Now, if I do cd subfolder, and then pwd again, it will show \Users\username\folder\subfolder. Here, it moved us to the specified subfolder.

Now, we will create a directory to contain all of our assignments for this class. Using cd, navigate to the location that you want this new directoy.

mkdir

mkdir stands for "make directory" and will make a new folder inside the current folder. To run this, we need to specify the name of the new folder. 

mkdir cs198-99
ls

mkdir will make the directory named cs198-99 in the current location, and ls will print all of the directories and files in the current location. Therefore, we should see the terminal print cs198-99. Now cd into cs198-99.

Q5 - Using git​

For this class, we will use the following workflow

  1. You must go the the following link, and accept the assignment: HW 0 Starter Code
  2. Accepting the assignment automatically creates a repository in GitHub, refresh the page to see the repository.
  3. Now that our repository is on GitHub, we need to clone it to a local machine. Click the link to go to the repository.
  4. Now, you should be on the GitHub site. You can use either the HTTPS or SSH options. HTTPS may be easier. Copy the link and then navigate to your git client.
  5. Navigate into to the directory that we made earlier cs198-99
  6. Once inside, type the following 
git clone git@github.com:fullstack-decal-sp23/hw0-[username].git
  1. Now, ls and you should see a new folder in that location called hw0-[username]. cd into this new directory
cd hw0-[username]
  1. cd into the new folder.

Now, you have a repository on your local computer and on GitHub. You can think of repositories as a set of files. We make changes on our local machine, and then we push those changes to GitHub. GitHub is just an online "mirror" of our work. If you would like, you can always review git in Lesson 0.

Q6 - Creating a webpage​

Okay, let's use git now. Make sure you are in the hw0-[username] folder. That is the git repository, and you will need to be inside of it to make changes to be tracked by git. Start by creating a file called index.html in your newly created cs198-99 folder. From terminal, you can do this with 

touch index.html

Open the file in your preferred text editor, and then copy and paste the following code into your index.html you create. Don't worry if you don't understand any of this, we will teach HTML in the coming lessons.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title id="title">Hello World!</title>
  </head>

  <body>
    <h1 id="content">My name is INSERT YOUR NAME HERE</h1>
  </body>
</html>

Remember to replace INSERT YOUR NAME HERE with your name.

After you create this index.html file, try to open it up using a browser. You can do this by typing in file:/// and hitting enter on Google Chrome, then navigating to the file. Alternatively you can use file:/// and paste the entire filepath.

You should see a rought rendering of your text on the screen. This your first webpage!

Q7 - Using git​

When we cloned our git repository, there was nearly nothing in it. Now, we have added a file, and made changes to that file. In order to git to truly save these changes, we need to tell git that we are ready to "commit" them. When we commit code, we git saves the state of the working directory in it's history. But since we do not want to do that on every change (it would get very cumbersome to navigate), git only saves when we commit.

First, we need to tell git which files to track. Git only saves the state of tracked files. To tell git which changes to commit, we add files to the stage. The stage is an intermediate step between making changes and committing them. Git will only save changes that are on the stage. This gives us control over which changes we want to save and which we don't.

To add our file to the stage, ensure that you are in the git repository. Then, in your git client, use the following command

git add .

This adds all changed files to the stage. This is the most common use case. You can also add file by file by specifying the names of the file instead of using the . symbolic link.

Now that our changes are on the stage, let's commit them. 

git commit -m "initial commit"

Here, we tell git to commit the current set of changes on the stage to its history. Now, the current state of the working directory will always be available to us from the git history.

Finally, we have to reflect our changes on the GitHub. Remember, the GitHub is just a synced copy of our repo. If we make changes, we have to force GitHub to sync those changes in. To do that, we use 

git push

Now, you should be able to navigate to the repository on GitHub and in the code, you will see the file that you created in the repository!

Submission​

Congratulations! Now you have just created your first GitHub repository for your first webpage. To submit, we will need to take an extra step. Navigate to https://github.com/settings/applications. Select Authorized OAuth Apps > Gradescope. Under permissions, look for fullstack-decal-sp23. If permission is not granted, click Grant. This will allow to submit you repositories to Gradescope.

Now, please proceed to Gradescope. You will see an assignment for Homework 0. To submit, it will prompt you to submit code from GitHub by searching all of your GitHub repositories. Find your repository under fullstack-decal-sp23/hw0-[username], and submit the main branch.

Once the autograder has run, if you have full points, then you have successfully completed this assignment.

Helpful Resources​

A Beginner's Guide to Using Developer Documentation Like a Pro

How do I ask a good question? - Help Center

Writing the perfect question

What is git? - Azure DevOps

Programming 101: How to Use the Windows & Command Line

Contributors