Link to Internal Sections of a Page with Anchor Elements (need major help)

HTML-CSS
1

Tell us what’s happening:
It says the a tag should have a href attribute to “#footer”.
It also says the footer tag should have an id sttribte set to “footer”.
The directions say then add an id attribute with a value of “footer” to the <footer> element at the bottom of the page.
Can someone please help me with this?

Your code so far


<h2>CatPhotoApp</h2>
<main>
  
  <a #footer="http://freecatphotoapp.com"  >Jump to bottom</a>
  
  <img src="https://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. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. 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. 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.</p>
  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
  
</main>
<footer>Copyright Cat Photo App</footer>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements

2

Your a element doesn’t have an href attribute. You have #footer as an attribute, but that isn’t a valid attribute name. You also attempled to assign "http://freecatphotoapp.com".

Your footer element does not have an id attribute at all.

3

So how would I do the footer part? @ArielLeslie

4

You have added an href attribute to an a element before. You just need to use the value #footer. You also need to add an id attribute to the footer element and set its value to footer.

5

You’re kind of mixing the syntax of internal links (on same page) with that of links to a different page.

In this challenge you are making a link that should navigate to the bottom of that same page.
The browser “knows” it is an internal link from the # symbol in href attribute.
The browser “knows” where to navigate because the link href and the target element id match
In the case of the challenge link href is “#footer” and target id is “footer”

Very similar example

<!-- link to a different page -->
<a href="http://freecatphotoapp.com"  >Link to FreeCatPhotoApp</a>

<!-- link to different part of same page - to an element with id="bottom" -->
<!-- see that href is set to "#bottom" -->
<a href="#bottom"  >Link to bottom of page</a>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae 
veritatis cum necessitatibus a, quaerat vel repellat porro, eligendi quasi 
numquam reprehenderit fugit odio possimus laboriosam quibusdam
 ullam officiis fugiat ipsam. Fugit a officiis</p>

<!-- target of that internal link at top -->
<!-- see that id is set to "bottom" -->
<div id="bottom">This is bottom of my page</div>

That would look like this

Link to FreeCatPhotoApp

Link to bottom of page

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae veritatis cum necessitatibus a, quaerat vel repellat porro, eligendi quasi numquam reprehenderit fugit odio possimus laboriosam quibusdam ullam officiis fugiat ipsam. Fugit a officiis

This is bottom of my page
6

I guess to be really clear, it should say the value of the href attribute.

From:

Change your external link to an internal link by changing the href attribute to “#footer” and the text from “cat photos” to “Jump to Bottom”.

To:

Change your external link to an internal link by changing href attribute value to “#footer” and the text from “cat photos” to “Jump to Bottom”.

That would also be in line with the sentence about the id.

Then add an id attribute with a value of “footer” to the element at the bottom of the page.

7

I am so sorry, but I am so confused. This coding thing is harder than I thought it would be.

8

oh! I got it now. Thanks for the help!