Responsive Web Foundations / Guided workshop

Build a recipe people can follow

Create a tomato-toast recipe. Include a supplied illustration, ingredients, ordered instructions and a small servings table. The image is an illustration, not a photograph.

Before starting: m2-l1, m2-l2, m2-l3

Get started

1. Extract the starter ZIP. Keep toast.svg alongside index.html. Add a meaningful title and one main heading.
2. Add a visible skip link to main and a page nav linking to #ingredients and #method.
3. Place the supplied image in a figure. Use accurate alt text, width and height attributes, and a short figcaption explaining the serving suggestion.
4. Add an unordered list of at least three ingredients and an ordered list of at least three method steps. Give these sections h2 headings.
5. Add a table with a caption, column headings and at least two rows of data comparing servings and slices of bread. Finish with a footer credit.
6. Read the page in source order, test the links and run the checks.

Requirements

• Use a complete English HTML document with one main, one h1 and coherent heading levels.
• Include a header/nav, a footer and a skip link targeting main.
• Use toast.svg with nonempty alt text, intrinsic width/height and a visible figure caption.
• Use ul for at least three ingredients and ol for at least three method steps.
• Provide a captioned data table with column headings and two data rows.
• Navigation must reach #ingredients and #method.

Manual checks

• Open your saved index.html directly in a browser. Follow every link with Tab and Enter, keeping focus visible.
• Read the headings and content in source order. Check that the wording and alternative text match the content.

Hints

Explain your decision

What information is available from the source order that would be lost if this page were one large image?