Assignment 1: Collage
Assigned: September 3, 2025
DUE: September 22, 2025 at 12:00PM
A key influence on the design of the web are the concepts of hypertext and hypermedia—electronic text and multimedia documents with non-linear links and cross-references. This method of joining disparate materials evokes the practice of collage, a major artistic strategy of the 20th century. Choose a subject that’s interesting to you and create a web-based collage exploring it. It can be a personal scrapbook, a documentary or guide, or a work of fiction or speculative design. It may include interactive JavaScript elements, but your collage should be primarily HTML and CSS incorporating text and images as well as other embedded media optionally.
While assembling your collage, consider the following:
- How can a collage feel alive on a screen in ways a paper collage cannot?
- What kinds of images, shapes, or textures represent your chosen theme or subject?
- How might arrangement affect meaning—does order create a story, or is it meant to feel random and chaotic?
- Consider scale: what happens when one image is huge and others are tiny?
- A grid gives you structure—will you lean into that structure, or try to break it?
- Think about interaction: does the collage invite the viewer to explore, or is it meant to be seen all at once?
Phases
Phase 1: Design
- Choose images and text for each page.
- Sketch out layouts for each page.
- Write out the CSS grid structure for each page, e.g. how many rows and cols you will need for each one, etc.
Phase 2: Develop
- Develop your designs into a website with 3 pages.
Requirements
You will be graded on your technical decisions, especially as they relate to your design. A successful project will have the following:
- 3 pages (no more no less) with at least 10 images and 3 lines or blocks of text on each page.
- A mixture of media you create and found items from elsewhere. Any found or AI-generated media should be credited, including links to sources.
- Your text should be styled e.g. using a custom font, sizing, etc.
- Each page should have a different layout using CSS Grid,
scaling as necessary to support multiple screen sizes. - You should be able to navigate from page to page using links.
- Appropriate semantic HTML tags for paragraphs, headings, figures and so on.
- Alt tags to describe visual elements and embed any text that’s rendered in an image.
- Readable code using Prettier for consistent white space and code format.
Submission
Your website should be published to the web using GitHub pages. Submit your assignment by submitting your GitHub pages link in Canvas.