Learn HTML by Building a Cat Photo App - Step 27

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ul>
          <ol>flea treatment</ol>
          <ol>thunder</ol>
          <ol>other cats</ol>
          </ul>
      </section>
    </main>

  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 27

Link to the challenge:

I don’t know what I am doing wrong. The hint is; The ol element should be above the second section element’s closing tag. You have them in the wrong order.

2

you were asked to add an ordered list.
An example of an ordered list is:

<ol>
  <li>list item 1</li>
  <li>list item 2</li>
</ol>

Change your list to have the same syntax.

1 Like
3

I did that but it didn’t work

4

hi, please respond with your latest code for another review.
Thanks.

5 
 <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment 1</li>
          <li>thunder 2</li>
          <li>other cats 3</li>
          </ol>

this is my current code
The hint is ; You should have three li elements with the text flea treatment , thunder and other cats in any order.

6

how do you reply with code ?

7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

the li text has to be an exact match to the given text.
Can you compare what you wrote to the requested text?
(right now the text is not an exact match)

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.