WEEK 8: Recipe Design
(October 9-13)

To Do This Week:


Recipe Responsive Wireframe

Recipe Responsive Structure – 5% (DUE Oct 13th)

  1. Find/Create your recipe. You will need to find a recipe – your own, from a web search or generated with AI tools.
  2. Open SublimeText to start the html…
  3. Create the Recipe HTML by following along with me in class

We are building the HTML for a single, responsive recipe page with images, and a responsive layout with distinct areas for content. This week you are just submitting a functional responsive prototype or wireframe website using CSS media queries and CSS grid and/or flex for layout. The site should have the following:

Your grade in this assignment will be based on your understanding of the fundamentals of responsive design (html/css code, media queries). The Recipe project will be graded in two parts: this week is 5% (responsive structure) and next week is 10% (applied visual hierarchy)

Recipe hierarchy:

  1. Header/”Hero-unit” (title, image, description)
  2. Ingredients
  3. Data (cook time, tools, nutrition, diet)
  4. Steps/Instructions
  5. Other info (country, notes etc.)
  6. Footer info


Recipe – Design for Visual Hierarchy

Visual Hierarchy Principles:


  • Does the layout bring attention to the parts of the recipe and still expresses a whole?
  • Does the layout show enough of the content “above the scroll” to be meaningful?
  • Is the wrapper or container under 1200px?
  • Have you added Eric Meyers reset to the top of the stylesheet before your own default styles?
  • Is your stylesheet mobile first, followed by media queries for larger sizes?
  • FYI:child elements of a Grid should not have CSS margin or width applied


  • Do you have a color scheme (5 colors) for your site design? Use Adobe’s Kuler and put values at the top of your stylesheet.
  • FYI: At the top of your stylesheet, make a comment that lists the hexadecimal values for the color scheme colors
  • Is the color scheme applied so that to the content and the hierarchy are clear?


  • Is there a rhythm of repetition and difference in the typography?
  • Do you need more padding around text? Or more careful alignment of block elements? 
  • Find a good pairing of fonts (serif and san-serif) on Google Fonts
  • Apply these fonts in the stylesheet for headings and paragraphs

CONTENT (image and text):

  • Do the images fit proportionately your design and content? 
  • Evaluate the image and h1 in the header or hero-unit. Does it stand out and bring the reader into the content?
  • Is the hero image framed properly for all device widths?
  • Evaluate how color, imagery, layout and typography work together to communicate the site content.
  • Did you add “alt” text to images?
  • Do you have a footer with link(s) to your source(s)?


  • Did you validate your project?(validate early and often!) 
  • Is your stylesheet is mobile first, followed by media queries for larger sizes?
  • Did you format your html and css so that it is readable? Tab in for nested elements, keep alignments. Use beautify CSS or beautify HTML.