Product Landing Page : links to other parts of the page

Hi all! I’m new here. I’m having a little bit of a problem to generate the links to other parts of the page. I guess it must be the place where I put them that doesn’t work but I’ve tried everything and it doesn’t work.
Thank you!
P.S.: I don’t know how to copy the code from CodePen here

Hello there.

  1. We really cannot help you without seeing your code
  2. A link to your CodePen would be the best case scenario.
  3. 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.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like

Thank you! I’m going to edit the first post!

You have attached the link to the freeCodeCamp boilerplate, not your forked copy with your code.

Eugenia, for allowing <a> elements to link to other sections of a page. Set the <a href=""> property to be the desired sections ID.

I will show you a basic example below that uses an <a> HTML element for linking or jumping to another section of current page.

<a href="#resources">Resources</a>
<section id="resources">
    <div class="content">
        <p>some text or content</p>
    </div>
</section>

If you click the <a> element labeled ‘Resources’. It will direct you to the section with id="resources" providing the correct link to the ‘resources’ sections content.

I hope this helps with your issue!

1 Like

Thank you Dutchman so much.
But what seems to be the issue here is to link a button element to the a element. A link is created but on the text not in the button. Sorry I should have said that first.

1 Like

You’re welcome! Feel free to like my reply if it helped.

Ok, so <a> or (anchor-elements) within HTML are used most commonly for hyperlinks to other pages or sections of the page.

If you would like to create a link to a section through the <button> element just nest it.

<button type="button"><a href="#resources">Resources</a></button>

Let me know if this is what you were looking for, as I’m not entirely sure your question.

1 Like

Hey Dutchman! Thank you very much, that was exactly what I was looking for. I still don’t have the technical expertise for a good coding vocabulary, sorry for that. And thank you again!!

I did what Dutchman told me, it still doesn’t work.

         <button type="button" class="nav-link"><a href="#who_are_we">Who are we</a></button>
        <button type="button" class="nav-link"><a href="#what_do_we_offer">What do we offer</a></button>

https://codepen.io/33P/pen/dyYJXBa

The code as it is right now…@Dutchman if you still want to help!

 <button type="button" class="nav-link">Who are we<a href="#who_are_we" id="who_are_we"></a></button>
      <nav class="nav-link">
        <button type="button" class="nav-link">What do we offer
          <a href="#what_do_we_offer" id="what_do_we_offer"></a></button>

Hi Eugenia, the inner text for your <button> elements contain the string “Who are we” and “What do we offer”, which by default do not have any action for click events.

Make these strings the inner-text for the anchor <a> elements which have the href="#section" property to link to the specified section on click.

Try updating your codepen.io link with this code:

 <button type="button" class="nav-link"><a href="#who_are_we" id="who_are_we">Who are we</a></button>
      <nav class="nav-link">
        <button type="button" class="nav-link"><a href="#what_do_we_offer" id="what_do_we_offer">What do we offer</a></button>

and CSS:

main a {
  text-decoration: none;
  color: black;
}

Note: Also try to only set the id="who_are_we" for elements that you wish to link with (usually sections) and use them with purpose only where is necessary.

Avoid setting the id of multiple DOM elements with id="who_are_we" as this section of content will be referenced to on click events for anchor elements with the property href="#who_are_we". Using a different id for anchor elements is fine if you wish to select them in CSS with #id as opposed to .class.

1 Like

@Eugenia I think your text should be placed between the a tag like:
<a href="who_are_we>who are we
Same applies for the “what_we_do_offer” button. Please let me know if this helped.

1 Like

@Dutchman, it worked! I still can’t pass the tests though. But the changes applied correctly. Thanks!
@Viktor_Onyedim hi! I had already tried your solution but didn’t work! Thank you anyway.

@33P I noticed you still have a ways to go on the product landing page project, do not fear as you’ve made great progress! I forked your pen from codepen.io and updated it to help move you along :]

https://codepen.io/spherical/pen/JjYMbqN

1 Like

You’re too kind! Thank you so much buddy!

1 Like

No problem, I’m glad to assist you on your coding journey. Best of luck Eugenia!

1 Like

Thank you so much Dutchman! If I can be of help to you (which I doubt, but who knows?) I’d be glad to.

1 Like