COMP 20: Web Programming
Lab: Your Portfolio
This assignment is worth 9 points. You must work on this assignment individually.
While this is a rather simple lab, it serves two important purposes:
- Use HTML5 and CSS.
- 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).
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:
- 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.
- Relevant Coursework
- 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.
- Skills (e.g., programming languages)
- 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:
- Your name --real or fictitious (e.g., for FERPA reasons)
- A photo of you --real or fictitious (e.g., for FERPA reasons)
- A link to your resume
- A link to your short biography
You must adhere to the following guidelines:
- All HTML pages must pass the official HTML5 specifications via http://validator.w3.org/
- You must use at least one (1) CSS file. The CSS file, or one of the CSS files, must have at least 5 rules
- All CSS files must pass the official CSS validation via http://jigsaw.w3.org/css-validator/
- You cannot use frames.
- You cannot use any styling element for any purpose (e.g.,
<b>, <i>, <font>, <center>). All styling must be defined in CSS.
- You cannot use any styling attribute in elements (e.g.,
- You cannot use absolute URLs for images.
- You cannot use front-end frameworks such as Bootstrap.
- You cannot use other people's CSS files.
- 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!
- All content must be stored in your special repo
YOUR_GITHUB_USERNAME.github.io, master branch, of your GitHub account.
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
Viewing Your Website
If your website does not show up, don't panic, one of three scenarios:
- You need to verify your e-mail address on GitHub.
- It may take up to 10 minutes.
- 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).
Each lab shall include a
README file that describes the work. This description must:
- Identify what aspects of the work have been correctly implemented and what have not.
- Identify anyone with whom you have collaborated or discussed the lab.
- Say approximately how many hours you have spent completing the lab.
- 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
- (1 point) All files including directories are in you special repo
YOUR_GITHUB_USERNAME.github.io of your GitHub account.
- (1 point) Used Git constantly: committing with meaningful messages and pushing to GitHub.
- (1 point) A
README.md) file that briefly describes your work.
- (1 point) Use at least 5 rules in one of your CSS file.
- (1 point) All pages pass the official HTML5 specifications; warnings acceptable.
- (1 point) All CSS files pass the official CSS validation; warnings acceptable.
- (3 points) The three (3) pages with exact file name:
Course and Assignment Policies
Please refer to the course home page.