Build a Recipe Page - Build a Recipe Page

HTML-CSS
1

Tell us what’s happening:

When I did the tests, it says 2, 3, 8, 15, and 18 is wrong. I checked all of these tests and I definitely did all of this. Could someone help me with my code?

Your code so far

<!DOCTYPE html>
<head>
  <body>
    <html lang="en">
    <title>My Recipe</title>
    <meta charset="UTF-8">
    </head>
     <h1>Cookies</h1>
     <p>My recipe makes you cookies.</p>
     <h2>Ingredients</h2>
     <ul>flour</ul>
     <ul>sugar</ul>
     <ul>shortening</ul>
     <ul>eggs</ul>
     <ul>butter</ul>
     <h2>Instructions</h2>
     <ol>1. Gather all of your ingredients</ol>
     <ol>2. Mix your sugar and flour</ol>
     <ol>3. Put the eggs in with the mix</ol>
     <ol>4. Throw in your shortening and butter</ol>
     <img src="https://cdn.freecodecamp.org/curriculum/labs/recipe.jpg" alt=Picture of some ingredients>
  </body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 Edg/137.0.0.0

Challenge Information:

Build a Recipe Page - Build a Recipe Page

2

Hi there.

Firstly, solid attempt. However there is an issue with the structure of your page.

The first tag of the website, which you did get right is the Doctype tag. This tells the browser the page is html.

The next one should be the opening html tag. This one holds all of the html content and will need to be closed.

The first inside element is the head. This hold the title and other metadata elements for your page.

Below the head element is the body element. This one holds all the html elements visitors to your website see.

Following that fix, the ol element declares you are created an ordered list. Conversely, the ul element creates an unordered list.

The li element represents a list item.

1 Like
3

I fixed it to this but still doesn’t work. Sorry, very new to coding :slight_smile:

Your code so far

<!DOCTYPE html>
    <html lang="en">
   <head>
    <title>My Recipe</title>
    <meta charset="UTF-8">
    </head>
  <body>
     <h1>Cookies</h1>
     <p>My recipe makes you cookies.</p>
     <h2>Ingredients</h2>
     <ul>flour</ul>
     <ul>sugar</ul>
     <ul>shortening</ul>
     <ul>eggs</ul>
     <ul>butter</ul>
     <h2>Instructions</h2>
     <ol>1. Gather all of your ingredients</ol>
     <ol>2. Mix your sugar and flour</ol>
     <ol>3. Put the eggs in with the mix</ol>
     <ol>4. Throw in your shortening and butter</ol>
     <img src="https://cdn.freecodecamp.org/curriculum/labs/recipe.jpg" alt=Picture of some ingredients>
  </body>
4

Please look at my updated post and then at your code. Then at the text of one of the tests you failed.

What di you think you need to change?

5

I am very confused. I changed the ul to li. Does that fix it? and then I assume you need to keep ol becuase it is an ordered list and not just a list.

6

Solved 15 and 18. Still need help with 2, 3, and 8

7

#2: You need to close the html element. Like all other elements it has a closing tag that is the very last thing in your code. Once you fix that it will pass number 3 and 8