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:
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
</head>
<body>
<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</a></button>
</li>
<li>
<button onclick="location.href='#dinner';">Dinner</a></button>
</li>
<li>
<button onclick="location.href='#breakfast';">Dessert</a></button>
</li>
<li>
<button onclick="location.href='#contact';">Contact</a></button>
</li>
</ul>
</nav>
<main>
<section id="breakfast">
<h2>Breakfast Recipes</h2>
<article>
<h3>Pancakes</h3>
<img src="./images/pancake.jpg" alt="Pancakes" />
<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>
</body>
</html>
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!
Top comments (0)