Project 2

Twelve Things

Make sure you look at the readings about grid and transitions.

Brief

Landing pages are a fundamental feature of the web. They showcase all the available items for whatever the site is about (products, people, articles, etc). For this project you will create a responsive landing page for a collection of items.

The collection

Your collection must have 12 items that say something about you. Think of it as your personal listicle.

For example:

• 12 things I wish didn’t exist
• 12 people who affected me deeply
• 12 objects on my desk
• 12 things I last bought on Amazon
• 12 ugly animals I love
• 12 things I left behind
• 12 photos I took exactly at noon

I think the weirder / more personal your collection, the better. Just make sure it’s easy for you to source images.

The page

You must use CSS grid to display your items. Each item should include an image and title.

On a real website, each item would link to a detail page. We will only work on the landing page, but do include a link <a href="#"> for each item.

Challenge 1: Radically different layouts

Usually, responsive design is used mainly to make sure that the page works well no matter what screen size.

For this exercise, however, I’m asking you to use responsiveness in an experimental/surprising way: make the page feel radically different based on the screen size.

Create three distinctly different layouts for small, medium, and large screens. Don’t simply change the number of columns. Use each screen size as an opportunity to reinterpret the collection through changes in scale, order, spacing, typography, or color.

Does each layout interpret your collection differently?

Challenge 2: Meaningful Hovers

Each of the 12 items should get individual hover behaviors. This gives you the opportunity to make an additional point about each item’s role in your collection. Are some items sad while others are happy? Embarrassed or confident? Important or insignificant? And how could that difference be communicated through a hover effect?

Starter Kit

Please use these starterkit files as the starting point for your project.

Learning Goals

• Deepen your understanding of @media queries
• Deepen your understanding of grid
• Explore hover states and the transition property
• Have fun, make something surprising, be creative

Due Next Class (Oct 6)

Delivery:

• Show your project in class (remember, we’ll meet on Zoom)
• Extra credit: publish your project to GitHub pages.
• Extra extra credit: Try setting up a custom domain project2.coding.yourdomain.com for your page