Assignment: Responsive Collage

Create a collage in a single HTML page. Use positioning rules and viewport units to make it scale with the viewport.

  • To design this, I suggest creating the collage in your graphics editor of choice first (e.g. Illustrator). Organize your objects into logical groups on separate layers, and export each component separately. You will then re-composite the collage using HTML and CSS.
  • Give the positioned elements some kind of interactivity so that the collage is more than just a static reconstruction of your original graphic. This could be a hover state, transition, or a simple animation.
  • The key to using viewport units effectively is usually to set everything based on the same variable—the viewport width. If the x, y, and sizing of your positioned elements are all dependent on the same variable (the viewport width), they will move and scale in sync.
  • While it’s possible to construct this using a combination of CSS background images and foreground positioned elements, in my experience this can be difficult to coordinate. It’s easier in this case to do everything in the “foreground” using regular <img> tags, even the background elements and base layer(s) of your collage.
  • For collages with a lot of overlapping content, you may need to adjust the order of HTML elements or the z-index in CSS to create the desired stacking order. Check the Miscellaneous Demos for a primer on z-index and how it works. MDN also has good resources explaining z-index, if needed.

Your project folder for this assignment should contain an assets/ or offline-files/ folder for the original collage design and raw materials, and a www/ or collage/ folder for the website code and exported image components.