WEEK 7: Responsive Design
(September 30 – October 4)

To Do This Week:

• Codecademy: Learn Intermediate CSS
  (DUE October 11 – two weeks)
• Info Card: Responsive Design  (DUE October 4 – this Friday)
• DUE Meeting (5%) (DUE October 4 – this Friday)
• Catch up with all other work by Wednesday Oct 9th – BEFORE Midterm Grades

---

Notes:

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. beware of too many borders, inside/outside colors
6. readability of text – size and contrast
7. size of h1: it should be bigger than other text
8. text-align center on text
9. difference and repetition in typography
10. color in visual hierarchy
11. style links: a:link { color: red; text-decoration: none;}, etc
12. position:  fixed, relative, absolute / no position: center
13. center block element :  margin: 0 auto;
14. center inline element : text-align: center;
15. avoid float – unless wrapping text around block element 
16. clear float – to stop the wrapping
    clear: right, left or both

---

Recipe Project Overview

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

Summary

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 11th)

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:

• 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 paths first!
• 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) 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)

Student Examples:

• http://will-luers.com/DTC/recipeprojects-355-01-fall2023.html
• http://will-luers.com/DTC/recipeprojects-355-02-fall2023.html
• Previous Recipes 01 Spring 2023
• Previous Recipes Fall 2022

Student Highlights:

• https://dtc-wsuv.org/asanders23/recipe/
• https://dtc-wsuv.org/lbaltazar23/recipe/
• https://dtc-wsuv.org/lbeltman23/recipe/
• https://dtc-wsuv.org/ecastaneda23/recipe/
• https://dtc-wsuv.org/sguo23/recipe/
• https://dtc-wsuv.org/ycolombe22/recipe/

---

IN-Class : Build Recipe HTML/CSS

“Chunk” your Recipe into parts or modules:

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

Follow along in class to Build Recipe HTML…

• Recipe Hierarchy: header/data/ingredients/steps…
• Recipe HTML/CSS Wireframe
• CSS and Responsive Design

---

Responsive Design

Notes:  wrapper, <br>, em, grid/flex

• W3Schools Responsive Tutorial
• Eric Meyer’s Reset 
• Responsive Example  | Download Zip
  this will show how to use responsive design in a grid layout. do not use this to start your recipe project. use only as a reference

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:

• garretkeizer.com
• teixido.com
• blackocean.org
• anderssonwise.com/

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

---

Info-Card Responsive Design

Info-Cards section 1
Info-Cards section 2

Info-Card: Visual Hierarchy

Read about this weeks Info-card assignment

info-card-responsive-example/
info-card-responsive-example.zip

---