Lemon Drizzle Cake Recipe (HTML Task)

lemon-drizzle-cakeIn this blog post we are going to help Elian save his favourite cake recipe as a web page. Elian has already typed all the instructions for his lemon drizzle cake recipe but needs your help to format how the text appears on the page. To help him improve the look and feel of his page you will need to complete the six tasks listed below.

But first let’s look at Elian’s HTML page so far:

See the Pen
Lemon Drizzle Cake Recipe
by 101 Computing (@101Computing)
on CodePen.


To edit Elian’s code, you will need to click on the “Edit on codepen” button in the top right corner above.

Your Tasks


Task 1: HeadingsTask 2: Bullet pointsTask 3: ColoursTask 4: Formatting textTask 5: HyperlinksTask 6: Your turn

Task 1: Headings and Paragraphs


In order to give this page more structure we are going to add some headings, subheadings and paragraphs. We will do so using the following HTML tags:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>
<h6>Heading 6</h6>


<P>Paragraph</P>


Your task is to update Elian’s code by adding some <h1> tags for the main heading:

  • Lemon Drizzle Cake Recipe

And some <h2> tags for the subheading of the page:

  • About the Recipe:
  • Ingredients:
  • Recipe for the cake:
  • Recipe for the lemon drizzle:
  • Finding more recipes online:

All other pieces of text should be displayed as paragraphs using <p> tags.

Note that, within a paragraph, we can also force the text to go to the next line using the <br/> tag.
Watch Video Tutorial #1

Bullet Points Lists


In HTML, you can create a list of bullet points using both <ul> tags and <li> tags as follows.

  • First Bullet point!
  • Second Bullet point!
  • Third Bullet point!

Your task consist of displaying all the ingredients using bullet points so that it appears on the web page as follows:

  • 225g unsalted butter
  • 180g caster sugar
  • 4 eggs
  • 225g self-raising flour
  • 1 lemon, zested
  • 2 lemons, juiced
  • 65g caster sugar

You can also use a similar approach to create a numbered list as opposed to a bullet point list. To do so, use an <ol> tag instead of the <ul> tag. You can for instance display the steps of the recipe using a numbered list:

  1. Pre-heat the oven to 180°C.
  2. Beat together the butter and caster sugar until creamy, then add the eggs, one at a time, slowly mixing through.
  3. Sift in the self-raising flour, then add the lemon zest and mix until well combined.
  4. Line a loaf tin (8 x 21cm) with greaseproof paper, then pour in the mixture and level the top with a spoon.
  5. Bake for 45 to 50 minutes.
Watch Video Tutorial #2

Adding Colours!


We are now going to change the text colour using the <font> tag.

For instance to make text appear in orange we can use the following code:

This text will appear in orange!

Notice the American spelling for the attribute “color” inside the font tag!

Your task is to use several <font> tags to make the information such as preparation time, cooking time, level of difficulty and number of servings standout on the page using the colours of your choice.
Watch Video Tutorial #3

Centred ,Bold, Italic and Underlined Text


You can use the <center>, <b>, <i> and <u> tags to make text appear in the centre, in bold, in italic or underlined.

This text will appear in the centre!
This text will appear in bold! This text will appear in italic! This text will appear underlined!

Adapt Elian’s code so that some of the key information from the recipe appear in bold or in italic.
Watch Video Tutorial #4

Adding hyperlinks


To add a hyperlink, you will need to use the <a> tag as follows:

Visit our computing blog!

You can now add a hyperlink to the last paragraph to point to the BBC Good Food website. The URL of the page is: https://www.bbcgoodfood.com/
Watch Video Tutorial #5

Your Turn


Now that you know how to use the basic HTML tags needed to create a web page, add some more content to this webpage:

  • Add a section called “Tip of the day” (as a Heading 2). Add a paragraph to this section with the following text:
  • “To find out is your cake can come out of the oven, insert a thin skewer or knife into the centre of the cake. Your skewer/knife should come out clean. If it doesn’t you will need to leave the cake to bake for a bit longer.”

  • Find some other recipes online and create hyperlinks to these pages.
unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Did you like this challenge?

Click on a star to rate it!

Average rating 3.1 / 5. Vote count: 97

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!