5 Steps to Creating Your Own Recipe Webpage


In this project, you’ll learn how to create a webpage for your favorite recipe.


Step 1: Decide on a recipe

Before you get coding, you’ll need to decide on a recipe.

Activity Checklist

  • Think about a recipe you want to share with your friends. It could be:
    • A recipe you found online;
    • Your favorite meal;
    • Something you made up!

The example recipe you’ll see in this project is for a banana milkshake. You can copy this recipe if you can’t find one of your own.

Step 2: Ingredients

Let’s list the ingredients that are needed for your recipe.

Activity Checklist

  • Open this template trinket in a new tab within your browser: jumpto.cc/html-template.

    The project should look like this:

  • For your list of ingredients, you’re going to use an unordered list, using the <ul> tag.

  • Go to line 8 of the template and add this HTML, replacing the text in the <h1>title with the name of your own recipe:

<h1>Banana Milkshake</h1>



  • View your webpage, and you should see your two headings.

You won’t see your list yet though, because you haven’t added any list items to it!

  • The next step is to add list items into your list, by using the <li> tag. Add the following code inside your <ul> tag:
<li>1 banana</li>


Since your list is unordered, there are no numbers next to the list items - just bullet points.

Challenge: More ingredients

Can you add all of the ingredients for your recipe?

Your webpage should look like this:



Step 3: Method

How to make your recipe.

Activity Checklist

  • You’re going to use another list to write your method, but this time you’ll be using an ordered list, by using the <ol>tag.

An ordered list is a numbered list, which you should use when the order of the steps is important.

Add this code underneath your ingredients list, making sure that it’s still inside your <body> tag:



  • Now you just need to add list items into your new ordered list:
<li>Peel the banana and add to a blender</li>

Notice that the list items are automatically numbered!

Challenge: More steps

Can you add all of the steps for making your recipe?

Your method should look something like this:



Step 4: Colors!

Let’s add some color to your recipe webpage.

Activity Checklist

  • You’ve already learned how to add colored text to a webpage.
  • Add this code inside your style.css file, to make all of the text in the website body blue:
body {
    color: blue;
  • Your browser knows colors like blueyellow and even lightgreen, but did you know that your browser actually knows the names of over 140 different colors?

There’s a list of all the color names you can use: jumpto.cc/colours, which includes color names like tomatofirebrick and peachpuff.

Change the text color from blue to tomato.

  • Your browser knows the names of 140 colors, but actually knows the color values of more than 16 million colors!

To tell the browser which color to display, you just need to let it know how much red, green and blue to use.

The amounts of red, green and blue are written as a number between 0 and 255.


Add this code to the CSS for the body of the webpage, to display a light yellow background:

background: rgb(250,250,210);
  • If you prefer, you can tell the browser which color to display by using a hexadecimal code (or hex code). This works in a similar way to the rgb() code above, except that hex codes always start with a #, and use hexadecimal ‘numbers’ between 00 and ff for the amount of red, green and blue.

Replace the rgb() code in your CSS with this hex code:

background: #fafad2;

You should see the same light yellow as before!


Step 5: Finishing touches

Let’s add a little more HTML and CSS to improve your webpage.

Activity Checklist

  • You can add a horizontal line at the end of your recipe, by using the <hr> tag.

Notice that this tag doesn’t have an end tag, just like the <img> tag.

  • The line you’ve just added doesn’t match the style of the rest of your webpage. Let’s fix that by adding some CSS code:
hr {
    height: 2px;
    border: none;
    background-color: tomato;
  • You can even change how your bullet points look with this CSS code:
ul {
    list-style-type: square;

Challenge: More colors!

Change the colors in your code by using color names, rgb() values and hex codes. There’s a list of loads of colors at jumpto.cc/colors, or you can go to jumpto.cc/colour-picker and create your own colors!

Here are some example colors:

  • Red can be written as:
    • red (obviously!)
    • rgb(255,0,0) (loads of red, no green and no blue)
    • #ff0000
  • Olive can be written as:
    • olive
    • rgb(128, 128, 0) (a bit of red and green, and no blue)
    • #808000

Try to make sure that the colors you use match your recipe!



Challenge: More styling

Add an image into your webpage. Change the font. Here’s how your webpage could look:


Here’s some code that will help you:

font-family: Arial / Comic Sans MS / Courier / Impact / Tahoma;
font-size: 12pt;
font-weight: bold;

<img src="image-link-goes-here">