Kickoff January 18....Complete March 7

Design and build an online publication that includes ten or more pages. At least one entry should come from an offline source, which means you are publishing this text online for the first time. Your zine should be designed for a specific, defined audience.

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.


Learning objectives


Level 1: HTML

Find three texts that you might want to include in your zine.

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.

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!

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:

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?

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 zine 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 zine. 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 zine. 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 webzine.

Your zine should include:

Additionally, it could include a cover page, an about page, a bibliography, or any other additional front/back matter.

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...

Software for People