home ◅ Classes + teaching ◅ Interactive Web Design I ◅ Assignments

Recipe Markup

DM2280B spring 2014 · Corcoran School of Art + Design
Instructor: David Ramos (alberto_ramos@corcoran.edu)

Websites are made up of many pieces that come together in the browser. This assignment takes a first look at web typography, using HTML to describe structure and shaping a page’s appearance with CSS. The tools we have on hand, at the moment, are simple, but they can speak loudly.

Photo of handwritten recipe

Part 1: HTML

Find a recipe, one that includes a name, paragraph-text introduction, list of ingredients, and list of steps. Think about the structure of this recipe. What are the different pieces, and how do they relate?

Mark up this recipe as HTML, using semantic elements to describe the parts of the recipe. We will be styling the recipe later – for now, you only need to break the recipe up into its components.

Start with the Recipe starter file on GitHub.

You will need to use these tags:

Deliverables: one HTML file.

We’ll publish this website on GitHub during class.

A note about HTML style

Best practice is to write tags as lowercase in actual HTML files, mainly as a matter of common coding style. When discussing tags, it usually helps to write the tags in uppercase for clarity.

Where to get recipes

Ordinarily, you could get a recipe from your favorite cookbook. That’s a problem, though, because we’ll be publishing these recipes on the web. You’ll need to find a recipe that you can use while respecting the writer’s copyright.

Good options for freely licensed or public domain recipes:

You could find a recipe that’s already a webpage and copy the HTML markup, but that would defeat the purpose of this project. Besides, the original markup might be wrong. Put the tags in yourself.

Part 2: CSS

Sketch out a design for the recipe, just with pen or pencil on paper. Design for readability and readability first – if you want to experiment with typographic fireworks, go ahead, but not at the expense of function. (You’ll have opportunities for more expressive typography later.)

Make this a one-column design. Elements can have variable left and right margins, but don’t try to put columns of text next to each other. We haven’t yet covered the techniques you’ll need to make multicolumn layouts.

Lay out your design using CSS. Consider type (size, weight, typeface, letterspacing, case, and use of italics), paragraph width and margins, and text color. Rules, borders, backgrounds, and spacing can add drama and create visual hierarchy.

You will want to use some of these properties (not necessarily all):

Remember that you can specify a particular margin, padding, and border for each side of an element.

Stick with one column!

You might want a bigger vocabulary so that you can create, say, intro paragraphs or notes. You can add classes to elements to give yourself more formatting options.

Deliverables: One webpage, with HTML and CSS files. Please also show your sketches.

For due dates, look at the class schedule.

Let’s talk about design

We’ll continue to think about how complex websites need to be, but keep this project straightforward. You may remember, from a type class, Beatrice Ward’s 1955 classic essay, The Crystal Goblet. (John Naughton, in similar terms, argues that sites are more complicated than they need to be, in Graphic designers are ruining the web.)

Set your type big enough that people can read it: 16px is a good minimum size for body copy. In reality, that’s no bigger than print. If your type looks horsey, increase the line-height (leading), reduce your line widths (measure), or choose a font that’s better suited to the screen.

Scrolling is fine. If your content won’t fit on your screen, let the page scroll. It’s 2014. You can’t design for one screen size. Someone, somewhere, will have to scroll, but the research shows that they will cope just fine.

You can always treat “big” type and scrolling as an opportunity to make beautiful things.

Evaluation criteria