In this iteration, an initial structure is set up for the recipe collection. An index.html file is created with basic HTML boilerplate code. The file includes an <h1> heading with the title "Odin Recipes."
The second iteration focuses on creating a recipe page template. A new directory named /recipes is created within the project directory. Inside this directory, an HTML file is created for each recipe, named after the dish it contains. For example, lasagna.html can be used as a template for a lasagna recipe.
The index.html file is updated to include links to the recipe pages. Each recipe link is added under the "Odin Recipes" heading using the <a> tag.
In this iteration, the recipe pages are enhanced with more content. Each recipe page should include the following:
- An image of the finished dish.
- A "Description" heading followed by a paragraph or two describing the recipe.
- An "Ingredients" heading followed by an unordered list of the ingredients needed for the recipe.
- A "Steps" heading followed by an ordered list of the steps needed to make the dish.
The final iteration involves adding two more recipes to the collection. These recipes should follow the same page structure as the existing recipe page. The index.html file should be updated to include links to the newly added recipes. Consider using an unordered list to organize the recipe links and prevent them from appearing on a single line.
Once the project is completed, the following skills will be demonstrated:
- Creating a basic HTML structure.
- Linking between pages using HTML.
- Adding and displaying images.
- Structuring content with headings and paragraphs.
- Creating lists for ingredients and steps.
- Organizing content within directories.
This project provides a foundation for building a more advanced recipe collection, with the possibility of adding additional features such as search functionality, responsive design, and interactive elements.