VICO 2162 / 5162 Assignment

Recipe web page

Let's build a webpage that will feature recipes of your choice. You'll need to choose a couple of recipes to get started.

Your page will include ingredients, instructions, photographs and links to other recipes.

Twenty free Stock Photo websites Pixabay: search for meatballs

Back to class website

Some recipe-themed web pages for inspiration

These examples show different themes with similar narratives -- cook this today!

Assignment: Build a narrative webpage around a featured recipe and links to other recipes.

Look at the examples to understand what a recipe page is supposed to do. It has a purpose, and the parts of the page do different "jobs" for the reader.

  • Choose a recipe or two for the main subject of your page.
  • Collect photos, a list of the ingredients and amounts, the instructions.
  • What else is on a good recipe web page?
  • Update your website before each class, and add a link for each stage of progress (v1, v2, v3, final)

Before you start: A few sketches and a blank canvas

  1. Start with a few quick sketches on paper that show content areas of your web page.
  2. Will you use a list? Some icons? A photo carousel? Videos?
  3. Create your project folder with a css folder, an images folder, and a blank html file.
  4. You must begin coding with a blank canvas!
  5. Build one section that is responsive and has two or three simple design elements that you will re-use throughout your project.
  6. Is your first section responsive? Test it in your browser!
  7. Next, duplicate that section, and modify it for your content needs.
  8. Test it and repeat...
  9. After the basic framework is built, add your real text, add images, and then make some design or layout variations to the sections of the case study.

Practice, Repetition, Good habits

  • Practice and repetition are the best ways to learn coding and web design!
  • I want to see your progress each step of the way.
  • We will be working in code pairs again.
  • We'll be working on this project for a few classes, so keep your files and folders organized, save your work frequently.
  • Force yourself to start over with a blank canvas for each version!


I will be looking for:

  • Good coding -- you started with a blank canvas, your page is responsive, proper indenting of HTML code, use of annotations and spacing, use of Bootstrap's "container > row > cols" for your layout, and organized project folders.
  • Good content -- a clear theme, a narrative featuring your recipe, use of your own work for the text and images.
  • Good design -- customization, use of color, fonts and typography and strong images.