| summary | time | deliverables |
|---|---|---|
Code up the all the patterns necessary for your portfolio website. |
8 hours |
HTML files, CSS files, images |
Code the pattern library for your portfolio website. Consider every unique component of the website.
Some details & things about the website to consider:
- It should be completely responsive between 320px – ~2500px.
- Include any typefaces you’re planning on using.
- Only placeholder images are necessary, but they should be representative of what will be included (sketches, roughs, finals, etc.)
- Use grid systems, type systems & default module CSS.
- ABSOLUTELY NO JAVASCRIPT!!—your site should be fully functional without it, we’ll add it in later.
- Create all the unique components you think you need based on the sketches of your portfolio.
Nothing is permanent—you can change these patterns as you go.
We’ll be performing critiques to get a grade for this project. More details below, in the “Hand-in” section.
Below is the rubric of expectations for this project. You will get a letter grade based on your standing within the rubric.
| 0 points | 1 points | 2 points | 3 points | |
|---|---|---|---|---|
| Patterns | Barely started | Missing lots of patterns | Has most of the patterns, some missing | All patterns exist and are well done |
| Personality | Bland, boring, just another graphic designer | Fairly generic but may be better with visual design | Quality layouts and unique, personable content | Unique and recognizable as you, with engaging, personable content |
| Text content | Fake content only | Some real content, some fake | All real content but with lots of errors | Real content, well written, no grammar or spelling errors |
| Responsiveness | Not responsive | Works on some screens | Responsive but with lots of awkwardness | Looks great on all screen sizes |
| Documentation | No documentation | Very little documentation | Mostly well documented | Amazing! Anybody could understand |
| Use of systems | Everything is repeated | Some good use of Jekyll & Patternbot | Lots of good systemization & reuse | Lego! |
| Code quality | Barely started | Indentation is barely existent, lots of validation errors, very poor semantics | Decent indentation, just a couple validation errors, decent semantics | Well indented, fully valid, good semantics |
Copy & paste this code for your GitHub Issue ➔
- Upload the assignment to GitHub and make sure it works on Netlify
- Make sure the Netlify URL is somewhere on the GitHub repo’s page
https://some-fun-name-thing.netlify.com
To receive a grade on the pattern library you’ll need to:
- Get 3 peer critiques
- Fill out the rubric
- Write a personal performance rationale
- Get the teacher’s critique
- Determine a grade
Select 3 of your peers and get them to critique your project ➔
Also consider performing usability tests ➔
Using the rubric above, copy the code to a GitHub Issue, attached to your repository, and select the appropriate grade for each section.
Sum the values of the rubric & put that at the bottom of the Issue.
As a GitHub Issue, attached to your repository, write a short-ish rationale explaining how well you did completing your project:
- What did you do well?
- What did you do poorly?
- What could be improved?
- What problems did you run into?
- What complications did you overcome?
- Does the website communicate the right message?
- Is the website usable?
Meet with the teacher in class and get a critique of your project.
Using all the above information, assign yourself a grade that reflects everything you’ve completed.
Discuss this grade with the teacher—if it’s fair & honest the teacher will assign the grade immediately.