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.
- We really cannot help you without seeing your code
- A link to your CodePen would be the best case scenario.
- 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.
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!
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.
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.
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>
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.
@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.
@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 :]
You’re too kind! Thank you so much buddy!
No problem, I’m glad to assist you on your coding journey. Best of luck Eugenia!
Thank you so much Dutchman! If I can be of help to you (which I doubt, but who knows?) I’d be glad to.