Project 3: Revised Portfolio Option
Redo your project 2 portfolio site to correct all problems noted in the original rubric, and to add the functionality listed in the technical requirements below.
The original portfolio should not be removed or replaced; you should create a new directory for the revised version.
If you choose this option, you may request that your revised portfolio grade replace your project 2 grade as well as being your final project grade. You must submit that request via either email or Slack no later than the date that the project is due.
All problems noted on the project 2 gradesheet must be corrected (NOTE: If you did not turn in a portfolio project at all, you will automatically lose the points for “project 2 problems corrected”. )
Project Proposal
You must submit an initial project proposal, with the following components, no later than 8am on November 26:
- A concise description of the intended audience(s) and goal(s) for your site, including your expectation of how, when, and why they would be accessing your site.
- A description of what you intend to change or improve from your project 2 submission.
- Sketches or grid-based wireframes, showing how you plan to lay out the content on each of your pages.
- A description of how you intend to incorporate interactivity into the site. How will the interactive components you use enhance the experience for users of your site?
The proposal will not be graded, but failure to submit it will result in a five-point deduction from your final project. (Submitting one that is late and/or incomplete will result in a three-point deduction.)
Technical Requirements
Desktop versions of pages should use a multi-column grid layout; mobile versions should use a single-column layout (grid or flex). If a single-page design is used, each section of the page should be clearly delineated, and should take up the full viewport height.
Individual project pages must provide detailed information about the project, including tools used and enough images to clearly illustrate the entirety of the project.
You may not use a full templating system (like Bootstrap or W3.JS), unless you provide detailed, commented versions of all style changes that you make to the template. (Minified CSS is not acceptable.) Most templating systems use their own internal grid system that will not play well with CSS grid, so it will end up being more rather than less difficult to use them for this project.
Requirements for all pages:
- Use native JavaScript and/or jQuery in some way—for navigation, interaction, or content.
- Use CSS grid for multicolumn layouts on desktop-sized viewports. (Flexbox may also be used for mobile views, and for laying out content in grid cells.)
- Usable on both Chrome and Firefox at 1280x800 resolution (my laptop).
- Mobile version optimized for 320x568 (an iPhone 5/SE, as rendered by responsive mode)
- Validate properly for both HTML and CSS. (I use the W3C HTML and CSS validators for this. I recommend installing the Web Developer Toolbar extension for easy access to the validators within your browsers.)
- Have no more than one accessibility error in the WAVE accessibility evaluation tool.
Documentation Requirements
Your CSS and JS must be externally linked, fully commented, and well-organized.
Your documentation page must be included in the main menu for the site, and should include the following components:
- A concise description of the intended audience(s) and goal(s) for your site, including your expectation of how, when, and why they would be accessing your site. (Can be copied from proposal, or updated if it changed.)
- Sketches or grid-based wireframes, showing how you designed the grid layouts for each of your page types and placed content within them. (Can be copied from proposal, or updated if it changed.)
- A clear explanation of why you made the design decisions that you did, including your choices of images, colors, and typefaces. These should all relate back to the goal of your design.
- A full list of sources for all elements used on the site that you did not create yourself, with the exception of web-based typefaces. This includes images and code samples. If you modified the original resource, you should explain what changes you made to it (if any).
- An explanation of what you incorporated that went beyond what was covered in in-class exercises; what did you learn or build upon in order to implement your design ideas? What skills and knowledge did you bring from other classes, or from research you did into specific libraries or technologies, that you integrated into your site? (Using any JavaScript library beyond jQuery or p5.js is likely to satisfy this requirement, but only if you do more than copy an existing demo or tutorial.)
Grading Rubric
I will use this rubric for grading your portfolio:
| Content & Design | |
| Project 2 problems corrected. | 3 |
| JS functionality on all pages | 2 |
| At least one interactive portfolio piece | 3 |
| Detailed descriptions for at least four portfolio pieces | 4 |
| Multicolumn grid layout on all desktop pages | 2 |
| Single column layout on all mobile pages | 2 |
| Mechanics | |
| Works in Firefox & Chrome | 1 |
| Desktop version optimized for 1280x800 | 1 |
| Mobile Version optimized for 320x568 | 2 |
| Semantic, valid HTML | 2 |
| Well-structured, valid CSS | 2 |
| No major accessibility errors | 1 |
| Code Commenting | |
| CSS Fully Commented | 2 |
| JS Fully Commented | 2 |
| Documentation Page | |
| Goals/Audience | 1 |
| Design Decisions | 1 |
| Wireframes | 1 |
| Sources | 1 |
| Explanation of What Changed | 1 |
| Above and Beyond Explanation | 1 |
| TOTAL | 35 |
Submission and Due Date
Your proposal must be submitted to the myCourses Dropbox by 8am on Monday, November 26.
Your project should be published on GitHub and linked properly from yourgithubname.github.io/igme230/ page by 8:00am on Monday, December 10. The landing page link should read "Project 3: Revised Portfolio".