WEEK 7: Responsive Design
(October 2-6)

To Do This Week:


View Blackbird projects…

Blackbird Projects sec 01
Blackbird Projects sec 02

common issues:

  1. clearing browser cache to see changes
  2. url: server + user folder + project folder
  3. use a wrapper to control width (under 1000px) and alignment of children
  4. remove bullets on centered lists: list-style-type: none;
  5. too many borders, inside/outside colors
  6. readability of text – size and contrast
  7. text-align center on text
  8. difference and repetition in typography
  9. color in visual hierarchy
  10. style links: a:link { color: red; text-decoration: none;}, etc
  11. position:  fixed, relative, absolute
  12. center block element _ margin: 0 auto;
  13. center inline element – text-align: center;
  14. avoid float – unless wrapping text around block element 
  15. clear float – to stop the wrapping
    clear: right, left or both

Responsive Design


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:

Site Examples:

Responsive Design Resources:

Info-Card Responsive Design

Info-Card: Visual Hierarchy

Read about this weeks Info-card assignment



Mandatory Midterm Meeting (5%) – by Wednesday, October 11

Please set up a mid-term 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:
MW – 10:00pm-12:00pm, 1:30pm-3:00pm
TTH – 12:00pm-3:00pm



AI Tools for Recipe Assignment

Create or invent a recipe from the past, future or some fantasy world using these tools.


Recipe Project Overview

Read more about the main assignment this week: Recipe Responsive Structure


In the next few weeks, using HTML and CSS skills introduced so far in this class, you will create a one-page responsive website for a Recipe. You can use a family recipe, an historical recipe, a recipe you find on the web (that you credit), or one you make up. You are welcome to use AI tools for content, but the coding should be your own hand-written HTML and CSS. In the second week, you will learn how to apply CSS for Visual Hierarchy.

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

Follow along in class to build the HTML and CSS 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 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) and visual hierarchy (layout, color and typography).

You will need to find a recipe – your own, from a web search or generated with AI tools.

The Recipe project will be graded in two parts: this week is 5% (responsive structure) and next week is 10% (applied visual hierarchy)

“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. Other info (country, notes etc.)
  6. Footer info

Student Examples:


  • finish info-card responsive design
  • work on Codecademy tutorials
  • research, invent AI recipe for next week

*I will meet with those needing a short meeting.