Trouble with the Product Landing Page

Hey ya’ll, my product landing page is looking pretty good so far but I am having trouble satisfying numbers 3,11, and 12, no matter what alterations I make to my code. Any suggestions would be greatly appreciated.
Link to my code below;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

The first error says:

  1. Within the element I can see a element with corresponding id=“nav-bar”.’

#nav-bar is not a child of #header : expected 0 to equal 1 AssertionError: #nav-bar is not a child of #header : expected 0 to equal 1

It is trying to point you to the problem.

When I look at your code, I see this:

  <header>
    <nav id="nav-bar" class="navbar">
      <a class="nav-link" href="#why">Why is SenTea unique?</a>
      <a class="nav-link" href="#flavors">Flavors</a>
      <a class="nav-link" href="#contact">Contact</a>
    </nav>
  </header>

The test is correct: “#nav-bar is not a child of #header”. The element with the id of “nav-bar” is not a child of the element with the id “header”.

When I look more deeply in the code, I see that you do have something with that id:

<header id="header">

But you have another problem - you have a mismatch in your divs - you have 6 <div elements and only 5 </div> elements.

I can temporarily test that theory by removing everything but that header, giving it the right id, and running the test:

  <header id="header">
    <nav id="nav-bar" class="navbar">
      <a class="nav-link" href="#why">Why is SenTea unique?</a>
      <a class="nav-link" href="#flavors">Flavors</a>
      <a class="nav-link" href="#contact">Contact</a>
    </nav>
  </header>

With that, that test passes.

So, you need to fix that id problem and fix the structure of your page. In the HMTL page in CP, in the upper right corner of the pane, you and analyze your HTML and find errors. Even better is going to an HTML validator into a site like this, put in your code and see what it says. (You can ignore the first three warnings/errors because you are coming from CP.)

I assume that that will fix that failed test.

You need to do that kind of detective work on the remaining tests. A good dev is a good debugger. And a good debugger is a good detective.

  1. You needed to add an ‘id=-“header”’ to your header.
  2. add an ‘id=“submit”’ to your submit button.
  3. action=" https://www.freecodecamp.com/email-submit" should be added to the form element instead of Submit button.

Hope this helps!!