Project 1 - Odin Recipes

Preamble

In this project, I am aiming to create a basic set of HTML pages which together comprise a website which details a number of different recipes.

Before reading the Odin project description, I would try and build something something like:

  • index.html
    • recipe1.html
    • recipe2.html
    • recipe3.html

index.html will have an unordered list of links to the different recipes, with the recipe pages themselves having a backlink to index.html.

After reading Odin, it looks like the idea is pretty bang-on.

Project stages

Stage 1: Create index.html boilerplate and heading

Pretty easily accomplished using the VSCode boilerplate shortcut.

Stage 2: Recipe Pages

Create a recipe page and have a link to it from index.html

It directed me to create a folder called "recipes" and store the recipe pages inside there, which I didn't expect/wouldn't have thought of.

Finding it easier to create files using "touch" from the command line than clunking around with my keyboard in the vscode file manager. (Note: Touch lets you specify folders in a filepath, eg: "touch recipes/lasagna.html")

Ok, got a "lasagna" page set up and an unordered list of recipes that link to the relevant recipe pages. One thing I learned - relative links to files shouldn't be preceded with "/" (obvious in retrospect lol)

Stage 3: Making Other Pages

Pretty straightforward. Main thing is vim working weirdly in HTML pages from what I can tell, but its probably just me doing something wrong.

Conclusion

Neat little project, has definitely upped my confidence in building basic HTML pages. I am NOT looking forward to CSS though lmao.