The .nav-link with href="#how-it-works" is not linked to a corresponding element on the page

Tell us what’s happening:

Got this error:

The .nav-link with href="#how-it-works" is not linked to a corresponding element on the page : expected null to not equal null
AssertionError: The .nav-link with href="#how-it-works" is not linked to a corresponding element on the page : expected null to not equal null
    at s.u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:262:1134)
    at s.e.(anonymous function) [as equal] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:325:126)
    at Function.n.isNotNull (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:224:1253)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:307300
    at NodeList.forEach (<anonymous>)
    at r.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:307107)
    at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31608)
    at o.f.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31544)
    at m.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37114)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37976

Your code so far

<!DOCTYPE html>
<html lang="en-US">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="https://spee.ch/a/Blockchan2" alt="">
      <nav id="nav-bar">
        <a href="#features" class="nav-link">Features</a>
        <a href="#how-it-works" class="nav-link">How It Works</a>
        <a href="#pricing" class="nav-link">Pricing</a>
      </nav>
</header>
    <main>
      <h3>Decentralized Image Board</h3>
      <h4>Get notified when we launch!</h4>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input type="email" placeholder="Enter your email here" id="email" email="email">
        <input type="submit" id="submit" submit="submit">
      </form>
        <div>
          <a name="how-it-works"></a>
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/7SmC7AuZNWY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <p>Works pretty identical to the popular imageboard, 4chan. The difference is that users must have an account, and instead of a randomly generated number at the top of your comments/posts, its a randomized BTC address, and images in comments/posts are encoded by default.</p>
        </div>
        <h3>Decentralized</h3>
          <p>Blockchan is built on <a href="https://blockstack.org/">Blockstack</a>, the bastion of the decentralized web, and can never read your data.</a></p>
          <img class="decentralized" href="" alt="">
          </div>
    <a name="features"></a>
            <div id="features">   
              <h3>Anonymous</h3>
                  <p>Other users will not be able to identify you, as the only means of identifying you is your visible BTC address (for donations) which changes everytime you comment or post.</p>
             <img class="anon" src="" alt="">
          </div>
        <div>
          <h3>Steganography</h3>
            <p>Blockchan believes that the power of <a href="https://en.wikipedia.org/wiki/Steganography">steganography</a> is very undervalued on the internet. Oh, its also pretty rad.</p>
              <img class="stega" href="" alt="">
        </div>
      <div>
            <a name="pricing"></a>  
        <h3>Free</h3>
        <h3>0 BTC</h3>
        <p>Ability to post, comment, decode, and accept donations. 
           <button>Select</button>
    </div>
      <div>
        <h3>Basic</h3>
        <h3>0.002 BTC</h3>
        <p>Ability to post, comment, decode, accept and give donations, and vote for trial boards. 
           <button>Select</button>
      </div>
      <div>
        <h3>Pro</h3>
        <h3>0.01 BTC</h3>
        <p>Ability to post, comment, decode, accept and give donations, vote for trial boards, and suggest trial boards. 
          <button>Select</button>
      </div>
        </main>
    <footer>
      <p>To support Blockchan, donate BTC to <a href="https://blockexplorer.com/address/19vTrGQ3gR8gDhu8RJ4qPzBrAMyKjhPAQD">19vTrGQ3gR8gDhu8RJ4qPzBrAMyKjhPAQD</p>
    </footer>
  </body>
  
    


Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-pagePreformatted text

Probably this explains the error (usage of<a name...> in html5!)
https://www.w3schools.com/tags/att_a_name.asp

2 Likes

Yep, thats what I did wrong, thank you.