Day HTML

WBOY
Release: 2024-08-08 09:05:20
Original
920 people have browsed it

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:

  My Recipe Book  

Ofameh's Recipe Book

Breakfast Recipes

Day HTML

Day HTML

Ingredients:

  • 2 cups all-purpose flour
  • 2 tablespoons sugar
  • 2 teaspoons baking powder
  • 1 teaspoon baking soda
  • 1/2 teaspoon salt
  • 2 cups buttermilk
  • 2 large eggs
  • 1/4 cup melted butter

Instructions:

  1. In a bowl, mix the dry ingredients together.
  2. In another bowl, whisk the wet ingredients together.
  3. Combine the dry and wet ingredients and mix until smooth.
  4. Heat a griddle over medium heat and grease it lightly.
  5. Pour batter onto the griddle and cook until bubbles form on the surface.
  6. Flip and cook until golden brown on the other side.

Lunch Recipes

Grilled Cheese Sandwich

Grilled Cheese Sandwich

Ingredients:

  • 2 slices of bread
  • 2 slices of cheese
  • Butter

Instructions:

  1. Butter one side of each slice of bread.
  2. Place one slice of bread, buttered side down, on a skillet over medium heat.
  3. Top with cheese and the other slice of bread, buttered side up.
  4. Cook until the bread is golden brown and the cheese is melted, flipping once.

Dinner Recipes

Spaghetti Bolognese

Spaghetti Bolognese

Ingredients:

  • 200g spaghetti
  • 2 tablespoons olive oil
  • 1 onion, chopped
  • 2 garlic cloves, minced
  • 400g ground beef
  • 1 can of tomatoes
  • 2 tablespoons tomato paste
  • 1 teaspoon dried oregano
  • Salt and pepper to taste

Instructions:

  1. Cook the spaghetti according to package instructions.
  2. Heat olive oil in a pan and sauté the onion and garlic until softened.
  3. Add the ground beef and cook until browned.
  4. Stir in the tomatoes, tomato paste, and oregano. Simmer for 20 minutes.
  5. Season with salt and pepper.
  6. Serve the sauce over the spaghetti.

Dessert Recipes

Chocolate Cake

Chocolate Cake

Ingredients:

  • 1 and 3/4 cups all-purpose flour
  • 1 and 1/2 cups sugar
  • 3/4 cup cocoa powder
  • 1 and 1/2 teaspoons baking powder
  • 1 and 1/2 teaspoons baking soda
  • 1 teaspoon salt
  • 2 large eggs
  • 1 cup milk
  • 1/2 cup vegetable oil
  • 2 teaspoons vanilla extract
  • 1 cup boiling water

Instructions:

  1. Preheat your oven to 350°F (175°C) and grease a cake pan.
  2. In a large bowl, combine the dry ingredients.
  3. Add the eggs, milk, oil, and vanilla, and beat on medium speed for 2 minutes.
  4. Stir in the boiling water (batter will be thin).
  5. Pour the batter into the prepared pan.
  6. Bake for 30-35 minutes, or until a toothpick inserted into the center comes out clean.

Contact Us

Want More Recipes


Shoot us an email:

Catch Us on X:

© 2024 Ofameh
All rights reserved.

Copy after login

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; }
Copy after login

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!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!