odin-recipes

✅ Solution + Preview ✅

You can preview the website for this project here: https://shivkumar98.github.io/odin-recipes/

📜 Assignment 📜

Create a new repo for this project on GitHub called odin-recipes

🔴 Iteration 1 - Initial structure

Create a directory called odin-recipes, and create a index.html file
Create a h1 heading "Odin Recipes"

🔴 Iteration 2 - Recipe Page

Within this directory, create a directory named recipes
Create a HTML file in the recipes directory, e.g. lasagna.html
Create a h1 heading with the recipes name
Within the index.html page, add a link to the recipe page. E.g write out <a href="recipes/recipename.html">Recipe Title</a> below the heading

🔴 Iteration 3 - Recipe Page Content

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.

🔴 Iteration 4 - Add More Recipes

Add two more recipes with identical page structures
Remember to add a link to the new recipes on the index page

👨‍💻 Assignment Notes 👨‍💻

I create a new repo on github
I copy the SSH link: [email protected]:shivkumar98/odin-recipes.git

$ git clone [email protected]:shivkumar98/odin-recipes.git

I create the index.html file in the odin-recipes directory:

$ 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 recipes and 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.html file 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 main and click save:

I can visit my publish website using: https://shivkumar98.github.io/odin-recipes/
My website works!:

shivkumar98 / odin-recipes Goto Github PK

odin-recipes's Introduction

odin-recipes

✅ Solution + Preview ✅

📜 Assignment 📜

🔴 Iteration 1 - Initial structure

🔴 Iteration 2 - Recipe Page

🔴 Iteration 3 - Recipe Page Content

🔴 Iteration 4 - Add More Recipes

👨‍💻 Assignment Notes 👨‍💻

odin-recipes's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent