Pound Cake Exercise - HTML

Objective

Construct a simple HTML page giving a quick and brief intro of yours.

Description

We rarely talk about food on this website but now is the right time to talk about it.

If you're fond of baking, it's very unlikely for you to not know about the famous pound cake.

A pound cake, carrying a nice-to-read history with it, is a elementary kind of a cake, made with a standard set of four ingredients: butter, sugar, eggs, and flour. Yes, that's it!

For the curious minds out there, the name 'pound' comes from the very fact that each of these ingredients is taken to be a pound (a unit of weight measurement). So, we have 1 lb of butter, 1 lb of sugar, 1 lb of eggs, and 1 lb of flour.

But what does a pound cake have to do with HTML? Well, as you'll soon figure out, it has everything to do with it!

Anyways, as stated before, a pound cake requires the following ingredients, given in a bit more detail: unsalted, cultured butter; granulated white sugar; eggs; and finally wheat flour.

The instructions are fairly simple to follow but pretty technical to master:

Preheat oven to 330°F (165°C).
Add softened butter into a bowl and start creaming it with a whisker or an electric beater.
Once sufficiently aerated, add sugar and cream again for a minute or two.
One-by-one add the eggs and cream the batter in each addition.
Finally, add the flour and gently fold the batter back and forth into the flour until everything combines.
Put in a baking pan and bake at 330°F (165°C) for 60 - 70 mins.
Once baked, let the cake cool on a wire rack for 10 - 15 mins before serving it.

Meanwhile impatiently wait for 60 - 70 mins before you finally get a decadent delight to eat. (But don't eat all of it!)

By the way, if you're a baking expert and feel that some of the instructions given here are a bit fuzzy, please spare us, for we are just beginning to learn how to bake cakes. Well, we must say that baking is a great activity.

In this exercise, you have to construct an HTML document detailing how to make a pound cake from scratch.

Here are a couple of aspects you should take note of in the created document.

The title must read 'Pound Cake'. The document's content should begin with an <h1> element reading this same text 'Pound Cake', followed by a paragraph to specify its baking time in the format 'Baking time: [time] mins', where [time] refers to the time. Also note that the text '[time] mins' should be formatted as bold.

Up next, you should have a section showcasing the heading 'Ingredients' and, obviously as you could guess, a list of the ingredients needed (as described above).

Finally, you should have a section showcasing the heading 'Instructions' and a list of the instructions to follow to make a masterpiece pound cake. These instructions should be copied from the list above.

And that's it.

For a further source of reference, here's the document that you ought to create:

Live Example

Start working on the exercise while having a slice of pound cake.

What could be a better pair than this?

View Solution

New file

Inside the directory you created for this course on HTML, create a new folder called Exercise-4-Pound-Cake and put the .html solution files for this exercise within it.

Solution

As uptil now, the given exercise is fairly simple to solve. It shouldn't us take long to get done with it. Let's begin.

We'll start with the very basic boilerplate:

<!DOCTYPE html>
<html>
<head>
   <!--Head content-->
</head>
<body>
   <!--Body content-->
</body>
</html>

The title is meant to be 'Pound Cake' so let's give it in the <head> section. Also, let's put the main heading inside the <body>:

<!DOCTYPE html>
<html>
<head>
   <title>Pound Cake</title>
</head>
<body>
   <h1>Pound Cake</h1>
</body>
</html>

Let's now add the baking time. As mentioned in the exercise, the baking time is 60 - 70 mins, and because we have to format the time as bold, here's what we get:

<!DOCTYPE html>
<html>
<head>
   <title>Pound Cake</title>
</head>
<body>
   <h1>Pound Cake</h1>
   <p>Baking time: <b>60 - 70 mins</b></p>
</body>
</html>

So far, so good.

We're now left with the two sections, one for the ingredients and one for the instructions. Let's start with the first section of ingredients.

The heading of the section will obviously be denoted using <h2>, the next level of heading element after <h1>. And the list of ingredients, since their order doesn't matter, will be denoted using <ul>.

Here's the code for the ingredients:

<!DOCTYPE html>
<html>
<head>
   <title>Pound Cake</title>
</head>
<body>
   <h1>Pound Cake</h1>
   <p>Baking time: <b>60 - 70 mins</b></p>

   <h2>Ingredients</h2>
   <ol>
      <li>Unsalted butter</li>
      <li>Granulated white sugar</li>
      <li>Eggs</li>
      <li>Wheat flour</li>
   </ol>
</body>
</html>

Finally, let's now get done with the instructions section, which is just a matter of copy-pasting each of the instructions from the discussion above:

<!DOCTYPE html>
<html>
<head>
   <title>Pound Cake</title>
</head>
<body>
   <h1>Pound Cake</h1>
   <p>Baking time: <b>60 - 70 mins</b></p>

   <h2>Ingredients</h2>
   <ol>
      <li>Unsalted butter</li>
      <li>Granulated white sugar</li>
      <li>Eggs</li>
      <li>Wheat flour</li>
   </ol>

   <h2>Instructions</h2>
   <ol>
      <li>Preheat oven to 330°F (165°C).</li>
      <li>Add softened butter into a bowl and start creaming it with a whisker or an electric beater.</li>
      <li>Once sufficiently aerated, add sugar and cream again for a minute or two.</li>
      <li>One-by-one add the eggs and cream the batter in each addition.</li>
      <li>Finally, add the flour and gently fold the batter back and forth into the flour until everything combines.</li>
      <li>Put in a baking pan and bake at 330°F (165°C) for 60 - 70 mins.</li>
      <li>Once baked, let the cake cool on a wire rack for 10 - 15 mins before serving it.</li>
   </ol>
</body>
</html>

Here's our HTML document:

Live Example

Voila, it's just as desired.

And this completes this exercise.

Exercise: Pound Cake