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:
- front
- right
- back
- left
- top
- bottom
and then take 6 more photos from close up in the same fashion:
- front
- right
- back
- left
- top
- bottom
We'll then use these 12 photos as follows below.
Requirements for the three modes:
Desktop
Create a 2x3 grid using your distant images. You can style your grid and images however you want but it must be 2x3.
Mobile
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.
Accessible
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:
- Alt-Text as Poetry
- Visit the Artists Space website and see how they utilize captions and alt text, in particular the images subdomain
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:
- took 6 distant and 6 close up photos
- properly changed the photo source with the picture tag at the specified width
- properly updated the grid to be either 2x3 or 1x6 depending on provided instructions
- your images each have an alt tag with a clear and considered description of the contents of the image
Have fun with it, and I look forward to seeing your Wonder Cabinets ! :~)