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.
- 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
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
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)
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.
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:
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.
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 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 and hit enter.
The terminal will print all of the folders and files contained inside the current folder.
ls stands for "list".
cd is how we actually move between files. To move into a subdirectory, or a directory contained inside the current directory
cd [directory name]. We can also move relative to the current directory.
. 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
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
navigate to the location that you want this new directoy.
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 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
Q5 - Using git
For this class, we will use the following workflow
- You must go the the following link, and accept the assignment: HW 0 Starter Code
- Accepting the assignment automatically creates a repository in GitHub, refresh the page to see the repository.
- Now that our repository is on GitHub, we need to clone it to a local machine. Click the link to go to the repository.
- 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.
- Navigate into to the directory that we made earlier
- Once inside, type the following
git clone firstname.lastname@example.org:fullstack-decal-sp23/hw0-[username].git
lsand you should see a new folder in that location called
cdinto this new directory
cdinto 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
cs198-99 folder. From terminal, you can do this with
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.
<title id="title">Hello World!</title>
<h1 id="content">My name is INSERT YOUR NAME HERE</h1>
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
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!
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.
Authorized OAuth Apps > Gradescope. Under permissions, look for
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
and submit the
Once the autograder has run, if you have full points, then you have successfully completed this assignment.