Lab 0: Homepage

Released Wednesday, September 4
Due Wednesday, September 11 at 11:59am ET

Objectives

  • Configure your environment for the semester.
  • Become more comfortable with HTML and CSS to design and style webpages.
  • Gain experience with git, GitHub, and GitHub Pages to deploy your website to the internet.
  • Learn to use Bootstrap to write more complex stylesheets for your webpages.

Getting Started

git and GitHub

If you don’t already have a GitHub account, head over to https://github.com/join and create an account. You’ll use this account throughout the course to work on assignments, submit your work, and receive feedback.

Environment

This course requires that you configure your programming environment on your local machine (which can, in many cases, make more robust development a bit easier than cloud-based IDEs, such as the perhaps-familiar CS50 IDE can; albeit at the expense of some early overhead).

If configuring your own environment, you will minimally need to install:

We also would recommend that you download a feature-rich text editor if you don’t already have one. One that provides syntax highlighting and navigation shortcuts is a good idea. Some popular options here include:

  • Atom, one option for a text editor
  • VS Code, another text editor option

Getting Ready

Okay, let’s create a simple web page. Within whatever environment you have decided to use, you should have access to a terminal window (natively, on Mac and Linux; via Git Bash, perhaps, on Windows). Create a directory for your CS100 work this term and navigate to that directory in your terminal (remember how?) Then, once inside that directory, execute:

$ curl https://cs.harvard.edu/100/curriculum/lab0.zip -o lab0.zip
$ unzip lab0.zip
$ rm -f lab0.zip
$ cd lab0

You should find that directory only contains a single file right now, README.md. Let’s change that!

Getting Started

Now, run

$ touch index.html

to create a new empty file called index.html in your folder. (Or open your editor of choice and create the file using other means, if that is more comfortable for you!) Then open that file in your editor. Once the file is opened, paste in the following contents:

<!DOCTYPE html>
<html>
    <head>
        <title>My Webpage</title>
    </head>
    <body>
        Hello, world!
    </body>
</html>

Then, save your index.html file. That was pretty easy!

Getting Online

Okay, it’s time to push the contents of your lab0 folder to a remote repository of your own on GitHub! In your terminal window, navigate to your lab0 directory, and then run:

$ git init

Which you’ll only need to do this one time, and which initializes a Git repository in your current directory, essentially telling git to start tracking changes in this directory. Then, you can:

$ git add index.html

to let git know that you want to include index.html in your next commit to this repository. Now, run:

$ git commit -m "My first webpage"

to commit your changes to this repository. The string after -m is your commit message, a short written description of the changes you’ve made in this commit. Writing succinct, informative commit messages will help you refer back to old changes later!

Now, let’s push our changes to a remote repository on GitHub. Navigate to GitHub, logging into your account if necessary, and then at the top right next to your avatar there should be a dropdown menu with a + symbol. Click on that symbol and from the dropdown select New repository. On the page that appears, type in lab0 as your repository name, provide an optional description if you wish, select Public as your visibility option, and leave the Initialize this repository with a README checkbox unchecked; recall that we already have a file called README.md in our staging area! When all finished, click Create repository.

Almost there! Now jump back to your terminal, and run the following:

$ git remote add origin https://github.com/USERNAME/lab0.git

You’ll need to do the above step only once, as it serves to connect, in a sense, the remote repository that now exists on GitHub to the local repository that exists on your machine.

Then, you can:

$ git push origin master

To push your code to the origin (the remote you just added), and specifically to that origins master branch. (We’ll talk more about branches later, but this should suffice for this lab, at least!)

You will be prompted to enter your GitHub username and password before doing so. (If you would like to avoid having to enter your username and password every time you push your changes to GitHub, you may configure your account to use SSH instead for authentication, see here for more information. Once finished, your commit should be pushed to GitHub. Substituting your own username for USERNAME, confirm as much by visiting https://github.com/USERNAME/lab0.

Now there’s just one more step within GitHub to enable your code deployed to GitHub Pages. Near the top of your repository page on GitHub you should find a link to Settings. Click it, and then scroll down to the GitHub Pages section. Under Source in that section, select master branch from the dropdown menu, then click Save. Now open a new browser tab and visit http://USERNAME.github.io/lab0. You should see a webpage that just says “Hello, world!” with a title of “My Webpage.” Your webpage is now deployed to the internet… congratulations! Share it with friends and family!

Requirements

Alright, now it’s time to make your website your own. Design a personal webpage about yourself, one of your interests, or any other topic of your choice. The subject matter, look and feel, and design of the site are entirely up to you, subject to the following requirements:

  • Your website must contain at least three different .html pages, and it should be possible to get from any page on your website to any other page by following one or more links.
  • Your website must include at least one list (ordered or unordered), at least one table, and at least one image.
  • Your website must have at least one stylesheet file (a .css file).
  • On the subject of styling:
    • Your stylesheet must first use at least five different CSS properties, and you must style at least five elements. You must use the #id selector type at least once, and the .class selector type at least once. Be sure to commit and push changes at some point where your site is only using your own CSS.
    • After that, you should change your CSS by using Bootstrap 4 on your website, taking advantage of at least one Bootstrap component, and using at least two Bootstrap columns for layout purposes using Bootstrap’s grid model. You don’t have to replace all of your originally-written CSS; indeed, it is possible that you may wish to override some of Bootstrap’s styling choices with your own, as by placing your own CSS file after Bootstrap’s in between the <head> tags.
  • In README.md, include a short writeup describing your project, what’s contained in each file, and (optionally) any other additional information the staff should know about your project.

Be sure, at several steps during this process, to push updates to your GitHub repository so that you can then view your updated GitHub Pages site! (You can also simply double-click on the .html files in your file browser to open a local copy of your site as it exists at that moment.) You (and we!) will want to be able to look back in time over your commit history and see the evolution of your site.

FAQs

Reload periodically to see answers to common FAQs!

How to Submit

Step 1 of 2

When happy with the final product of your website, and certain that the requirements above have been met, share your lab0 repository with user cs100bot with at least “Read” privileges. You can do this by clicking on your repository’s Settings and then at left clicking Collaborators & Teams.

Step 2 of 2

Fill out this form! If you happen to see a “Whoops… something went wrong!” message after logging in, do try again in Incognito mode.

Congratulations! You’ve completed Lab 0.