To Do This Week
- Codecademy: Learn Intermediate CSS (Due October 11 – two weeks)
- Info Card: Responsive Design (Due October 4 – this Friday)
- Mandatory Midterm Meeting (5%) (Due October 4 – this Friday)
- Catch up on all other work by Wednesday, October 9th – BEFORE Midterm Grades
Notes
View Blackbird Projects:
Common Issues
- Clear browser cache to see changes.
- URL format:
server + user folder + project folder
. - Use a wrapper to control width (
max-width: 1000px
) and alignment of children. - Remove bullets on centered lists:
list-style-type: none;
- Beware of excessive borders and color contrast issues.
- Ensure readability of text: size and contrast.
- Ensure
h1
is larger than other text. - Center text with
text-align: center;
. - Focus on typographic differences and repetition.
- Use color for visual hierarchy.
- Style links:
a:link { color: red; text-decoration: none; }
- Position elements using
fixed
,relative
, orabsolute
; avoidposition: center
. - Center block elements:
margin: 0 auto;
. - Center inline elements:
text-align: center;
. - Avoid float unless wrapping text around a block element.
- Clear floats with
clear: left/right/both;
.
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 October 11)
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 or flexbox
- At least three images
- Uploaded to the server with correct URL paths
- 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:
- Header/Hero Unit: Title, image, description
- Ingredients
- Data: Cook time, tools, nutrition, diet
- Steps/Instructions
- Additional Info: Country, notes, etc.
- Footer
Follow along in class:
- Recipe Hierarchy
- Recipe HTML/CSS Wireframe
- CSS and Responsive Design
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:
Info-Card Responsive Design
Info-Card Visual Hierarchy: Read about this week’s Info-Card assignment.
Examples:
Mandatory Midterm Meeting (5%)
Due by October 4th
Set up a mid-term meeting by messaging me on Slack. Choose a 5-10 minute slot (after class) or a 15-30 minute slot (via Zoom).
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:
- clearing browser cache to see changes
- url: server + user folder + project folder
- use a wrapper to control width (under 1000px) and alignment of children
- remove bullets on centered lists: list-style-type: none;
- beware of too many borders, inside/outside colors
- readability of text – size and contrast
- size of h1: it should be bigger than other text
- text-align center on text
- difference and repetition in typography
- color in visual hierarchy
- style links: a:link { color: red; text-decoration: none;}, etc
- position: fixed, relative, absolute / no position: center
- center block element : margin: 0 auto;
- center inline element : text-align: center;
- avoid float – unless wrapping text around block element
- 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:
- Header/”Hero-unit” (title, image, description)
- Ingredients
- Data (cook time, tools, nutrition, diet)
- Steps/Instructions
- Other info (country, notes etc.)
- 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:
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
Mandatory Midterm Meeting (5%)
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.