COMP 20: Web Programming

Assignment 1: Your Portfolio

Due: Thursday, February 7th

This assignment is worth 10 points. You must work on this assignment individually.


This assignment serves two important purposes:

  1. Use HTML5 and CSS.
  2. Help you put together a personal portfolio: whether you are looking for an opportunity (internship or full-time after graduation) or continue with graduate school. Many people now use * as personal website.


Using only HTML5 and CSS, you are to create three (3) personal web pages:

resume.html - Your resume. It shall include the following sections:

  1. Full name or handle (if you are not comfortable with providing your identity). IMPORTANT: For privacy reasons, please do not list your addresses or telephone numbers.
  2. Education
  3. Professional Experience. For each job, list accomplishments. Use the past-tense if you no longer work at the job; in the present-tense if you are currently employed at the job. Use bullets-points, an unordered list.
  4. Skills (e.g., programming languages)
  5. Activities that are related to your field of study or work

bio.html - A short biography of yourself. This can be real or fictitious (e.g., for FERPA reasons)

index.html - Your personal home page. This page is accessed by (notice the index.html is not necessary at the end of the URL. It is inferred to be index.html). This page shall contain:

  1. Your name --real or fictitious (e.g., for FERPA reasons)
  2. A photo of you --real or fictitious (e.g., for FERPA reasons)
  3. A link to your resume
  4. A link to your short biography

Your must also have an index.html page hosted in your Tufts CS account that redirects to your actual website on GitHub. Example: redirects to


You must adhere to the following guidelines:

  1. All HTML pages must pass the official HTML5 specifications via
  2. You must use at least one (1) CSS file. The CSS file, or one of the CSS files, must have at least 5 rules
  3. All CSS files must pass the official CSS validation via
  4. You cannot use frames.
  5. You cannot use any styling element for any purpose (e.g., <b>, <i>, <font>, <center>). All styling must be defined in CSS.
  6. You cannot use any styling attribute in elements (e.g., <h3 align="center">).
  7. You cannot use absolute URLs for images.
  8. You cannot use front-end frameworks such as Bootstrap.
  9. You cannot use other people's CSS files.
  10. You cannot use JavaScript (or jQuery for that matter; considering we have not covered JavaScript yet!).
  11. All file names must be in lowercase and only [a-z0-9_.] characters can be used for file names (universal standard). That is, do not use whitespace in file names!
  12. All content must be stored in your special repo, master branch, of your GitHub account.

Getting Started

Please do the Git lab first.

You must create a special repo under your GitHub account. Please read, the "User & Organization Pages" section. That is, you must create a Git repo under your account named


Each assignment and lab shall include a README file that describes the work. This description must:

  1. Identify what aspects of the work have been correctly implemented and what have not.
  2. Identify anyone with whom you have collaborated or discussed the assignment.
  3. Say approximately how many hours you have spent completing the assignment.
  4. Be written in either text format (README.txt) or in Markdown ( No other formats will be accepted. Please use all capital letters for README

About Your Tufts CS Account

Any student taking a class with the Tufts University Department of Computer Science is given an email address and 50 MB of web hosting space. As of this writing, your email address and web hosting space with Tufts CS is forever. IMPORTANT: using Tufts CS resources for malicious (e.g., spam) or commercial purposes (e.g., a startup) will result in explusion from the University!

Tufts CS provides a cluster for Unix logins.

If you have not done so already, activate or reset your Tufts CS Unix account at

With your Tufts CS account, you can create a personal website that will be available at:


In order to setup your website, you need to create a folder called public_html in your "home directory" (which is usually your current location after you have successfully logged on). This folder will appear to be the root of your personal website.

You will set the correct permissions on your "home directory" and the public_html directories. This can be accomplished by executing the following commands (assume that your login is lsimpson and your command prompt is >):

  1. Log on to or
  2. lsimpson ~/work/project/ > cd ~
  3. lsimpson ~/> mkdir public_html
  4. lsimpson ~/> chmod 755 public_html (NOTE: 755 is the permissions code for user readable, writable, and executable; group readable and executable; other readable and executable)
  5. lsimpson ~/> chmod 711 ~

The default file for your website must be named index.html. Without this file, visitors to your website will see a listing of the files you have in your public_html directory.

As you create new files and directories, you must verify that they have the proper permissions set. The proper setting for all files within public_html is 644, and for all directories is 755.

You can set these by executing:

  1. lsimpson ~/> chmod 755 <directory_name>
  2. lsimpson ~/> chmod 644 <file_name> (NOTE: 644 is the permissions code for user readable and writable; readable by group and others)

Also, you must change your home directory to be executable. That is: chmod 755 ~/.

If one of these steps is not completed, you will get the 403 error (status code)!

Transfer Files From Your Computer to or via scp on Mac OS X and Linux

scp securely copies files between hosts on a network. To learn more about scp, run man scp on the terminal.

Say that user lsimpson has two files: index.html and smiley.png in her home directory on her local computer. To transfer them her public_html directory on, she would run:

scp index.html smiley.png

Secure File Transfer via FileZilla (Mac OS X, Windows, Linux)

FileZilla can also be used to transfer files from a local computer to Tufts CS, vice versa. Be sure to select sftp for the protocol!


  1. (1 point) All files including directories are in you special repo of your GitHub account.
  2. (1 point) Used Git constantly: committing with meaningful messages and pushing to GitHub.
  3. (1 point) A README (e.g., README.txt or file that briefly describes your work.
  4. (1 point) Use at least 5 rules in one of your CSS file.
  5. (1 point) All pages pass the official HTML5 specifications; warnings acceptable.
  6. (1 point) All CSS files pass the official CSS validation; warnings acceptable.
  7. (3 points) The three (3) pages with exact file name: index.html, resume.html, and bio.html
  8. (1 point) An index.html page hosted in your Tufts CS account that redirects to your actual website on GitHub.
  9. (-5 points) You used JavaScript, jQuery, or some front-end framework.
  10. (-10 points) You used a site generator such as Jekyll.

Course and Assignment Policies

Please refer to the course home page.

Frequently Asked Question

Q: I already have a project from before this class with this label ( Any idea how I should rename the first assignment?

A: You don't. You can (and should) use your existing work. However, make sure all the directions in Assignment 1 are followed. Another thing you can do: make a new directory in your, create a custom version of your website for Assignment 1 and make a note of it in your README file.