Learn HTML by Building a Cat Photo App - Step 17

HTML-CSS
1

Tell us what’s happening:

that’s what I added but its not working help me out

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>

<!-- User Editable Region -->

      <elementName><section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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>
      <elementName></section>
      

<!-- User Editable Region -->

    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 17

2

There is no element in HTML called elementName.
The element they wanted was the section element.

Delete the tags that have elementName

3

Tell us what’s happening:

I did what they sayed but its not working so I need help

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>

<!-- User Editable Region -->

      <elementName><section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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>
      

<!-- User Editable Region -->

    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 17

4

this is not a valid HTML element. (there is no HTML element called elementName)
<section> is a valid HTML opening tag.
Delete the invalid code and leave the valid code.

5

but it says that Your section element should have an opening tag. Opening tags have this syntax: .

6

yes the word “syntax” does not mean you should copy what they gave. They are trying to show you how to write a proper element tag. The word elementName is to be replaced with the real element’s name.

7

then how should I do it then

8

as I mentioned, please delete <elementName> as it is not valid.
The rest of the code seems okay to me.

9

still not working it seems confusing maybe am not understanding something

10

can you post the new code after you removed the <elementName>?
(post it in your reply in between two lines of 3-backticks like the following example)
```
code here in between the 2 lines of 3-backticks
```

11

Tell us what’s happening:

I tried adding a second section element below the existing section but still not working

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>

<!-- User Editable Region -->

      <section>
        <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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>
      

<!-- User Editable Region -->

    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 17

12

Hello there!

Your second section element should be after this and not in it.

        <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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>

So delete one of your section element opening tags, then after your 1st section element closing tag, add a section element opening tag and a section element closing tag.

Example: <p>some content</p> <p></p>

2 Likes
13

Hey Buddy , Here you no need to wrap your existing section element into another one.

But rather create section element, think how you created the 1st one

Hope You Understand.

1 Like
14

Hello @itsurboijessy !

As stated in the instructions, and the previous posts, the new section opening and closing tags need to be together and after the closing tag of the current section tag.

Example: using article element tags.

<article> opening tag
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</article>  closing tags
<article></article>   new article tags

I hope this helps you understand a bit more.

Best wishes for good progress on your coding journey. :slightly_smiling_face:

1 Like
15

Hello @itsurboijessy !

It appears this is a repeat post for Step 17.

Here is my response on the other post.
Example: using article element tags.

<article> opening tag
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</article>  closing tags
<article></article>   new article tags

Where the article tags are in the example is where the section tags should be in the step.

Do not put the comments I add to guide you, only the code.

I hope it helps you understand better.

Wishing you good progress on your coding journey. :slightly_smiling_face:

16

Hello @itsurboijessy !

It is easiest for the community to assist with a question, if we are able to keep one post for each issue.

This one has three different posts, for the one issue. I cannot bring them together for you; but a moderator/leader could do that.

Wishing you the best on your coding journey. :slightly_smiling_face:

1 Like
17

It can help to think about the html elements like something physical, like different sized bits of paper. Then as you learn what they do - because they pretty much always do the same thing all the time - you’ll be able to see how the code should be laid out.

For example a section is a bigger piece of paper (aka element) that other smaller pieces of paper (aka elements) go on/in, like a div. So we don’t need to put a section inside another one.

Also using a reference website alongside your lessons can help gain clarity and context on the what is actually happening and why. Personally I like W3School but there are others :smiley:

I hope that helps a bit!

1 Like
18

farmcat is providing some good advice, along with the posts prior to my previous post. If you follow all of them, you should be able to pass to the next step.

Wishing you great progress on you coding path. :slightly_smiling_face:

1 Like
19

You must not create multiple posts on the forum for the same question. This is against our forum etiquette.

As people have already responded to your multiple posts, I decided to combine them all into one. If you are still stuck, I suggest rereading the responses you have received. You can reply to any response with follow up questions as needed but do not create a new topic for this step.