COMP 20: Web Programming

Lab: Your Portfolio

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

Overview

While this is a rather simple lab, it 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), to continue with graduate school, or to brand yourself (which everyone should do anyway).

Instructions

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

resume.html - Your resume. This can be real or fictitious (e.g., for FERPA reasons). 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. Relevant Coursework
  4. 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.
  5. Skills (e.g., programming languages)
  6. 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 http://YOUR_GITHUB_USERNAME.github.io (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

Guidelines

You must adhere to the following guidelines:

  1. All HTML pages must pass the official HTML5 specifications via http://validator.w3.org/
  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 http://jigsaw.w3.org/css-validator/
  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 YOUR_GITHUB_USERNAME.github.io, 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 https://help.github.com/articles/user-organization-and-project-pages, the "User & Organization Pages" section. That is, you must create a Git repo under your account named YOUR_GITHUB_USERNAME.github.io.

Viewing Your Website

Go to https://YOUR_GITHUB_USERNAME.github.io

If your website does not show up, don't panic, one of three scenarios:

  1. You need to verify your e-mail address on GitHub.
  2. It may take up to 10 minutes.
  3. Check your email for a not-so-good email from GitHub. It may not have been deployed successfully because of some error (e.g., a node_modules folder in your repo --unlikely for this lab).

The README File

Each 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 lab.
  3. Say approximately how many hours you have spent completing the lab.
  4. Be written in either text format (README.txt) or in Markdown (README.md). Markdown is preferred. No other formats will be accepted. Please use all capital letters for README

Assessment

  1. (1 point) All files including directories are in you special repo YOUR_GITHUB_USERNAME.github.io 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 README.md) 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. (-9 points) You used JavaScript, jQuery, or some front-end framework.

Course and Assignment Policies

Please refer to the course home page.