yashbhimani06 / saas-website

Code the SaaS website you designed in your Interaction Design course.

summary	time	deliverables
Code the SaaS website you designed in your Interaction Design course.	10 hours	4 HTML files, 4 CSS files, images

SaaS website

Overview

• 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 320px all the way to ~2500px.
• Run it through Markbot and make sure it passes all the checks.

---

Teacher’s expectations

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.

---

Markbot’s expectations

All HTML files

• header, header nav, header nav li, header nav a
• main, h2, div, img, footer, section or article
• modules.css, grid.css, type.css, main.css And many of the expected classes: .grid, .unit, .xs-, .s-, .m-, .l-, .pad-, .push, .gutter, .list-group, .embed, font size classes
• A Google Font
• A color or background-color hover 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

Only index.html

Doesn’t have any specific requirements, but still must fulfill the general requirements.

Only tour.html

Everything from “All HTML files” plus:

• A <table> with all the appropriate tags. Maybe a feature comparison table.

Only sign-up.html

Everything from “All HTML files” plus:

• A <form> that submits to Formspree, with all the appropriate tags.

Only pricing.html

Doesn’t have any specific requirements, but still must fulfill the general requirements.

CSS files

CSS requirements are really open—just make sure the CSS is valid & indented properly.

---

Browser testing

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.

---

Marking rubric

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

---

Hand in

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.