Learn HTML by Building a Cat Photo App - Step 64

Hi, a helping hand is needed, am asked to
nest an anchor element in an existing p element, i’ve done it but my code do not pass and am stuck here.
Turn the existing freeCodeCamp.org text into a link by enclosing it in an anchor (a ) element. The href attribute should be set to https://www.freecodecamp.org .

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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>
      <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 <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>

<!-- User Editable Region -->

      <p> <a href="https://www.freecodecamp.org.">freeCodeCamp.org </a> No Copyright - freeCodeCamp.org </p>
  

<!-- User Editable Region -->

    </footer>
  </body>
</html>

Your browser information:

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

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 64

Hi @Yawa20

There’s 2 very easy mistakes here.
The first one is simply not reading the instruction carefully enough.
It asks you to turn the existing freeCodeCamp.org text into a link. You’ve added a completely new text in front of the existing text.
Second, you have a period at the end of your link that’s breaking it.

<p> <a href="https://www.freecodecamp.org.">freeCodeCamp.org </a> No Copyright - freeCodeCamp.org </p>

So, move the <a> tag to the correct place with no new text, and remove the period. That should solve your issue.

But it says the anchor element should have this link “https://www.freecodecamp.org.”? or am wrong about that?
And please can you explain further on moving the tag?,where should i move it to?

Yeah i agree easy mistake, start fresh <p> No Copyright - freeCodeCamp.org </p> now just wrap the freeCodeCamp.org in a <a></a> element with the href="" attribute. If you read the instructions carefully it does say Turn the existing freeCodeCamp.org text into a link. I made easy mistake like this all the time because i wanted to progress faster then i was learning i lost focused and the answer was right in front of me the whole time. Good luck with it all :smiley:

But href attribute always has a link as it value? or?

i tried what you said and it still not working please am really stuck here, i need help am confused and don’t know what to do

Please when i did what what you told me, my code didn’t pass and it said i should nest (a) element in the p element. what should i do?

What is your code now?

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.

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

<p> <a href="https://www.freecodecamp.org.">freeCodeCamp.org </a> No Copyright - freeCodeCamp.org </p>
  

You have unnecessarily added an additional freeCodeCamp.org at the start delete this. Where it says No Copyright - freeCodeCamp.org Wrap that freeCodeCamp.org in a <a></a> with the href="" attribute. Dont touch the <p></p> that is correct.

Let me know if you complete it or need more help ill try to explain some more.

Hello! Try removing this text ‘freeCodeCamp.org’ that is before the closing tag of the anchor element.

Please when will i need the backtricks when coding?

backticks are useful in markdown, to display monospace formatted code like shown in that post.
also, JavaScript uses backticks for a thing called template literal that allows for interpolation of variables inside strings without needing to use concatenation