WEEK 8: Recipe Design (Feb 25)

To Do This Week

Notes

Next Week: October 18 – Holly Slocum

  • Have an idea for the Multimodal Narrative Project
  • Explore types of digital narratives
  • Get help with your Recipe Design

Resources:

Validate the demo and remove unwanted bullet points with list-style-type: none; or Eric Meyer’s reset.

Responsive Design Reminders

Principles:

  • Mobile first!
  • Flexible design (use percentages instead of pixels)
  • HTML flow and cascade principle
  • Inheritance (only change styles that need adjustment)
  • Use max-width and min-width for limits
  • Responsive images (img { width: 100%; })
  • Modular design
  • Breakpoints based on design, not device
  • Use display: none; and display: block;
  • Turn off iOS resize

Media Queries Overview

Workflow: Sketches, create boxes of content

Approximate Breakpoints: 1200px, 960px, 768px, 600px, 480px, 320px

Student Highlights

Recipe Responsive Structure – 5% (Due Oct 11th)

  1. Find/Create your recipe (your own, web-sourced, or AI-generated).
  2. Open Sublime Text to start the HTML.
  3. Create the Recipe HTML following in-class instructions.

We are building a single, responsive recipe page with images and a distinct layout. Submit a functional prototype using CSS media queries and grid/flex layout. Include:

  • An index.html page inside your “recipe” folder
  • Internal or external CSS stylesheet
  • At least two media queries for layout changes
  • CSS grid or flex for sections
  • At least three images
  • Uploaded to the server (check URL paths)
  • Submit the URL to Canvas

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

Your grade will be based on understanding responsive design fundamentals (HTML/CSS and media queries).

Recipe – Final Design (for Visual Hierarchy) (Due October 18)

Visual Hierarchy Principles:

  • Layout: Bring attention to recipe parts while maintaining a cohesive whole.
  • Show meaningful content “above the scroll.”
  • Keep wrapper/container width under 1200px.
  • Add Eric Meyer’s reset at the top of the stylesheet.
  • Use mobile-first design followed by media queries for larger sizes.
  • Color: Create a 5-color scheme using Adobe’s Kuler. List hex values in a comment at the top of your stylesheet.
  • Ensure colors enhance content hierarchy.
  • Typography: Establish rhythm through repetition and variation.
  • Add padding and align block elements carefully.
  • Pair serif and sans-serif fonts via Google Fonts and apply them for headings and paragraphs.
  • Content (Images/Text): Ensure images fit proportionately to the design and content.
  • Evaluate header/hero image for engagement and responsiveness.
  • Add alt text to all images and include a footer with source links.
  • Code (HTML/CSS): Validate your project frequently.
  • Format HTML and CSS for readability (use beautify tools if needed).

 

 

 

 

 

 

To Do This Week:

Notes:

NEXT WEEK OCT 18  – Holly Slocum

  • Have an idea for the Multimodal Narrative Project
  • Types of Digital Narratives
  • Help with your Recipe Design…

Typography assignment, by former student Natalie Hendren

Typography demo
/ demo PDF

Validate demo…

unwanted bullet points – ‘list-style-type: none” or Eric Meyer’s reset.

Responsive Design Reminders

mobile first!
flexible design (using % instead of px)
percentages! (do the math)
html flow
cascade principle
inheritance (only change styles that need to change)
max-width and min-width (set limit with max or min width)
height values are tricky
responsive images (100% of container parent or img {width: 100%;})
modular design
“breakpoints” based on design not device
display: none and display: block
turning off iOS resize

Media Queries Overview
workflow – sketches, create boxes of content

Approximate Breakpoints:
1200px
960px
768px
600px
480px
320px

 

 

Student Highlights:

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

  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:

  • an index.html page inside your “recipe” folder
  • an internal or external CSS stylesheet (your choice)
  • at least two media queries for changing layout from mobile to desktop
  • use of CSS grid or flex on recipe sections
  • at least three images
  • uploaded to the server – check the url!
  • Submit url to Canvas

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 – Final Design (for Visual Hierarchy) – (DUE October 18)

Visual Hierarchy Principles:

LAYOUT:

  • 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

COLOR:

  • 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?

TYPOGRAPHY:

  • 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)?

CODE (HTML and CSS)

  • 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.