Recipe Project

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%

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
  • different colored borders around block-level elements to see the functioning structure
  • uploaded to the server – check the url!
  • 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 CSS grid for layout.

 

Recipe – 10%

Following along in class to refresh about the principles and application of Visual Hierarchy, harmonious color schemes, effective typography and responsive layout for least two different device widths.

Your grade in this assignment will be based on your understanding and application of Visual Hierarchy principles.  Some are naturally better at design than others.  However, I am grading on effort, including the effort to apply design principles in your CSS styles. 

The site should have the following:

  • an index.html page inside your “recipe” folder
  • an internal or external CSS stylesheet (your choice)
  • at least one media query for changing layout from mobile to desktop
  • use of CSS grid on recipe sections for a pleasing responsive layout
  • at least three images that are responsive
  • a color scheme that works well with the recipe images
  • thoughtful detail in the typography – difference/repetition
  • a header or hero-unit designed to catch attention
  • a footer with links to sources for your recipe (a statement if you use AI tools)
  • uploaded to the server – check the url!
  • Submit url to Canvas

 

Grading Considerations

The Recipe Project will be graded on the following aspects:

  • 50%: the usability and appearance of your HTML page:
    • images and fonts load correctly
    • images are sized well
    • text and content looks formatted correctly
    • visual attractiveness and style with applied visual hierarchy
    • attention to detail in the typography
    • an appealing color scheme, using all 5 colors
    • originality: how different does it look from class demos?
  • 50%: the accuracy, neatness, and organization of your files and code:
    • HTML and CSS code is formatted and indented well
    • the syntax of code is consistent in terms of spaces, letter case, etc.
    • code has useful comments where appropriate
    • all images have “alt tags” to describe the image
    • files are organized well:
      • one HTML file per web page and one external CSS file for the entire site
      • HTML, CSS, and image files are intelligently named
    • Remember: you can use tools such as the W3C ValidatorLinks to an external site. and the HTML BeautifierLinks to an external site. to check your code!