freeCodeCamp Challenge Guide: Nest an Anchor Element within a Paragraph

Nest an Anchor Element within a Paragraph

Problem Explanation

Read the instruction carefully: even if this is a challenge about the a tag it does not necessarily means that you should manipulate it!

The challenge introduction speaks about the existing a element and it asks you to write the paragraph into which it will be nested: in other words you just need to write the p HTML element, where the content is composed by some text - "View more " (double check the capitalization and the final space) - and the a HTML element already present in the page.

You can visualize the final structure of your p element as follows:

desc code
Opening tag <p>
Some text content View more
The existing a element <a>...</a>
Closing tag </p>
Solution (Click to show/hide)
<h2>CatPhotoApp</h2>
<main>

  <p>View more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a></p>


  <img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot,
    hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy
    fur catnip scratched.</p>
</main>
42 Likes

I can't seem to move beyond this point, even though I have followed the steps as instructed.

Any help would be greatly appreciated!

10 Likes

@robt90 It looks you put a space at the beginning of you p element. Try without! :wink:

6 Likes

Yep, tried that out and it works perfectly! Thanks for the help :slight_smile:

2 Likes
.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

CatPhotoApp

View more cat photos

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

1 Like

I can’t seem to get past this task. My code seems fine:

View more cat photos

I still can’t run it. Any help would be appreciated. Thanks!

2 Likes

Hi all - I cannot figure out what I am doing wrong here…help!

9 Likes

Hey Everyone,

I’m really struggling here too, can anyone help?

2 Likes

I just figured it out after a frustrating 30min,
the code was right it was just in the wrong place. Reset the code and then put your begining p element with the “View more” above the anchored element then enclose it below.

so:
normal beginning p element "View more"
anchored element that is there already
enclose the p element

sorry if I confused you. hope it helps

7 Likes

Could you possibly post your code? I tried a few different ways and no luck. Any help is appreciated

1 Like

4 Likes

the same happened to me, I had the code right, but did not let me advance, the only thing I did was to go out and re-enter

This does not work for me :sob:

1 Like

I have the same problem :cry: tried several methods. Please help me

@Muhu6 It may have timed out like @gaboleo91 said try to log out, Clear the code, then try again. I just cleared mine and it’s posted below step by step:

1 Like

2 Likes

6 Likes

I had the same issue where it was coded right but not taking it. It was fixed after i reset the code and cleared my cache. Worked the first time after doing that.

5 Likes

Thanks. That worked after trying for long hours to figure out what went wrong.

4 Likes

Absolutely, glad I could help.

3 Likes