Skip to content

Latest commit

 

History

History

1-Recipes

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
css
css
 
 
recipes
recipes
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

Odin Recipes - HTML Practice Project

This project is part of the Foundation path in The Odin Project. In this assignment, I built a basic recipe website to reinforce and apply my HTML knowledge. You can see the page here.

Home Page

SCR-20230908-pfpu

Recipes Page

SCR-20230908-pfuv

Project Overview

The objective of this project was to create a simple recipe website. It consists of an index page with links to various recipe pages. Although the project doesn't focus on design (it's more about HTML structure), it serves as a foundation for future CSS styling. The key tasks involved in this project were:

Iteration 1: Initial Structure

  • Created a new directory for the project.
  • Created an index.html file with the standard HTML boilerplate.
  • Added an <h1> heading with the title "Odin Recipes" to the index page.

Iteration 2: Recipe Page

  • Created a directory named "recipes" within the project.
  • Inside the "recipes" directory, created individual HTML files for recipes (e.g., lasagna.html).
  • Linked each recipe page from the index page using HTML anchor tags.

Iteration 3: Recipe Page Content

  • Designed each recipe page with:
    • An image of the finished dish.
    • Descriptive content about the recipe.
    • Ingredients list.
    • Step-by-step instructions.

Iteration 4: Adding More Recipes

  • Added two additional recipes, maintaining the same page structure.
  • Created links to the new recipes on the index page, organized in an unordered list for clarity.

Skills Demonstrated

Throughout this project, I demonstrated the following skills and knowledge:

  • Creating HTML files and structuring web pages.
  • Using HTML tags and elements to organize content.
  • Linking between web pages.
  • Including images and text.
  • Organizing content in lists (both ordered and unordered).
  • Version control using Git and GitHub, including setting up repositories and pushing changes.

Viewing the Project

You can access the completed project on the web by clicking here

Project Completion

While the project may not have an elaborate design, it serves as a fundamental exercise in structuring web content with HTML. Future iterations may involve adding CSS to enhance the visual appeal of the website, but for now, the focus is on mastering the basics of HTML.

This project marks an important step in my journey toward becoming proficient in web development, and I look forward to building upon this foundation in future projects.