Learn HTML by Building a Cat Photo App - Step 32

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>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats hate other cats.</figcaption> 
          <Cat>Photo</App> 
        </figure>
      </section>
    </main>
  </body>
</html>

Your browser information:

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

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

Link to the challenge:

2

:balloon: Hi, welcome to the forum!
We see you have posted some code but did you have a question?

3

yes new beginner but am not understand the codes.

4

so this is the line of code you are supposed to be modifying, correct?

You were asked to wrap the text Cats hate other cats. into a strong element.

That means just start typing inside the figcaption and create an opening tag before the first word Cats and a closing tag after the last word cats.

5

i cant still get it please give me an example thanks

6

in HTML we have something called element.
Elements you may know include:
<h1></h1>
<body></body>
<section></section>

So you are being asked to add a new element called strong.
So just do it the same way. (opening tag, closing tag)
Make sure you put the tags around the text…

7

okay let me try again.

1 Like
8

am still not getting it please help with a sample

9

can I see what you tried? Maybe it is not that bad.

10
Photo this are what i have been trying
11

Do you have any updated code that you tried with the element examples that were given above?

12

are you having a hard time copying the code to the forum?
Just use a code block like this:
```
code here
```

13

Please where can i see the code block

14

When you reply, you will see this icon in the box. Click on this to get the code block
image

15 
<Cats>Photo</App>
<Cats hate other cats>
<Cats></hate other cats>
this are what i have  been trying
16 
i also try 
<CatPhotoApp>
17

Okay, so we need to start fresh then.
Please click on the restart step button.
Then look at this line of code you are shown
<figcaption>Cats hate other cats.</figcaption>

It contains a single element called figcaption

Notice that the name of the element figcaption is inside the angled brackets.
<figcaption> and </figcaption>
The first one is called an opening tag.
The second one is called a closing tag.

Tags cannot contain whatever we want. They must contain special keywords that the browser understand. These keywords are what make up the language called HTML (hypertext markup language).

So for eg.
<cats> is not a valid HTML element
<CatPhotoApp> is also not valid.

The exercise is asking you to add a strong element.
The word strong here is a valid html keyword.

Please respond back and show me if you have understood what I said by typing out the word strong inside an opening tag and inside a closing tag.

18 
<strong> </strong>
19

awesome!!!
Now you just have to put the strong opening tag on the left of the words given to you.
And the closing tag on the right.
Try please and if you are still stuck please post your new code.

20 
<Cats>Cats hate other cats.</Cats> 
          <hate>Cats hate other cats</hate>