Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
I’ve tried everything I can think of to find the problem here.
I keep getting the error:
Each.nav-link
should have an
href attribute that links to its corresponding
.main-section
I’ve read every article in the forum that seems to address this, and my code looks like what everyone says it should, I put the code into 2 different code validators, as well as asking Google. Bard.
I’m stumped!
I appreciate any help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>No Idea</title>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial=scale=1.0">
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="Foods">
        <header>Foods</header>
        <code></code>
        <ul>Fruits
          <li>Apples</li>
          <li>Pears</li>
          <li>Bananas</li>
          <li>Grapes</li>
          <li>Pineapple</li>
          <li>Figs</li>
        </ul>
        <p></p>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="About">
        <header>About</header>
        <code></code>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="Contact">
        <header>Contact</header>
        <code></code>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="Food_Groups">
        <header>Food Groups</header>
        <code></code>
        <p></p>
        <p></p>
      </section>
      <section class="main-section" id="Resources">
        <header>Resources</header>
        <code></code>
        <p></p>
        <p></p>
      </section>
</main>
<nav id="navbar">
      <header>Contents</header>
        <a class="nav-link" href="#Foods">Foods</a>
        <a class="nav-link" href="#About">About</a>
        <a class="nav-link" href="#Contact">Contact</a>
        <a class="nav-link" href="#Food_groups">Food Groups</a>
        <a class="nav-link" href="#Resources">Resources</a>
  </nav>
</body>
</html>

/* file: styles.css */
#main-doc {
  section
}

body {
  font-family: sans-serif;
}

main {
  margin: 0 auto;
  width: 800px;
}

section {
  margin-bottom: 20px;
}

header {
  font-size: 20px;
  margin-bottom: 10px;
}

code {
  background-color: #eee;
  padding: 10px;
}

nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 768px) {
  nav {
    display: none;
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

They need to match exactly.

id="Food_Groups"
href="#Food_groups"
3

Oh my goodness! I’ve been pulling my hair out and missed that.
Is it only in here that it matters? Google Bard didn’t catch that, and the two different validators didn’t either.

4

It isn’t really an error, as such it will validate.

An automated system would need to use some heuristics to analyze the code and find the mismatch between the two values and have rules in place to warn about it. Not sure if one such exists. If it is AI ( large language model) it might need enough context about the code and what is expected from it.