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.
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.
<p>
<br>
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>
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:
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?
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?
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.
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?
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?
Create a final version of your webzine.
Your zine should include:
<title> tag!Additionally, it could include a cover page, an about page, a bibliography, or any other additional front/back matter.
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...