Recipe Markup

Interactive Web Design I · DM2280B spring 2013 · Corcoran College 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 technologies, examining ways of using HTML to describe structure, and of laying out pages with CSS. Consider design and typography as well: the tools we have on hand, at the moment, are simple, but they can speak loudly.

Part 1 (due 12 Feb.)

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.

You will need to use these tags:

Don’t worry about using classes or IDs yet.

Also, please choose one to three images for the article. Do not worry about sizing or linking the images yet – just find them and save the files.

Deliverables: One HTML file.

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.

Part 2 (due 19 Feb.)

Sketch out a design for the recipe, just with pen or pencil on paper. Then 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. Add the images from last week.

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

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

Part 3 (due 26 Feb.)

One of the key notions in interactive world is separation of concerns: websites consist of many layers, and designers/developers can change one of those layers without needing to alter the others.

You will be given another student’s HTML file and images. Read the recipe yourself, and devise your own design for the page. Sketch out that design, and write CSS that applies your design to the existing HTML. (Please do not edit the original HTML.) You may not be able to apply exactly the design you have in mind; part of the challenge involves adapting your design to the available markup.

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

Evaluation criteria

Published 2013-02-05.