| summary | time | deliverables | download |
|---|---|---|---|
Create a single-page website for a confectionery store—showing what you learned this term. |
10 hours |
1 HTML file, 4 CSS files, images |
- Fork this repository.
- Create a complete, single-page website for a confectionery store.
The name of the company must be either:
- Beau’s Bonbons
- Coco’s Chocolatiers
- It should have real text content—that you have to write yourself.
- It should be completely designed, with real images, real colours—and it should look amazing.
- The website should obviously be fully responsive: working on screensizes from
320pxall the way to~2500px. - There’s are a bunch of images that you can download and use in the site.
- Run it through Markbot and make sure it passes all the checks.
This website is to prove that you—by yourself—can do everything we covered in class. Look back over all the assignments from the term, determine what kernel of knowledge they were trying to teach you, and see if you can implement it in this website.
There should be a significant example of everything we’ve learned this term in this website. Leave the impression that you’ve confident with what we’ve learned and can apply everything.
header,header nav,header h1,header li,header nav amain,h2,div,section,img,footermodules.css,grid.css,type.css,main.cssAnd many of the expected classes- A Google Font
- At least 1
background-image - A
background-colororcolorhover state for the navigation links - A
<form>that submits to Formspree - All images are compressed & smushed
- Passes the standard performance budget: 1000ms, < 15 assets, < 800 kB
- Passes all our accessibility requirements
In class, week 15, we will be doing lots of peer testing—most of the website needs to be complete by then.
Each person will be assigned a browser or validator and will be required to test everybody’s websites.
See the example website mockups in the “example-wireframes” folder for a better idea of what’s expected. Remember that these are just wireframes—your website should be fully designed with real images & real text.
If your website looks exactly like this you’ll receive a 0.
Below is the rubric of expectations for this project. You will be assigned a letter grade based on your standing within the rubric.
| 0 points | 1 points | 2 points | 3 points | |
|---|---|---|---|---|
| Knowledge | Poor understanding of material | Partial understanding of material | Demonstrates full understanding of material | Demonstrates excellent understanding of material |
| Responsiveness | Not responsive | Works on some screens | Responsive but with lots of awkwardness | Looks great on all screen sizes |
| Semantics | Very little HTML | Basic HTML tags chosen | Good variety and appropriate HTML tags chosen | Excellent demonstration of HTML tags and correct use |
| Design | Very little design | Basic design implemented | Cohesive design implementation | Excellent design implementation |
| Modularity | Modular CSS not used | Some basic modular CSS used | Lots of modular CSS | Modular CSS used to its full potential |
| Forms | No form | Non-functioning form | Functional but ugly form | Good looking and functional form |
| Performance | Doesn’t pass the performance budget | — | Passes the performance budget | Exceeds the expectations of the performance budget |
| Accessibility | Very poor & no accessibility | Simple accessibility details implemented | Good accessibility but clearly not optimized | Excellent accessibility with clear VoiceOver testing & improvements |
| 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 |
| Git & commits | Bad commit messages | Decent messages | Good messages | Excellent and descriptive commit messages |
| Markbot | Not handed in with Markbot | — | — | Handed in with Markbot |
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.
When you submit, Markbot will give you 1 or F—that’s just so you know that it was handed in on Canvas. You’ll still have to write a Request for Grade and the teacher will still be grading it personally.