P03: Portfolio


Individually, you will be developing a portfolio website. Unlike the prior projects which allowed for sites to link to false pages, this website must be fully functional (all links and content are real). The following content is required in the project:

Any code that is not yours must be cited accordingly.

Notes on self-plagiarism

If you have a pre-existing portfolio that you are revising or redesigning for this project we request that you provide a URL to the original as part of your final submission. This just helps us ensure that there is no self-plagiarism occurring in the project.

You are allowed to use frameworks (ie. Bootstraps) and libraries to make working on the site easier, but the final design must be your own work. When in doubt, ask the TA or instructor as plagiarism can warrant more serious repercussions.

Remember that this project is an opportunity to showcase you. Working with someone else's design or creating a website similar to others doesn't show off your 'unique' nature and students who predominantly use an existing website design or framework do not do well on this project.


Before your lab time on Dec 1.


30% of your final grade.


There are a number of weeks in which to complete this project, so please make sure to read the instructions below carefully.

Starting Oct 27

  1. Working with the in-lab activity as a starting point, create a style guide that defines the visual portion of your ethos — the understanding, characteristics, and definition of yourself in your portfolio. This style guide should help visually define you in the role your portoflio presents: a programmer, game developer, illustrator, designer, content strategist... etc, without being clichéd or a stereotype.
  2. Based on the visual ethos you are developing, complete a process analysis of two projects which help form a text to support your ethos and show how you created a project from start to finish. The text and accompanying artifacts — images, video, audio, applications, etc — must demonstrate your ability to think through a problem and iterate a project over time. Make sure to also consider how these projects speak to the abilities you are presenting as part of your ethos. Use 250-300 words for each analysis.
  3. Write a draft of a bio using no more than 100 words to introduce yourself. Ensure there is a meaningful connection between what you describe here and what your visual and textual ethos express.
  4. Generate an initial set of HTML/CSS templates showing how the visual and textual components of your ethos would be used in your site.
  5. Recommended: It is strongly suggested that you use git for this project. It is not a requirement, but if code is lost due to a system failure, no extensions will be provided.
Due in your Nov 3 lab:

Starting Nov 3

  1. Based on the feedback in the labs, integrate the style guide, process analyses, and bio into your set of templates to build out your initial draft of the complete portfolio. Note:
Due in your Nov 10 lab:

1 portfolio website mockup with all content active and integrated.

Starting Nov 10

  1. Test and debug your website. This should include testing it on:
  2. Update and publish your style guide along with your website. Make sure it includes the addition of any changes made to the original guide, as well as any layouts or structures created since the beginning of P04.
Due in your Nov 17 lab:

1 updated portfolio website with style guide linked.

Starting Nov 17

Work with feedback you receive in the lab to revise your portfolio website. Ensure you continue testing it on multiple browsers and devices. You have an extra week this term to make your portfolio the awesomest (which is not a word).

Due in your Nov 24 lab:

1 updated portfolio website with style guide linked.

Starting Nov 24

Again, work with feedback you receive in the lab to revise your portfolio website. Ensure you continue testing it on multiple browsers and devices.

Final Delivery

Final deliverables are due to Canvas before your Dec 1 lab and make sure to double-check all your submitted files and URLs to ensure they can be opened. Delivered should be one URL for a fully completed website, which includes footer links to:

Please note that we will test your portfolio website in Chrome and two other random browsers and/or devices. Ensure there are no concerns with your website by testing early and often.

Grading Rubric

Your project will be graded on the following criteria, a more detailed rubric is available on the course pages.

  1. Process (6pts)
  2. Code/Development (8pts)
  3. Ethos (8pts)
  4. Design/UX (8pts)