I'm doing a project on FreeCodeCamp, but I'm having trouble with a few steps and when I'm done with those steps, the entire project will be finished. The program says that my #nav-bar element is not at the top of the viewport, but clearly, it's at the top of my code. Also, it's required that all #nav-link elements must have a href element, but that is also clearly there in my code. Can anyone be the second pair of eyes and tell me what's wrong?
These are the first few lines of my code for HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<header id="header">
<nav id="nav-bar">
<ul>
<li class="nav-link" href="#c-flutes" id="flute-category"><a href="#c-flutes">C Flutes</a></li>
<li class="nav-link" href="#piccolo-flutes" id="flute-category"><a href="#piccolo-flutes">Piccolos</a></li>
<li class="nav-link" href="#alto-flutes" id="flute-category"><a href="#alto-flutes">Alto Flutes</a></li>
<li class="nav-link" href="#bass-flutes" id="flute-category"><a href="#bass-flutes">Bass Flutes</a></li>
<li class="nav-link" href="#contra-alto-flutes" id="flute-category"><a href="#contra-alto-flutes">Contra-Alto Flutes</a></li>
<li class="nav-link" href="#contrabass-flutes" id="flute-category"><a href="#contrabass-flutes">Contrabass Flutes</a></li>
</ul>
</nav>
As you can see, every #nav-link element has an href attribute and it is the first thing, so it should be at the top of the viewport.
I'm doing a project on FreeCodeCamp., but I'm having trouble with a few steps and when I'm done with those steps, the entire project will be finished. The program says that my #nav-bar element is not at the top of the viewport, but clearly, it's at the top of my code. Also, it's required that all #nav-link elements must have a href element, but that is also clearly there in my code. Can anyone be the second pair of eyes and tell me what's wrong?
These are the first few lines of my code for HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<header id="header">
<nav id="nav-bar">
<ul>
<li class="nav-link" href="#c-flutes" id="flute-category"><a href="#c-flutes">C Flutes</a></li>
<li class="nav-link" href="#piccolo-flutes" id="flute-category"><a href="#piccolo-flutes">Piccolos</a></li>
<li class="nav-link" href="#alto-flutes" id="flute-category"><a href="#alto-flutes">Alto Flutes</a></li>
<li class="nav-link" href="#bass-flutes" id="flute-category"><a href="#bass-flutes">Bass Flutes</a></li>
<li class="nav-link" href="#contra-alto-flutes" id="flute-category"><a href="#contra-alto-flutes">Contra-Alto Flutes</a></li>
<li class="nav-link" href="#contrabass-flutes" id="flute-category"><a href="#contrabass-flutes">Contrabass Flutes</a></li>
</ul>
</nav>
As you can see, every #nav-link element has an href attribute and it is the first thing, so it should be at the top of the viewport.
Share Improve this question asked yesterday Shiyul ChoiShiyul Choi 91 bronze badge New contributor Shiyul Choi is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.1 Answer
Reset to default 1There are a few things, I would suggest changing in the code.
- Place the header inside
<body> {your code} </body> - It would work well, if you place the anchor element inside list and use href on the anchor tag alone. Here is an updated code which should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<ul>
<li class="nav-link" id="flute-category"><a href="#c-flutes">C Flutes</a></li>
<li class="nav-link" id="flute-category"><a href="#piccolo-flutes">Piccolos</a></li>
<li class="nav-link" id="flute-category"><a href="#alto-flutes">Alto Flutes</a></li>
<li class="nav-link" id="flute-category"><a href="#bass-flutes">Bass Flutes</a></li>
<li class="nav-link" id="flute-category"><a href="#contra-alto-flutes">Contra-Alto Flutes</a></li>
<li class="nav-link" id="flute-category"><a href="#contrabass-flutes">Contrabass Flutes</a></li>
</ul>
</nav>
</header>
</body>
</html>