CatPhotoApp Step 23

HTML-CSS
1

Step 23

The figure element represents self-contained content and will allow you to associate an image with a caption.

Nest the image you just added within a figure element.

2

Please post the code you’ve tried so far and a link to the Step. Thanks

3 
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>
 <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
4

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 (').

5

I’m not sure what this is up here?

Can you show the code where you tried to add a ‘figure’ element?

6 
 <a figure >/a
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
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

This is an ‘a’ element with a ‘figure’ attribute. You need a ‘figure’ element with no attribute.

9

I am still learning…
Let me try again…
‘’’
/a
A slice of lasagna on a plate.
‘’’
Is this correct?

10 
      <a figure >/a
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">

here we go, got it!

1 Like
11

This is an ‘a’ element with a ‘figure’ attribute. You need a ‘figure’ element with no attribute.

12

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