Im trying to create this:
You should have at least 3 .nav-link elements within the #nav-bar .
For that one, did you fix this
The error says that the href must point to an element with that id. It can’t work if you don’t have an element with that id.
<nav id="nav-bar">
<nav-link href="#first"></ nav-link x>
<nav-link href="#second" ></ nav-link x>
<nav-link href="#third"></ nav-link x>
</nav>
Do you have an element with the id of first?
Do you have an element with the id of second? Do you have an element with the id of third?
So, I’m on this issue now. trying to solve it. What’s missing is the #footer connection… I have created the href=“” and class=“nav-link”… Says I need to link three of the nav-links… ??
Should I add something in CSS ??
See below:
Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer ).
Tell us what’s happening:
Describe your issue in detail here.
How do I make the following? I’m trying to link, but there is nothing to link them too?
Failed: Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).
Your code so far
<!-- file: index.html -->
<link rel="stylesheet" href="styles.css">
<header id="header">
<nav id="nav-bar">
<li><a class="nav-link" href="footer"</a>Footer</li>
<li><a class="nav-link" href="firstpage" </a>First page</li>
<li><a class="nav-link" href="contact"</a>Contact</li>
</nav>
<img id="header-img" src="https://postimg.cc/XBdRjq9r"></img>
<video id="video" href="" src=""></video>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" name="email" placeholder="Text"></input>
<input id="submit" type="submit" >
</form>
</header>
/* file: styles.css */
@media
#nav-bar {
}
header {
position: fixed;
width: 100%;
}
.flex-container {
display: flex;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge:
HI everyone, i have this issue. I have made the code ok, but it seems to missing something. I added id=“” to try link, still dont work. any suggestions pls…? thx
Failed:Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).
In your nav list you’re missing a key part to the link. The id tag that lets the browser know that it’s a link tag on the page. The answer lies in the failed comment.
(has an href with a value of another element’s id. e.g. #footer)
You’re also missing the closing angle bracket to your links and the closing link tag is in the wrong spot.
PPBUS_G3H, PP3V3_S5, TO SMC, THROUGH CPU VRAM IC, 12V, TO POWER PM_SLP_S4, AND PM_SLP_S5 ON/OFF SWITCH… BEFORE THAT PM_BATLOW, THROUGH IC U7501 SM_PM_G2_EN… ON A1466 MODEL 2014…
DID YOU UNDERSTAND ANYTHING OF WHAT I WROTE? ITS COMPUTER ELECTRONICS SCHEMATICS LANGUAGE.
SAME, I DIDNT UNDERSTAND ANYTHING OF WHAT YOU JUST WROTE??
SORRY CAPS, CAPS LOCK WAS ON… Im not shouting…
So to try clarity what you just wrote:
- closing angle bracket to links (ok, so you mean in CSS I suppose ?? )
- pLease see below my code:
whats missing of my code> thanks
It’s nothing to do with the css it’s the actual code in your html file. Check this piece of code against the html code you have.
<a href="https://freecodecamp.org">freeCodeCamp</a>
The above is how a regular link is structured. Your code is missing the > at the end of the link and your </a> needs to be at the end of the text.
The nav link needs the id tag of # in order to go to the sections you’ve got marked.
<a class="nav-link" href="#footer" id="#footer" Footer
Should look like
<a class="nav-link" href="#footer" id="#footer">Footer</a>
The symbol # is an id tag that when clicked should go to the section with the id of footer.
Coding is a pain and and we’ve all been there starting out. Just remember to breath and take breaks.
1 Like
You don’t need to put id="#footer in your link it’ll know it’s an id with the # symbol.
1 Like
I did put the </a> at the end... I just didn't know I needed to preformat the text before I sent it to you. like I did now... So the </a> didn't come through.. Now I understand I need to preformat the code here. Another lack of information by freecodecamp..
Here is my code: with preformatted!
<nav id="nav-bar">
<li><a class="nav-link" href="#footer" id="#footer" </a>Footer</li>
<li><a class="nav-link" id="#first-page" href="#first-page" </a>First page</li>
<li><a class="nav-link" id="#contact" href="#contact" </a>Contact</li>
</nav>I deleted the # now…
<nav id="nav-bar">
<li><a class="nav-link" href="footer" id="footer" </a>Footer</li>
<li><a class="nav-link" id="first-page" href="first-page" </a>First page</li>
<li><a class="nav-link" id="contact" href="contact" </a>Contact</li>
</nav>
The nav links should look like this.
<li><a class="nav-link" href="#footer">Footer</a></li>
Now check the code above against your code below
<li><a class="nav-link" href="footer"</a>Footer</li>
You’re missing an > at the end of your link and your </a> tag is in the wrong spot. Put the # back into the link so that when you click on the link it’ll take you to the section on the page that matches it.
@apotterdd thanks i solved it yesterday… I saw the missing points laters… thanks for your support and help… Yes, you right, need patient with coding… thanks 
1 Like