WEEK 7: Responsive Design (Feb 18)

To Do This Week

Notes

Mandatory Midterm Meeting (5%) – DUE by Tuesday Feb 25th

Please set up a mid-term Zoom or in-person meeting with me by messaging me on Slack. This meeting is to check in about how you are doing so far with HTML and CSS.

Below are my times to meet. You can either set up a 30 minute slot or just 5-10 minutes if you are feeling comfortable with the material so far. For longer sessions, we can meet on Zoom. For shorter, we can meet after class.

My Availability:

After class, for short 5-10min meetings.
For longer meetings (15-30min):
Zoom MTWTHF – 12:00pm- 2:00pm
Office Hours in #26 – T 4-5pm, W 3-4pm

Upcoming Projects:

Info-Card Class List
Blackbird Class List

Common Issues

  1. Clear browser cache to see changes.
  2. URL format: server + user folder + project folder.
  3. Use a wrapper to control width (max-width: 1000px) and alignment of children.
  4. Remove bullets on centered lists: list-style-type: none;
  5. Beware of excessive borders and color contrast issues.
  6. Ensure readability of text: size and contrast.
  7. Ensure h1 is larger than other text.
  8. Center text and images with text-align: center;.
  9. Center block elements: margin: 0 auto;
  10. Focus on typographic differences and repetition.
  11. Use color for visual hierarchy. High-contrast and saturated colors calls attention.
  12. Style links: a:link, a:visited { color: red; text-decoration: none; }
    a:hover, a:focus { color: orange;}
  13. Cautiously Position elements using:
    fixed (from browser sides),
    relative (from itself), or
    absolute(from a positioned parent);
    No such things as position: center
  14. Avoid float unless wrapping text around a block element.
  15. Clear floats with clear: left/right/both;.

Visual Hierarchy Checklist for Info-Card Project

I have not graded these yet, so you can make changes until Friday!

  • Use a wrapper (.info-card) – A wrapper surrounds ALL of your content. Give it a width of 1000px or under. Use margin: 0 auto; to center it in the browser.
  • Consider the content “Above the Fold” – make sure the site has a coherent layout and communicates without scrolling down. Don’t have have images cut off in the middle. Reduce image sizes so that they are fully visible.
  • Define a Cohesive Color Scheme – Use Adobe Color to create a balanced palette that enhances readability and structure.
  • Limit Your Fonts – Stick to 1-2 fonts for consistency and ensure strong contrast between text and background for accessibility.
  • Create Clear Hierarchy – Use size, weight, and spacing to guide the reader’s eye through the content logically.
  • Check Text Contrast – Is your text easily readable? Test contrast using WebAIM.
  • Align Elements Properly – Ensure headings, images, and text blocks are aligned for a clean, professional layout.
  • Use Color to Emphasize – Does your color scheme highlight key content rather than create visual clutter?
  • Give Elements Breathing Room – Apply padding and white space to prevent text from feeling cramped.
  • Avoid Unnecessary Borders – Only use borders to separate and define sections, not just for decoration. Nested borders or borders without visual contrast can make designs look cluttered.

Recipe Project Overview

Read about the main assignment: Recipe Responsive Structure

Summary

Over the next two weeks, create a one-page responsive website for a recipe using your HTML and CSS skills. You may use a family recipe, a historical recipe, one found online (with credit), or a new one you create. Content can be generated with AI tools, but the HTML and CSS must be hand-coded.

Recipe Responsive Structure – 5% (due February 28)

Follow along in class to build the HTML and CSS for a single responsive recipe page. The page should include:

  • An index.html file inside a “recipe” folder
  • Internal or external CSS stylesheet
  • At least two media queries for layout changes from mobile to desktop
  • Use of CSS grid and/or flexbox
  • Add borders to see structure: * {border: 1px solid red;}
  • At least three images
  • Uploaded to the server and check the  URL 
  • Submit the URL to Canvas

Grades will be based on understanding responsive design principles (HTML/CSS, media queries) and visual hierarchy (layout, color, typography).

Student Examples:

In-Class: Build Recipe HTML/CSS

“Chunk” your Recipe into parts:

  1. Header/Hero Unit: Title, image, description
  2. Ingredients
  3. Data: Cook time, tools, nutrition, diet
  4. Steps/Instructions
  5. Additional Info: Country, notes, etc.
  6. Footer

Follow along in class:

Responsive Design

Responsive Design Principles:

  • Mobile-first design
  • Flexible units (percentages over pixels)
  • Use media queries for breakpoints
  • Responsive images: img { width: 100%; }
  • Modular design
  • Breakpoints: 1200px, 960px, 768px, 600px, 480px, 320px

Resources:

    • W3Schools Responsive Tutorial
    • Simple Reset of Browser CSS: 
      *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img, picture, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    line-height: 1.5;
    font-family: system-ui, sans-serif;
}

Responsive Example | Download Zip

RESPONSIVE DESIGN PRINCIPLES:

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

Site Examples:

Responsive Design Resources:
guidelines-for-responsive-web-design

Info-Card Responsive Design
DUE Feb 21- this weekend

Info-Card Visual Hierarchy: Read about this week’s Info-Card assignment.

Example: