humans.txt file. (See an example humans.txt file).320px all the way to ~2500px.We are only concentrating on making these 3 pages—but the navigation should absolutely suggest the rest of the pages exist on the website.
index.html — HomepageThe homepage of the rescue website should accomplish the goals for the target audience you’ve researched when doing your UX.
rescues.html — List of Available RescuesThe Rescues page is the page that lists all the available animals, giving details about each animal and photos of what they look like.
adopt.html — Adopt a RescueThe Adopt page is the huge form that users fill out to adopt a rescue animal. Look at some examples like Loyal Rescue.
There are a few different things that will be checked throughout the process:
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 has a bunch of expectations on the code of your website. But luckily for you no screenshot checking.
Name the HTML files: index.html, rescues.html & adopt.html
header, header nav, header nav li, header nav a, main, section or articlemodules.css, grid.css, type.css, main.css
And many of the expected classes: .grid, .unit, .xs-, .s-, .m-, .l-, .pad-, .push, .gutter, .list-group, font size classes
Remember to choose only the modules that are necessarycolor or background-color hover state on the navigation<title> & <h1> for everything HTML page250kB and maximum dimensions of 2500pxfavicon.ico & favicon-196.pngIn 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 tool 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 |
| 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 |
| UX | Incomplete or missing | Rushed & too generic | Specific but obviously lacking research | Specific and appropriate, with good details |
| Wireframes | Incomplete or missing | Missing important pieces or poorly executed | Complete but not detailed enough | Complete, detailed, and a good representation to code from |
| 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 |
| Performance | Doesn’t come close to passing the performance budget requirements | One or two performance budget requirements are not met | Just passes the performance budget requirements | Surpasses the performance budget requirements |
| Forms | No form | Non-functioning form | Functional but ugly form | Good looking and functional form |
| 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 |
| Rescues page | Missing or incomplete | Started but severely lacking | Complete but with poor text or bad responsiveness—not quite perfect | Complete, amazing content, responsive, logical—fantastic |
| Adopt 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 forms—super |
| Code quality | Missing or incomplete | Poorly done, rushed, no semantics, bad accessibility | Decent: semantics, indentation & accessibility | Perfect: semantics, indentation & accessibility |
| 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.