miamiu-ims222a-fall2021 / recipe-project-starter

p1e1-recipe-markup

INTRODUCTION

This is the first exercise in a project arc to create an online recipe book for the Oxford Farmers Market. Over the course of this project, we'll practice how to markup content with meaningful (semantic) HTML, adding images and links, and creating a design with CSS.

In this first exercise, we'll start with the basics of marking up three recipes with valid HTML.

EXERCISE INSTRUCTIONS

Do the following for each of the three recipes...

1. Set your document level tags.
   • Open your html-template.html file.
   • Copy lines 1-14 — this includes the section and opening tags.
   • Paste this code at beginning on each recipe
   • Copy lines 20-22
   • Paste this code at the end of each recipe file
2. Markup the Content
   • Start with the headers.
     • Create an <h1> header for title of the recipe. (This is your page title)
     • Create <h2> headers for your page sections (recipe history, ingredients, and instructions.)
   • Mark up your recipe information paragraphs <p>.
   • Create your lists
     • Ingredient will be an unordered list (bulleted) <ul><li>.
     • Instruction steps will be an ordered list (numbered) <ol><li>.
3. Add the recipe image
   • Above your page title on each recipe, add your image.
   • <img> element tag requires two attributes...
     • alt="" describes the image content.
     • src="" for image location
   • Remember your image is located within a folder!
4. Give Credit (cite your sources)
   • At the end of each recipe, you'll find information on where the recipe and images were from.
   • You'll also find URLs for each source
   • Make the credit statement into a link using the source URL.
   • Remember that the for your links requires the href="" attribute to become a link.
   • You can make these credit statements either At the bottom of the recipe HTML, create a paragraph with links to the source of your recipe and image.
   • Last, but not least, give yourself credit (HTML by...)
5. Check for errors.
   • VSCode automatically checks your code as you type it.
   • At bottom left corner of the editing window you'll see the error/warning indicators (x-circle and warning symbols)
   • If each is a 0, congrats you have no errors!
   • If there are errors, click this indicator and a panel will slide up showing you the list of errors to correct.
6. Submit your work for review
   • When completed submit a "pull request" via GitHub. This will send it to me for review and grading.

GRADING AND RESUBMISSION

• This is a 15 point exercise.
• 5 points for each recipe. I'll deduct 0.5 to 1 point for each errors.
• If your HTML is perfect, you get full points.
• In your grading feedback, I'll give tips on how to fix errors.
• These comments will mostly be line-by-line in your GitHub repository for this assignment.
• Version 1.1 resubmit will be your submission for exercise 2. I will back-grade your improvements.