| summary | time | deliverables |
|---|---|---|
Code the SaaS website you designed in your Interaction Design course. |
10 hours |
4 HTML files, 4 CSS files, images |
- Fork this repository.
- Code the whole SaaS website you designed in your Interaction Design course.
- Create a multi-page website: Home, Tour, Pricing & Sign-up.
- It should have real text content—that you have written 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. - 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’re confident with what we’ve learned and can apply everything.
header,header nav,header nav li,header nav amain,h2,div,img,footer,sectionorarticlemodules.css,grid.css,type.css,main.cssAnd many of the expected classes:.grid,.unit,.xs-,.s-,.m-,.l-,.pad-,.push,.gutter,.list-group,.embed, font size classes- A Google Font
- A
colororbackground-colorhover state on the navigation - A unique
<title>&<h1>for everything HTML page - Focus states on the navigation and links in the main body content
- ARIA roles & proper accessibility & colour contrast
Doesn’t have any specific requirements, but still must fulfill the general requirements.
Everything from “All HTML files” plus:
- A
<table>with all the appropriate tags. Maybe a feature comparison table.
Everything from “All HTML files” plus:
- A
<form>that submits to Formspree, with all the appropriate tags.
Doesn’t have any specific requirements, but still must fulfill the general requirements.
CSS requirements are really open—just make sure the CSS is valid & indented properly.
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.
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 |
| Accessibility | Not accessibile | Some accessibility but doesn’t work well with certain situations | Some minor accessibility problems | Works really well under all the standard accessibility tests |
| Forms | No form | Non-functioning form | Functional but ugly form | Good looking and functional form |
| Tables | No table | Poorly designed & incomplete table | Functional but ugly table | Good looking & functional table |
| Home page | Missing or incomplete | Started but severely lacking | Complete but with poor text or bad responsiveness—not quite perfect | Complete, amazing content, responsive, designed well—amazing |
| Tour page | Missing or incomplete | Started but severely lacking | Complete but with poor text or bad responsiveness—not quite perfect | Complete, amazing content, responsive, good use of tables—fantastic |
| Pricing page | Missing or incomplete | Started but severely lacking | Complete but with poor text or bad responsiveness—not quite perfect | Complete, amazing content, responsive, logical—super |
| Sign-up page | Missing or incomplete | Started but severely lacking | Complete but with poor text or bad responsiveness—not quite perfect | Complete, responsive, well-designed form—awesome |
| Professionalism | Poorly done, rushed, incomplete | A good start but needs much more effort & time | Well done, but could use more refinement | I would steal this and use it myself |
| 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 for grades using Markbot.
When you submit to Progressinator, you’ll see a grey checkmark that shows the project was handed in. You’ll still have to write a Request for Grade and the teacher will still be grading it personally.