MTM6230

Web Portfolio Project

Introduction

The purpose of a web portfolio can vary from person to person. Maybe it is to get a job, promote your brand, experiment with new technology, or simply showcase what you can do. Whatever purpose you may have, it is important to have a web portfolio.

Objective

For this project, you will use the mockups, wireframes and designs elements you create in your User Experience Design course, as a guideline to create your Web Portfolio site. This will be YOUR portfolio. It should reflex who you are and what you can do. It may contain as many or as few pages as you wish, and while it does NOT need to match your mockup exactly, it should be close. Your web portfolio should also contain a collection of work that you have done and wish to share with the world.

Requirements

Create any necessary HTML, CSS, and JavaScript files to create your web portfolio. Your portfolio must adhere to the following requirements.

  1. Your design must be optimized for a variety of browsers, devices and screens sizes.
  2. Your design should strive to meet accessibility standards. This should include semantic markup in logical order, readable text, alternative text on visual elements, and functional using only the keyboard.
  3. Your design should match closely to the your mockup, and should utilize modern layout techniques. While it is encouraged that you use Flexbox or CSS Grid, it is NOT required. You MAY use a modern CSS Framework like Bootstrap or Foundation.
  4. You may use any publicly available CSS libraries or JavaScript plugins.
  5. If you choose to use web fonts, which is encouraged, use only fonts that you have the rights to use.
  6. If you choose to use images, illustrations, videos, or any other asset, use only ones you have the rights to use. No copyrighted materials.
  7. Make sure that any images and illustrations are optimized, and that they respond (grow and shrink) to the layout. You do NOT need to create multiple sizes of your images or utilize <picture> tag and srcset, sizes, and media attributes. Although it is strongly encouraged.
  8. Create a README.md file and save it in the root of your site. Inside the file include a brief description on how you created your web portfolio. This should include what challenges you faced during development and how you overcame those changes. Talk about what you learned by creating your web portfolio. Finally, include a list of any assets or resources you used that was not your own, including any frameworks, libraries, plugins, fonts, or images.

Presentation (Optional)

You may give a short informal presentation to the professor, where you show off your web portfolio and give your reflection. You will receive some immediate feedback about your web portfolio.

Submission

Submit a zip file of your entire site to the Web Portfolio assignment in Brightspace.

Rubric

Submissions will be graded on the following criteria

Design (Max: 20pts)

The user experience and overall appeal of the web portfolio. How well the colors, fonts, imagery, whitespace and structure conveyed the student's abilities, message, and personality.

Functionality (Max: 20pts)

The user interface and responsiveness of the web portfolio. How well the site optimized and tested to work on many devices, browsers, and screen sizes, and how much effort was made to ensure that the web portfolio was accessible.

Reflection (Max: 10pts)

The written and oral reflection of your efforts to create the web portfolio. You should reflect on:

  1. HOW the web portfolio was created, what techniques or technologies were used, what challenge were faced and how you over came them
  2. WHY some design / functional choices where made, their purpose, and future implementation of the web portfolio
  3. WHAT you learned from creating the web portfolio