Skip to content

Week 4 Coding Practice

Purpose

Turn a recipe into a webpage by practicing semantic mark up, and HTML lists.

Textbook Reference

Chapter 5: Marking up Text

Instructions

Directory Structure

  1. Download the practice04 and save it into your practice folder for this course.
  2. Unzip the file and delete the .zip file (this is no longer needed).
  3. Open the webpage, index.html in VS Code, and the browser.

Find a Recipe

  1. Find a recipe online (or use one of your own). You will be turning your recipe into a webpage!

HTML Code

Add Semantic Landmarks

  1. Add <header>, <main>, and <footer> element inside your <body> element. Remember to indent correctly.

Add <header> Content

  1. Place an <h1> element in your <header> and use the name of your recipe as the content.
  2. End the <header> with a horizontal rule

Add <main> Content

  1. Add three heading elements to create headings for Description, Ingredients, and Directions.

    • Be mindful of which you need to use each time.
    • Don’t skip headings, this is a violation of accessibility.
    • Ensure you have only one main heading (<h1>)
    • When using subheadings (<h2> -<h6>) make sure you’re accurately describing your content hierarchy. For example, Ingredients would not be a subheading for Description.

    head, header, and heading elements

    Pay attention to the difference between <head>, <header>, and headings (<h1> - <h6>). They can be confusing at first, they sound so similar.

  2. Under the Description heading, provide a short paragraph describing the recipe.

  3. List the Ingredients in an unordered list.

    • Any fractions must be done using HTML Character Entities.

    • To find your fraction’s character entity, use Google to search for it. As an example, if you wanted to know the character entity for ¾, you would search “HTML Character Entity for 3/4”

    • For more about character escapes and character entities, review Chapter 5: Marking Up Text.

  4. List the Directions in an ordered list.

Add <footer> Content

  1. Start the <footer> with a horizontal rule
  2. In a <p> (paragraph), cite where the recipe is from.
  3. The location of the recipe should be in emphasis <em>

Bonus!

  1. Add an image to your webpage.

Sample Output

Do Not Use the Sample Below for Your Practice

You must use one of your own recipes or one you find on the internet for this practice. Do not use the Chicken Tikka Masala recipe.

sample output of practice 4

Validation

  1. Go to https://validator.w3.org/
  2. Click on the Validate by File Upload
  3. Click on the Choose file button and navigate to the location of your HTML document.
  4. Click the Check button
  5. Print it as a PDF and save it into a folder named validations in your practice04 folder
  6. Name the PDF indexValidation.pdf.

Grading Criteria

  • The correct file directory structure exists in the practice04 folder along with the HTML validation.
  • All course coding standards have been followed. Standards 1 - 15 apply.
  • The correct HTML elements are used.
  • HTML character entities have been used correctly where appropriate.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 4 in Brightspace (Module 1 > Week 4 > Week 4 Coding Practice).
  2. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the Comments section.
  3. Answer the questions in the Brightspace.

Weekly Reflections - Tip

You may find it helpful to copy and paste the questions below in word document, or other text editor, and writing your answers there before pasting them into Brightspace.

1. How are you doing? Are you encountering any issues preventing you from completing this week's assignments? What can I do to better support you this week?


2. What did you find particularly insightful this week?


3. What part of the learning or coding process did you find most challenging? How did you overcome it?


4. What questions (if any) do you have about the material covered this week?


5. In your own words, explain the difference between a block-level element and a inline element? Give examples of both.

Part 2: Upload .zip

  1. Compress your entire practice04 folder to a .zip (zipped) file.

  2. Do not zip the practice or Web Development folders. You should have the following files/folder in the zip file:

    • images (folder)
    • stylesheets (folder)
    • validations (folder)
      • 1 HTML validation file
    • index.html

  3. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.

  4. Click "Submit"