Assignment 2: Wonder Cabinets

Fold-out engraving from Ferrante Imperato's Dell'Historia Naturale (Naples 1599), the earliest illustration of a natural history cabinet

Brief: For our second lab project, you'll be creating a personal Wonder Cabinet from an object of your choosing.
Due Date: Your assignment is due Thursday February 25th, *no later* than 8pm Eastern and must be emailed to me by then or it will be considered incomplete.

Using the responsive css and image strategies we've learned in recent classes as well as CSS Grid from this week's async demo, you'll be creating a Wonder Cabinet with three distinct perspectives: Desktop, Mobile, and Accessible.

How to choose your object

There are no strict requirements for what object you want to include for your Wonder Cabinet. It should be something that you have easy access to, can lift/move, and is class appropriate. :)

Do put some consideration into your object though. Think of something that has personal significance, memories attached to, or something distinct to you.

It could be a sand dollar you found on a beach, a rock you collected on a hike when you were a child, a gift from a friend that you cherish, your first tooth, your favorite coffee mug, a leaf from a tree you like, a can of your favorite soda, etc...

How to document your object

Using the best camera or phone camera you have access to, take 6 photos of the: front, right, back, left, top, and bottom from a reasonable distance:

and then take 6 more photos from close up in the same fashion:

We'll then use these 12 photos as follows below.

Requirements for the three modes:


Create a 2x3 grid using your distant images. You can style your grid and images however you want but it must be 2x3.


Using the responsive image tools we learned about, change your images to be the closeup versions you took when the width is 500px or less.

In addition, use a media query in your css for when the page is 500px or less and update your grid to be 1x6.


It's just as important that we think about designing for accessibility as we do designing for mobile. One of most important things we can do when designing and building websites is to add alt tags to images so that assistive devices can understand and describe to users what images are of.

Add a unique alt tag to every one of your 12 images describing what is visible within the particular frame that image captures. Compose your alt tags thoughtfully.

To work on this third perspective, explore these two resources:

Putting it all together

Create a new html and css file with the code for your three perspectives, upload to your github, and email me the link by the deadline: Thursday February 25th, *no later* than 8pm Eastern.

Also Email me if you have any questions or trouble!

Grading & expectations

You will be graded on whether you followed all the outlined steps:

Have fun with it, and I look forward to seeing your Wonder Cabinets ! :~)