Day HTML

Today, I built a website
Putting together the cumulative knowledge from the last 5 days, I built a functional recipe book site, with a touch of CSS for styling.

Link to site- Ofameh_Recipe_Site

HTML Block of code:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Recipe Book</title>
    <link rel="stylesheet" href="styles.css">
  
  
    <header>
      <h1>Ofameh's Recipe Book</h1>
    </header>
    <nav>
      <ul>
        <li>
          <button onclick="location.href='#breakfast';">Breakfast</button>
        </li>
        <li>
          <button onclick="location.href='#lunch';">Lunch</button>
        </li>
        <li>
          <button onclick="location.href='#dinner';">Dinner</button>
        </li>
        <li>
          <button onclick="location.href='#breakfast';">Dessert</button>
        </li>
        <li>
          <button onclick="location.href='#contact';">Contact</button>
        </li>
      </ul>
    </nav>
    <main>
      <section id="breakfast">
        <h2>Breakfast Recipes</h2>
        <article>
          <h3>Day  HTML</h3>
          <img src="./images/pancake.jpg" alt="Day  HTML">
          <h4>Ingredients:</h4>
          <ul>
            <li>2 cups all-purpose flour</li>
            <li>2 tablespoons sugar</li>
            <li>2 teaspoons baking powder</li>
            <li>1 teaspoon baking soda</li>
            <li>1/2 teaspoon salt</li>
            <li>2 cups buttermilk</li>
            <li>2 large eggs</li>
            <li>1/4 cup melted butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>In a bowl, mix the dry ingredients together.</li>
            <li>In another bowl, whisk the wet ingredients together.</li>
            <li>Combine the dry and wet ingredients and mix until smooth.</li>
            <li>Heat a griddle over medium heat and grease it lightly.</li>
            <li>
              Pour batter onto the griddle and cook until bubbles form on the
              surface.
            </li>
            <li>Flip and cook until golden brown on the other side.</li>
          </ol>
        </article>
      </section>
      <section id="lunch">
        <h2>Lunch Recipes</h2>
        <article>
          <h3>Grilled Cheese Sandwich</h3>
          <img src="./images/grilled_cheese.jpg" alt="Grilled Cheese Sandwich">
          <h4>Ingredients:</h4>
          <ul>
            <li>2 slices of bread</li>
            <li>2 slices of cheese</li>
            <li>Butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Butter one side of each slice of bread.</li>
            <li>
              Place one slice of bread, buttered side down, on a skillet over
              medium heat.
            </li>
            <li>
              Top with cheese and the other slice of bread, buttered side up.
            </li>
            <li>
              Cook until the bread is golden brown and the cheese is melted,
              flipping once.
            </li>
          </ol>
        </article>
      </section>
      <section id="dinner">
        <h2>Dinner Recipes</h2>
        <article>
          <h3>Spaghetti Bolognese</h3>
          <img src="/images/spaghetti_bolognesse.webp" alt="Spaghetti Bolognese">
          <h4>Ingredients:</h4>
          <ul>
            <li>200g spaghetti</li>
            <li>2 tablespoons olive oil</li>
            <li>1 onion, chopped</li>
            <li>2 garlic cloves, minced</li>
            <li>400g ground beef</li>
            <li>1 can of tomatoes</li>
            <li>2 tablespoons tomato paste</li>
            <li>1 teaspoon dried oregano</li>
            <li>Salt and pepper to taste</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Cook the spaghetti according to package instructions.</li>
            <li>
              Heat olive oil in a pan and sauté the onion and garlic until
              softened.
            </li>
            <li>Add the ground beef and cook until browned.</li>
            <li>
              Stir in the tomatoes, tomato paste, and oregano. Simmer for 20
              minutes.
            </li>
            <li>Season with salt and pepper.</li>
            <li>Serve the sauce over the spaghetti.</li>
          </ol>
        </article>
      </section>
      <section id="dessert">
        <h2>Dessert Recipes</h2>
        <article>
          <h3>Chocolate Cake</h3>
          <img src="./images/chocolate_cake.jpg" alt="Chocolate Cake">
          <h4>Ingredients:</h4>
          <ul>
            <li>1 and 3/4 cups all-purpose flour</li>
            <li>1 and 1/2 cups sugar</li>
            <li>3/4 cup cocoa powder</li>
            <li>1 and 1/2 teaspoons baking powder</li>
            <li>1 and 1/2 teaspoons baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 large eggs</li>
            <li>1 cup milk</li>
            <li>1/2 cup vegetable oil</li>
            <li>2 teaspoons vanilla extract</li>
            <li>1 cup boiling water</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Preheat your oven to 350°F (175°C) and grease a cake pan.</li>
            <li>In a large bowl, combine the dry ingredients.</li>
            <li>
              Add the eggs, milk, oil, and vanilla, and beat on medium speed for
              2 minutes.
            </li>
            <li>Stir in the boiling water (batter will be thin).</li>
            <li>Pour the batter into the prepared pan.</li>
            <li>
              Bake for 30-35 minutes, or until a toothpick inserted into the
              center comes out clean.
            </li>
          </ol>
        </article>
      </section>

      <section id="contact">
        <h2> Contact Us </h2>
        <article>
          <b> Want More Recipes </b> <br>
         <label for="subscribe"> Subscribe to our newsletter </label>
         <input type="checkbox" id="subscribe" name="subscribe"> <br>
         <br>
         Shoot us an email: <a href="mailto:osowoofameh@gmail.com" target="_blank"> <button> Email </button> </a> <br>
         <br>
         Catch Us on X: <a href="https://x.com/trader_mkk" target="_blank"> <button> Twitter </button></a>
         <br>
        </article>
      </section>
    </main>
    <footer>
      <p>
        <b>
          © 2024 Ofameh <br>
          All rights reserved.</b>
      </p>
    </footer>
  

CSS Block of code-

  body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header,
main,
footer {
  padding: 20px;
  margin: 10px;
}

header {
  background-color: black;
  color: white;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav ul li {
  margin: 0 10px;
}

section {
  margin-bottom: 20px;
}

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
} 

Putting together all I have learnt so far on day 5 to build this has been fulfilling to me because the whole point of this exercise is project-based learning.
So actually doing this for 5 days and being able to build a site as good as that means a lot to me

That being said, Days 6 - 10 will feature what I call websites for days, here each day I will build a site which will progressively get harder and more complex.
Be there!

The above is the detailed content of Day HTML. For more information, please follow other related articles on the PHP Chinese website!