Basic HTML

recipes recipes

My first public website utilizing basic HTML was a list of three recipes. No CSS. No JavaScript. No React. Every list item painstakingly manufactured for each item.

This project is a simple recipe website created as part of the Odin Project curriculum. It demonstrates basic HTML structure and concepts. Below are the key coding concepts used in this project:

Key Coding Concepts

HTML Structure

  • DOCTYPE Declaration: Specifies the HTML version and helps browsers render the page correctly.
  • HTML Tags: Used to create the structure of the web pages, including headings (<h1>, <h2>), paragraphs (<p>), lists (<ul>, <ol>, <li>), and links (<a>).
  • Head and Body Sections: The <head> section contains meta-information about the document, while the <body> section contains the content that is displayed to the user.
  • Anchor Tags (<a>): Used to create hyperlinks that navigate between different pages of the website.
  • Relative Paths: Used in the href attribute of anchor tags to link to other pages and images within the project directory.

Images

  • Image Tags (<img>): Used to display images on the web pages. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image.

Lists

  • Unordered Lists (<ul>): Used to create bullet point lists.
  • Ordered Lists (<ol>): Used to create numbered lists.
  • List Items (<li>): Used to define individual items within both unordered and ordered lists.

Semantic HTML

  • Headings (<h1>, <h2>): Used to define headings and subheadings, which help structure the content and improve accessibility.
  • Paragraphs (<p>): Used to define blocks of text.

Comments

  • HTML Comments (<!-- -->): Used to add comments within the HTML code that are not displayed to the user. These are useful for documentation and code organization.

Project Structure

  • index.html: The main page of the website that links to individual recipe pages.
  • recipes/: A directory containing individual HTML files for each recipe.
  • images/: A directory containing image files used in the project.

How to View the Project

  1. Clone the repository to your local machine.
  2. Open index.html in a web browser to view the main page.
  3. Navigate through the recipe links to view individual recipe pages.

This project serves as a foundational exercise in understanding and applying basic HTML concepts to create a simple, multi-page website.

#HTML

Read Next

Introducing CSS

In comes CSS