How to correct href attribute?

Each of my .nav-link elements have href attributes, but FCC is not detecting the href, so I cannot pass the project. Each class also links to the corresponding elements on the landing page, but this step is also not getting detected. Please advise on how the code should be written.

Here is my code:

      <ul>
        <li name="items" class="nav-link"><a href="#items">items</a></li>
        <li name="about" class="nav-link"><a href="#about">about</a></li>
        <li name="prices" class="nav-link"><a href="#prices">prices</a></li>
      </ul>

Challenge: Build a Product Landing Page

We would need to see all of your HTML in order to help you. Also, I think the links need to have the nav-link class, not the list items.

hello bbsmooth, thanks for the reply. Here is my HTML. I tried adding the nav-link class to the anchor elements, but it still did not pass.

I took out the image sources and a link because I’m not allowed to post more than 2 as a new user.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChubzStudio</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="" alt="bunny logo" width="200px">
      <h1>ChubzStudio</h1>
      <div class="nav-bar">
        <nav id="nav-bar">
          <ul>
            <li name="items" class="nav-link"><a href="items">items</a></li>
            <li name="about" class="nav-link"><a href="about">about</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <h2>handcrafted, home-made masterpieces</h2>
      <form method="post" id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" name="email" type="email" placeholder="enter your email address">
        <input id="submit" type="Submit" value="sign me up!">
      </form>
      <section class="items" id="items">
        <h2>items</h2>
        <p>here are some of the items I am selling in grid format!</p>
        <div class="items-grid">
          <a href="#price1">
            <img src="" 
          alt="1st item"
          loading="lazy"
          class="items-img">
          </a>
          <a href="#price2">
            <img src="" 
          alt="2nd item"
          loading="lazy"
          class="items-img">
          </a>
          <a href="#price3">
            <img src="" 
          alt="3rd item"
          loading="lazy"
          class="items-img">
          </a>
        </div>
      </section>
      <section class="about" id="about">
        <h2>about</h2>
        <p>hi there! chubzstudio is here for you. </p>
        <p>here's bts' most recent release.</p>
        <iframe id="video" width="560" height="315" src="" allowfullscreen></iframe>
      </section>
      <section class="random" id="prices">
        <h2>prices</h2>
        <aside class="random-grid">
          <div class="price1" id="price1">
            <div class="heading">
              <h4>chubz</h4>
            </div>
            <p>$15</p>
            <p>chubby bunny</p>
            <p>chilling</p>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum.</p>
            <input name="chubs" type="button" value="add to cart">
          </div>
          <div class="price2" id="price2">
            <div class="heading">
              <h4>dino</h4>
            </div>
            <p>$20</p>
            <p>chonky dino</p>
            <p>must protec</p>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum.</p>
            <input name="dino" type="button" value="add to cart">
          </div>
          <div class="price3" id="price3">
            <div class="heading">
              <h4>duck</h4>
            </div>
            <p>$17</p>
            <p>peaceful duckling</p>
            <p>with flower</p>
            <p>Lorem ipsum.</p>
            <p>Lorem ipsum.</p>
            <input name="ducky" type="button" value="add to cart">
          </div>
        </aside>
      </section>
    </main>
  </body>
</html>```

This looks like the nav-link class is still on the li instead of the link (a).

thank you! I left the nav-link class with the li elements before so it didn’t work. do you think you can help me with CSS as well?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.