View Code? Open in Web Editor NEW

Take an infographic created in an earlier class and convert it to a responsive interactive website.

CSS 4.48% HTML 95.52%

responsive-infographic's Introduction

Responsive infographic

Take an infographic created in an earlier class and convert it to a responsive interactive website.

Using the assets from the Adobe Illustrator infographic you created in David Bromley’s class, create a responsive website.

You’re welcome to simplify it a little—maybe picking 2–3 of the best bits.
There doesn’t need to be animations or transitions yet—but you’re welcome to add them.
Try to put as much of the SVG code into your HTML as you can.

Rubric

Follow the rubric’s specifics to make sure you’ve fulfilled all the requirements.

Component	0	10	15	20
Markbot	Markbot not used			Passes all Markbot tests
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