Product Landing Page - Build a Product Landing Page

What’s happening:

My HTML code passes every test, except, “Each .nav-link element should have an href attribute.” I understand this is a Certification Project, however I’ve run out of leads to assist me in this issue. I’ve read-and-searched as much as I could before coming to the ask stage here. Any ideas to get me on the right path? Thank you in advance for your time! (Note: ignore my ugly CSS code, just trying to get the HTML in passing order first, unless of course, that’s where the problem lies lol)

My code so far:

<!-- file: index.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" />
    <title>Product Landing Page</title>
  </head>

  <main>
    <header id="header" class="header">
     <img id="header-img" src="https://wafuu.com/cdn/shop/products/suzuki-melodica-red-m-37c-plus-501338.jpg?v=169525680" />
     <nav id="nav-bar">
         <p class="nav-link" href="#email"><a href="#email"=>Email</a></p>
         <p class="nav-link" href="#header-img"><a href="#header-img">Header</a></p>
         <p class="nav-link" href="#submit"><a href="#submit">Submit</a></p>
     </nav>
    </header>

    <body>
      <div></div>
      <iframe id="video" width="1863" height="811" src="https://www.youtube.com/embed/ZaDnHo3LdmA?list=PLBsm_SagFMmdWnCnrNtLjA9kzfrRkto4i" title="Zelda &amp; Chill III" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input id="email" type="email" placeholder="Enter e-mail" name="email" />
        <input type="submit" for="https://www.freecodecamp.com/email-submit" id="submit" />
      </form>
    </body>
  </main>
</html>
/* file: styles.css */
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

#nav-bar {
  position: fixed;
  display: flex;
  align-items: top;
}

#header-img {
  width: 100%;
  height: auto;
}

.header {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
}

Your browser information:

User Agent is: Opera GX, core: 106.0.4998.42;
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

Welcome to our community!

User Story 5: " 1. When you click a .nav-link button in the nav element, you are taken to the corresponding SECTION of the landing page"

You don’t have any ‘section’ HTML element in your code.

Thanks for the quick reply! I went back and added three section elements, and updated the href=“” attributes of my p class=“nav-link” elements to the newly corresponding section id’s. My code is still not passing the test, " Each .nav-link element should have an href attribute" with this update.

<!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" />
    <title>Product Landing Page</title>
  </head>

  <main>
    <header id="header" class="header">
     <img id="header-img" src="https://wafuu.com/cdn/shop/products/suzuki-melodica-red-m-37c-plus-501338.jpg?v=169525680" />
     <nav id="nav-bar">
         <p class="nav-link" href="#section-video"><a href="#section-video"=>Video</a></p>
         <p class="nav-link" href="#section-form"><a href="#section-form">Form</a></p>
         <p class="nav-link" href="#section-about"><a href="#section-about">About</a></p>
     </nav>
    </header>

    <body>
      <section id="section-video">
      <div></div>
      <iframe id="video" width="1863" height="811" src="https://www.youtube.com/embed/ZaDnHo3LdmA?list=PLBsm_SagFMmdWnCnrNtLjA9kzfrRkto4i" title="Zelda &amp; Chill III" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </section>
      <section id="section-form">
      <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input id="email" type="email" placeholder="Enter e-mail" name="email" />
        <input type="submit" for="https://www.freecodecamp.com/email-submit" id="submit" />
      </form>
      </section>
      <section id="section-about">
        <p>Made by gs64</p>
      </section>
    </body>
  </main>
</html>

The class nav-link and the href attributes should only be on the a elements, not the p elements

Also href is not a valid attribute on p elements.


You can validate your HTML as well.

https://validator.w3.org/nu/#textarea

3 Likes

Hey, thank you very much, @lasjorg !
:pray:
I moved the .nav-link from the p elements to the a elements and it worked! I think I attempted this solution before, but I must have not double-checked for errors close enough. Your post also clarified exactly what the test was requesting from me.

I also appreciate for the tip about p not accepting the href attributes – not removing them from p was most likely my issue when I tried this before.

Thank you again, I appreciate your time, see you around the forums. :wave:

1 Like