To Do This Week:
- Codecademy: Learn Intermediate CSS
(due October 13 – two weeks) - Info Card: Responsive Design
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;
- too many borders, inside/outside colors
- readability of text – size and contrast
- 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
- 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
Responsive Design
- W3Schools Responsive Tutorial
- Browser Width Chrome extension
- Eric Meyer’s Reset 2.0
- CSS Grid Demo
- 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-Card: Visual Hierarchy
Read about this weeks Info-card assignment
info-card-responsive-example.zip
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.
- ChatGPT
chat - Bing
search/chat - Midjourney
image generation - Dall-e
image generation
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 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:
- 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 list for the url paths”
https://will-luers.com/DTC/recipeprojects-355-01-fall2023.html
https://will-luers.com/DTC/recipeprojects-355-02-fall2023.html - 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)
“Chunk” your Recipe into parts:
- Header/”Hero-unit” (title, image, description)
- Ingredients
- Data (cook time, tools, nutrition, diet)
- Steps/Instructions
- Other info (country, notes etc.)
- Footer info
Student Examples:
WORKSHOP:
- 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.