Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

For building a product landing page, is states that I should have a href attribute, despite me adding one

Your 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">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header id="header">
    <nav id="nav-bar">
      <div class="logo-container">

    <img id="header-img" src="https://th.bing.com/th/id/OIP.mrzawUcNgBLvi4mjQ_9OSAHaEK?w=311&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="logo">
          
  <span class="the-product">Guitar Center</span>
  <ul class="nav-link">
      <li class="nav-link"><a href="#products">Products</a></li>
      <li class="nav-link"><a href="#kits">Kits</a></li>
      <li class="nav-link"><a href="#accessories">Accessories</a></li>
    </div>
    </nav>
    </header>
    <div id="products"></div>
    <div id="kits"></div>
    <div id="accessories"></div>
    
</body>
</html>

/* file: styles.css */
* {
  margin: 0;
  background-color: black;
}

#header-img {
  width: 100px;
}

#nav-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  
}

.nav-link {
  display: flex;
  list-style: none;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

what is the exact error message or failed test?

3

Failed:Each .nav-link element should have an href attribute.

4

this is a .nav-link element in your code
it does not have an href.

The testcase is trying to tell you that all the .nav-link elements are actually anchor elements, not li elements.

5

Hello!

Here is an example of how the nav-link should be entered into the code. This is only an example.

<li><a class="nav-link" href="#Apple_Sauce">Apple Sauce</a></li>

which should link to another location on the document where the Apple Sauce id is located.

Example continued:

<section id="Apple_Sauce" class="apples"><header>Apple Sauce</header>

Wishing you good progress on your coding journey! :slightly_smiling_face:

6

@GrannyIsA-Dreamer
I did the nav-link the way you presented it, and it still won’t accept it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header id="header">
    <nav id="nav-bar">
      <div class="logo-container">

    <img id="header-img" src="https://th.bing.com/th/id/OIP.mrzawUcNgBLvi4mjQ_9OSAHaEK?w=311&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="logo">
          
  <span class="the-product">Guitar Center</span>
  <ul class="nav-link">
      <li><a class="nav-link" href="#Products">Products</a></li>
      <li><a class="nav-link" href="#Kits">Kits</a></li>
      <li><a class="nav-link" href="#Accessories">Accessories</a></li>
    </div>
    </nav>
    </header>
    <div id="Products"></div>
    <div id="Kits"></div>
    <div id="Accessories"></div>
    
</body>
</html>
7

Your html has syntax errors.

Paste it in this html validator and fix the errors being reported.

This may help resolve any issues that confuse the test.

8

@hbar1st
Strange, the html validator stated that I fixed the errors, but the project is still saying that " Each .nav-link element should have an href attribute"?

9

please post the corrected code in your next reply so we can look at it again.

10 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header id="header">
    <nav id="nav-bar">
      <div class="logo-container">

    <img id="header-img" src="https://th.bing.com/th/id/OIP.mrzawUcNgBLvi4mjQ_9OSAHaEK?w=311&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="logo">
          
  <span class="the-product">Guitar Center</span>
  <ul class="nav-link">
      <li><a class="nav-link" href="#Products">Products</a></li>
      <li><a class="nav-link" href="#Kits">Kits</a></li>
      <li><a class="nav-link" href="#Accessories">Accessories</a></li>
      </ul>
    </div>
    </nav>
    </header>
    <div id="Products"></div>
    <div id="Kits"></div>
    <div id="Accessories"></div>
    
</body>
</html>
11

this is a nav-link class
it does not have an href

1 Like
12

Hi,
I think the problem lies in this part of the code:

your ul has the same class name as your li which makes the error pop up. That’s why when the instruction says every .nav-link should have a href attribute, this one doesn’t have one and it causes the error. So I suggest you change the class name for your ul and hopefully that will solve the problem. Hope this helps!

13

Ok, now it’s fixed, thank you

3 Likes