| summary | time | deliverables |
|---|---|---|
Create a responsive infographic website using all your knowledge from the term. |
many hours |
1 HTML file, 1 CSS file (or more), images |
Create a fully responsive & interactive infographic using Javascript, transitions, animations & SVG.
- Fork this repository.
- Use lots of lovely Javascript to add interactivity.
- Add transitions, animations and SVG fanciness.
- Run it through Markbot and make sure it passes all the checks.
If you’ve previously created an infographic, maybe in David Bromley’s class, you’re welcome to code that.
You could also look at recreating a static image-based infographic you’ve found online if you give the original designer credit.
- Valid HTML following best practices.
- Valid CSS following best practices.
- Valid JS following best practices.
css/main.css,js/main.js&jqueryis linked.- That jQuery is used in
main.js. animation,transition,@keyframes
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 | |
|---|---|---|---|---|
| Functionality | No functionality, essentially a static image | Some functionality but clearly room for improvement | Good amount of functionality but there are some errors or confusing bits | Amazing amounts of functionality with no errors |
| Responsiveness | Barely or not responsive | Some responsiveness issues on all screens | Works well on small, medium & large screens | Responsiveness perfect on all screens: good text size, good hit areas, etc. |
| Content | Feels incomplete | Not enough content to be a complete infographic | Has enough content to represent a whole infographic | Lots of extra, detailed content |
| Design & usability | Poorly designed, rushed, not accessible | Non-matching components, poor type choices, poor accessibility | Good design, great type, but poor accessibility | Cohesive design, perfect content size & placement, great accessibility |
| Professionalism | Incomplete and prototype-y, looks cheap | Feels about halfway complete, could use more effort | Has the completeness of a real website, a client would pay for it | Good enough for Thomas to steal it an call it his own |
| Semantics | Very little HTML | Basic HTML tags chosen | Good variety and appropriate HTML tags chosen | Excellent demonstration of HTML tags and correct use |
| 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 online.