WEEK 8: Recipe Design (Feb 25)

To Do This Week

Notes

Mid-terms Grades 
All work must be in by 11am Wed, tomorrow.:

Reminders

  • index.html,  lowercase and no spaces in ALL file names. “Index.html” will not work
  • delete browser cache
  • margin: 0 auto; 
  • <br> – use margin-bottom!
  • #wrapper or #container around all content
  • h1, h2, h3, h4, h5, h6  
  • 1em, 2.5em, etc
  • fixed design – all pixel values
  • flexible or responsive design – all percentage value (except borders)
  • display: grid on the parent of immediate children

Web Developer Extension –  Validate often

ChatGPT  – use it!

Typography:

Validate the demo and remove unwanted bullet points with list-style-type: none; 

Rules of Thumb:
  • chunk text (analyze the text)
  • organize text for visual hierarchy, create difference and repetition
  • choose 1-2 fonts (make differences with weight, size, style, color)
  • create difference in text areas (contrast, proportion, space)
  • keep line length to10-15 words per line
  • use padding on text boxes with borders
  • for text body, use CSS rules: “line-height: 1.5;” and “text-align: left” – smaller line height for headings
  • create strong lines of continuance (verticals, rule lines, borders, gutters and alignment)
  • avoid underline and bold for emphasis ( italic is best)
  • repeat styles for similar semantic elements to create repetition
  • style links!
Typography Basics:
  • use “em” values for font-sizes
  • CSS properties: color, font-size, text-align, letter-spacing, line-height, font-weight, text-shadow, text-transform : typography css reference
  • add padding to text boxes – move away from borders
  • Google Fonts

info-card Responsive Design 

info-card-responsive-example

info-card-responsive-example.ZIP

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
  • Turn off iOS resize: 
     <!--turns off iOS reset of viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Student Highlights

Recipe Responsive Structure – 5% 
Due Feb 28

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
  • Validate for errors
  • 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. Optional 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 March 18 (Tuesday after Break)

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

WATCH: Helvetica