aymannumber2 / 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’ve 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 14, 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 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.

saas-website's Issues

Mac Safari

-Your banner image is a bit too large at the big screen size, also the text does not stay on the image. Try playing around with the positioning.
-Try adding a "max-length" class to your p tag on the Tours, that way the line-length will be more comfortable to read!
-Your navigation is different on every page
-In your nav, you have an extra "highlighted" class on an empty a tag which is causing a weird underline on the 'Tours' link
-On the home page, try wrapping both your card divs in another div. Then in css add margin: 0 auto to that div to centre the content.
-I noticed that your main is wrapped in one a tag called 'sign-up.html'. This would would make the entire section a link. Instead of wrapping it in the a tag, make it your main. Have a button instead for people to sign up.

Good job!

Android Default

Navigation - All pages
When sitting on the current page, the appropriate nav a is underlined - which is excellent. An issue is that a small line that looks like an underscore ( _ ) appears at the beginning of the next nav a element.

IOS Chrome

The body type and navigation links are very small on mobile right now. It's looking good other than that.

Opera ISO Mobile

Would benefit from adding more of a grid structure in order to keep contents within the page.