Infographic effects & interactivity

Approx. completion time: 10 hours
Deliverables: 1 HTML file, 1 CSS file, 1 JS file, images

This is a cumulative website project, with the goal of proving to me that you can do everything learned this term—by yourself.

Fork this repository.
Copy the responsive website files that we did earlier into this folder.
Add transitions, animations and Javascript to complete the website.
Hand in all the milestones & deliverables listed below.
Run it through Markbot and make sure it passes all the checks.

Markbot will expect

Valid HTML following best practices.
Valid CSS following best practices.
Valid JS following best practices.
css/main.css, js/main.js & jquery is linked.
That jQuery is used in main.js.
animation, transition, @keyframes

Deliverables & milestones

1. Paper plan

Due end of class week 13

On paper, plan out the website’s interactivity & effects like we did in these activities:

Show the paper plan to Thomas by the end of class week 13. Late submissions or submissions not presented in person will not be accepted.

2. Code milestone

Due end of class week 14

In class, during week 14 you must show Thomas progress on the interactivity & effects code. At this point the code should be far along.

Show the working website to Thomas by the end of class week 14. Late submissions or submissions not presented in person will not be accepted.

3. Browser testing

Due end of class week 15

In class, during week 15, we’ll be testing everybody’s website in different browsers to make sure they look good.

You’ll be required to submit screenshots for your website for every browser listed.

When I’m grading the websites I’ll be using a random browser to view your site.

4. Request for grade

Due last day of the term, Friday at midnight

Since the goal of this project is to prove to me that you can do everything learned this term I want a written statement denoting your proof—and a grade you think you deserve.

The written explanation should be a list of things we learned this term that you applied to your website. Most importantly how and why your website proves you can do the things we learned this term. Explain to me why you deserve the grade you chose for yourself.

Give yourself a grade for the project: F, C, B, A, A+
Write an explanation as to why the website shows you’ve learned and can apply everything from the term.
Be honest with yourself and with me (I’ll notice if you’re not)

I will read your explanation while looking over your websites. If your feedback is honest and just, you will receive the mark you chose.

Submit the explanation to the Interactive effects & interactivity assignment on Canvas—there’s a text entry field.

5. Final website

Due last day of the term, Friday at midnight

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.

Markbot will give you 1/100—this is just a confirmation so you know that the URL was handed in properly—it is not your final mark.

samzah / infographic-effects-interactivity