- You can preview the website for this project here: https://shivkumar98.github.io/odin-recipes/
- Create a new repo for this project on GitHub called
odin-recipes
- Create a directory called
odin-recipes, and create aindex.htmlfile - Create a
h1heading "Odin Recipes"
- Within this directory, create a directory named
recipes - Create a HTML file in the recipes directory, e.g.
lasagna.html - Create a
h1heading with the recipes name - Within the
index.htmlpage, add a link to the recipe page. E.g write out<a href="recipes/recipename.html">Recipe Title</a>below the heading
-
An image of finished dish under h1 heading. You can find images of the dish from this recipe site
-
Under the image, there should be an appreopiate sized "Description" heading followed by a paragraph describing the recipe
-
Under the Description, add an "Ingredients" heading followed by an unordered list of the ingredients
-
Add a "Steps" heading followed by an ordered list of the steps needed for the recipe.
- Add two more recipes with identical page structures
- Remember to add a link to the new recipes on the index page
-
I create a new repo on github
-
I copy the SSH link: git@github.com:shivkumar98/odin-recipes.git
$ git clone git@github.com:shivkumar98/odin-recipes.git- I create the
index.htmlfile in theodin-recipesdirectory:
$ touch index.html- I open this file in VS Code and create the boilerplate and heading:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Recipe Page</title>
</head>
<body>
<h1>Odin Recipes</h1>
</body>
</html>- I make a new directory
recipesand create the first recipe page:
$ mkdir recipes
$ cd recipes/
$ touch lasagna.html
$ code lasagna.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lasagna Recipe</title>
</head>
<body>
<h1>Lasagna</h1>
</body>
</html>- I add a link to the index.html file:
<body>
<h1>Odin Recipes</h1>
<a href="recipes/lasagna.html">Lasagna</a>
</body>- I update the
lasagna.htmlfile to include the image, ingredients and steps. The HTML now looks like:
- I create another recipe file (
sandwich-toastie.html) which looks like:
-
I update the image for the toastie and update the index page so its easier to use!
-
I now want to publish my website using GitHub pages. In order to do this, the main HTML file should be named as
index.html. -
I go to the Setting section of my repo on GitHub, go to the Pages tab and then set the branch to
mainand click save:
-
I can visit my publish website using: https://shivkumar98.github.io/odin-recipes/
-
My website works!:
