Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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

2

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.

3

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>
4

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
5

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
6

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