Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening: I this error code: Each .nav-link element should have an href attribute.

Your code so far:

original trombones logo

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

I had to remove the “<” characters so the code would display as code. it may be confusing but I don’t know how else to avoid the code being displayed as it’s meaning.

head>
header id=“header”>
img
id=“header-img”
src=“https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png”
alt=“original trombones logo”>
nav id=“nav-bar”>
ul>
li id=“lid” class=“nav-link” href=“#advertized-features”>a class=“advertized-features” href=“#advertized-features”>Features/a>/li>
li class=“nav-link” href=“#video”>a class=“How-It-Works” href=“#video”>How It Works/a>/li>
i class=“nav-link” href=“#pricing”>a class=“Pricing” href=“#pricing”>Pricing/a>/li>
/ul>
/nav>
/header>
/head>

3

Hi @thomasefox01

On the first line of a post type three back ticks, on the next line paste your code.
On the last line type three back ticks.

Here is a single back tick `

4

Sorry that didn’t help.
‘’’

original trombones logo '''
5

Those are not back ticks. On my key board it is next to number 1 above the alpha keys.

6

Hi @thomasefox01

If your anchor elements don’t have a .nav-link class, so that will fail the test.

Happy coding

7

the problem is not fixed yet in my program though now I know how to display my code here.

<head>
    <header id="header">
      <img 
    id="header-img"
    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
    alt="original trombones logo">
      <nav id="nav-bar">
        <ul>
          <li id="lid" class="nav-link" href="#advertized-features"><a class="advertized-features" href="#advertized-features">Features</a></li>
          <li class="nav-link" href="#video"><a class="How-It-Works" href="#video">How It Works</a></li>
          <li class="nav-link" href="#pricing"><a class="Pricing" href="#pricing">Pricing</a></li>
        </ul>
      </nav>
    </header>
  </head>
8

Hello thomase,

The header tag needs to go within the body tag.

9

I tried that but I still have the error message: “Each .nav-link element should have an href attribute.”

My code:

<body>
    <header id="header">
      <img 
    id="header-img"
    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
    alt="original trombones logo">
      <nav id="nav-bar">
        <ul>
          <li id="lid" class="nav-link" href="#advertized-features"><a class="advertized-features" href="#advertized-features">Features</a></li>
          <li class="nav-link" href="#video"><a class="How-It-Works" href="#video">How It Works</a></li>
          <li class="nav-link" href="#pricing"><a class="Pricing" href="#pricing">Pricing</a></li>
        </ul>
      </nav>
    </header>
    <section id="Welcome-Statement">
    <h1 class="top">Handcrafted, home-made masterpieces</h1>
10

Hi @thomasefox01

Try putting the .nav-link classes and href attributes in the anchor tags.

Happy coding

11

I tried that. Code still does not pass. I get error messege:" Each .nav-link element should have an href attribute." My code now is:

 <head>
    <header id="header">
      <img 
    id="header-img"
    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
    alt="original trombones logo">
      <a><nav id="nav-bar">
        <ul>
          <li id="lid" class="nav-link" href="#advertized-features"><a class="advertized-features" href="#advertized-features">Features</a></li>
          <li class="nav-link" href="#video"><a class="How-It-Works" href="#video">How It Works</a></li>
          <li class="nav-link" href="#pricing"><a class="Pricing" href="#pricing">Pricing</a></li>
        </ul>
      </nav></a>
    </header>
  </head>
12

Hi @thomasefox01

The .nav-link classes are currently in the list item elements.
You also have the same #href attributes in both li and anchor elements.

13

You should didn’t use the href and value in the li, you can only use href and link to the anchor opening tag.

1 Like
14

Example

<a class="nav-link" href="#value">value</a>

<Section id="value">value</section>

Remember to not display section text, in css you need to display block in section selector.

1 Like
15

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