To Do This Week:
- Codecademy: Learn Intermediate CSS
(due October 13 – two weeks) - Recipe: Responsive Structure (due October 13)
- Find/create your Recipe
Notes:
Recipe Responsive Structure – 5% (DUE Oct 13th)
- Find/Create your recipe. You will need to find a recipe – your own, from a web search or generated with AI tools.
- Open SublimeText to start the html…
- Create the Recipe HTML by following along with me in class
We are building the HTML 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 or wireframe 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). The Recipe project will be graded in two parts: this week is 5% (responsive structure) and next week is 10% (applied visual hierarchy)
Recipe hierarchy:
- Header/”Hero-unit” (title, image, description)
- Ingredients
- Data (cook time, tools, nutrition, diet)
- Steps/Instructions
- Other info (country, notes etc.)
- Footer info
STUDENT EXAMPLES:
Recipe – Design for Visual Hierarchy
Visual Hierarchy Principles:
LAYOUT:
- Does the layout bring attention to the parts of the recipe and still expresses a whole?
- Does the layout show enough of the content “above the scroll” to be meaningful?
- Is the wrapper or container under 1200px?
- Have you added Eric Meyers reset to the top of the stylesheet before your own default styles?
- Is your stylesheet mobile first, followed by media queries for larger sizes?
- FYI:child elements of a Grid should not have CSS margin or width applied
COLOR:
- Do you have a color scheme (5 colors) for your site design? Use Adobe’s Kuler and put values at the top of your stylesheet.
- FYI: At the top of your stylesheet, make a comment that lists the hexadecimal values for the color scheme colors
- Is the color scheme applied so that to the content and the hierarchy are clear?
TYPOGRAPHY:
- Is there a rhythm of repetition and difference in the typography?
- Do you need more padding around text? Or more careful alignment of block elements?
- Find a good pairing of fonts (serif and san-serif) on Google Fonts
- Apply these fonts in the stylesheet for headings and paragraphs
CONTENT (image and text):
- Do the images fit proportionately your design and content?
- Evaluate the image and h1 in the header or hero-unit. Does it stand out and bring the reader into the content?
- Is the hero image framed properly for all device widths?
- Evaluate how color, imagery, layout and typography work together to communicate the site content.
- Did you add “alt” text to images?
- Do you have a footer with link(s) to your source(s)?
CODE (HTML and CSS)
- Did you validate your project?(validate early and often!)
- Is your stylesheet is mobile first, followed by media queries for larger sizes?
- Did you format your html and css so that it is readable? Tab in for nested elements, keep alignments. Use beautify CSS or beautify HTML.