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.
- Your design must be optimized for a variety of browsers, devices and screens sizes.
- 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.
- 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.
- You may use any publicly available CSS libraries or JavaScript plugins.
- If you choose to use web fonts, which is encouraged, use only fonts that you have the rights to use.
- If you choose to use images, illustrations, videos, or any other asset, use only ones you have the rights to use. No copyrighted materials.
- 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 andsrcset,sizes, andmediaattributes. Although it is strongly encouraged. - Submit the mockup of your site for comparison purposes. The mockup can be include in your project folder or submitted directly to BrightSpace.
- Create a
README.mdfile 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. - Your web portfolio MUST be published to GitHub Pages as the root site. This means going to http://your-username.github.io will display your web portfolio.
Rubric
| Criteria | Excellent | Satisfactory | Marginal | Unsatisfactory |
|---|---|---|---|---|
| 25 Points | 20 Points | 15 Points | 12 Points | |
| Layout | The layout demonstrates superior layout that transitions seamlessly between screen sizes and optimizes on all browsers. | The layout is responsive and optimized for multiple browsers and screen sizes. | The layout is partially responsive, but was not optimized to work well on multiple browsers and screen sizes. | No meaningful attempt was made to create a responsive layout. |
| 25 Points | 20 Points | 15 Points | 12 Points | |
| Design | The site provided matching the mockup perfectly | The site provided very closely matching the mockup | The site provided somewhat matches the mockup | The site provide does not resemble the mockup at all |
| 10 Points | 6 Points | 4 Points | ||
| Imagery | The site images on the site were of excellent quality, were optimized for the web, and enhanced the over all user experience. The site images were responsive and adhered the best practice techniques. | The site images on the site were of good quality and were responsive, but were not optimized or enhanced the over all user experience. | The site images were of poor quality and / or were not responsive. | |
| 10 Points | 6 Points | 4 Points | ||
| Code | The code is well formatted and valid. | The code is valid but poorly formatted | The code is invalid | |
| 10 Points | 0 Points | |||
| Reflection | A thoughtful and adequate reflection was provided | No or an inadequate reflection was provided | ||
| 10 Points | 0 Points | |||
| Mockup | A mockup was included | No mockup was included | ||
| 10 Points | 0 Points | |||
| Published | The site was successfully published to GitHub Pages | The site was not published to GitHub Pages |
Maximum Points: 100
Submission
This project and all of it assets should be published to your GitHub paging site. The URL to the live version of the project should be submit to the Web Portfolio assignment on BrightSpace.