Collection


Kickoff August 30....Complete October 21

In Ursula K. Le Guin’s text, “The Carrier Bag Theory of Fiction,” she suggests that one of the earliest tools invented by humans was a carrier bag—a vessel, a container, a holder, or a channel. This project invites you to think of a website as a similar vessel—a vessel for information and a holder for collections. You are tasked with creating a digital collection consisting of at least 15 entries. As you develop your collection, reflect on why this collection is meaningful to you and why it deserves to exist. Consider the significance of the items you choose to include and how they interact with one another within the digital space you create.

Additionally, consider the accompanying metadata for each entry (such as title, author, date, description, caption, source, etc.) and thoughtfully determine how this information will be displayed on the entry pages to enhance the viewer’s understanding and engagement with your collection.

We're going to start small and build. For five weeks, we'll be making many versions of just one or two entries, using different combinations of HTML and CSS. Then, you'll have two weeks to pull the project together with a navigation system, coherent design, etc.


Requirements

  • At least fifteen pages.
  • Site should work on all screen sizes, including mobile.
  • Site should have some idea about translation.
  • Site should include at least one piece of content that has never been published online before.

Learning objectives

  • Getting to know HTML and CSS.
  • Experimenting with typography and graphic design in the browser. For the first few weeks of this project, we'll be using ONLY type.
  • Thinking about how users navigate a website.

Milestones

Level 1: HTML

Find three entries that you might want to include in your collection.

For each text, make an HTML page using only the tags listed below. You'll have three webpages for level 1. The idea for these first few levels is to experiment with typesetting in HTML, as opposed to aiming for legibility.

  • <p>
  • <br>
  • &nbsp;
Level 2: HTML

For each text, make an HTML page using only the tags listed below, in addition to those used in level 1. Remember you can put a tag inside a tag!

  • <div>
  • <span>
  • <p>
  • <a>
  • <h1> <h2>, <h3>, <h4>, <h5>, <h6>
  • <em>, <b>, <i>
  • <ul>, <ol>, <li>
Level 3: CSS Typography

For levels 3 and 4, add two additional texts; you should be working with five all-together. Going forward, you can also use any HTML tags.

Make a version of each text using only the following CSS properties. The idea here is to experiment with typesetting in the browser. Don't worry about creating a coherent visual style quite yet... for now, it's more important to see what's possible using these properties only:

  • font-style
  • font-weight
  • font-size
  • font-family
  • text-align
  • text-transform
  • line-height
  • letter-spacing
Level 4: CSS Box model

Make a version of each text using any HTML and the following CSS properties. What types of layout can you build only by changing the size of various elements?

  • padding
  • border
  • margin
  • position
  • display
  • float
  • top
  • right
  • bottom
  • left
  • height
  • width
Level 5: CSS layout

For each text, make a version that uses either CSS grid or Flexbox to create complex, multi-column layouts.

Try adding multimedia content using <image>, <video>, <audio> or <iframe> tags.

Try a few different layouts. What makes sense for your content?

Level 6: CSS animations/transitions

Choose one version you already have of each text. In each version, add some interactions or animations using CSS. What types of hover states or movement might enhance your content? I'm curious how you can expand your design palette to include motion.

Level 7: Media Queries

At this stage, we're going to begin refining the designs of your collection into a coherent set.

Identify one page you've made so far that feels like a good example for how you might want your collection to look.

On that pages, add media queries so the layout looks good on screens of every size. What creative opportunities are there within responsive design?

Level 8: Navigation system

Build out at least five pages of your entries. Remember, your final version should have at least ten distinct web pages.

Then, draft a way to move between the pages. Think of a metaphor for navigating your collection. Does it work like a book, a map, a timeline, a maze, a dérive, a list, a restaurant menu, a game, or... something else?

Final draft

Create a final version of your project.

Your collection should include:

  • A title. Use the <title> tag!
  • A favicon.
  • At least fifteen individual pages.
  • A way to move between pages.

For people with more experience

This project is structured to help people with no experience coding get familiar with HTML and CSS step by step.

If you already know HTML and CSS, I encourage you to push beyond the technologies listed in the levels, and find a way to make this project more challenging. Some ideas...

  • Scale it up— instead of 15 pages, your collection could have 100.
  • Can your collection be community-sourced and therefore dynamically grow? Can the project be linked to a google form?
  • Design it for a specific device or format— What if your project was designed to be viewed on a touch screen (like ipad), or meant to be viewed both online and printed out (using css print styles)?
  • Think about how users will encounter your project you could build a kiosk to view your collection in a specific physical place, or design it to be seen at a specific time of day. Or what if your project was hosted locally, or on a peer-to-peer network?