Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
It’s a building Documentation form in the first html everything passes but not this " Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id)."
I have no idea why can someone help?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>

</body>

<main id="main-doc">
  <section id="Introduction" class="main-section">
    <header>Introduction</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="What_you_should_already_know" class="main-section" >
    <header>What you should already know</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="JavaScript_and_Java" class="main-section" >
    <header>JavaScript and Java</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="Hello_World" class="main-section" >
    <header>Hello World</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="Variables" class="main-section" >
    <header>Variables</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <nav id="navbar">
    <header>JS Documentation</header>
    <a href="Introduction" class="nav-link" >Introduction</a>
    <h1></h1>
    <a href="What_you_should_already_know" class="nav-link" >What you should already know</a>
    <h1></h1>
    <a href="JavaScript_and_Java" class="nav-link" >JavaScript and Java</a>
    <h1></h1>
    <a href="Hello_World" class="nav-link" >Hello World</a>
    <h1></h1>
    <a class="nav-link" href="Variables">Variables</a>
  </nav>
</main>


</html>
/* file: styles.css */
@media (min-width: 800px) {
  background-color: green;
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

MDN: Document fragments

We also often refer to these as internal, or same page links.

ok I have done this and it still doesn’t work

You’ll need to paste your updated HTML in here so we can see what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

   <header>Variables</header>
   <p></p>
   <p></p>
   <code></code>
   <li></li>
 </section>
 <nav id="navbar">
   <header>JS Documentation</header>
   <a href="index.html#Introduction" class="nav-link" >Introduction</a>
   <h1></h1>
   <a href="index.html#What_you_should_already_know" class="nav-link" >What you should already know</a>
   <h1></h1>
   <a href="index.html#JavaScript_and_Java" class="nav-link" >JavaScript and Java</a>
   <h1></h1>
   <a href="index.html#Hello_World" class="nav-link" >Hello World</a>
   <h1></h1>
   <a class="nav-link" href="index.html#Variables">Variables</a>
 </nav> ```

thank you I would struggle with that for an hour :slight_smile:

You pasted it in correctly, but you didn’t include all of your HTML. We need everything.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>

</body>

<main id="main-doc">
  <section id="Introduction" class="main-section">
    <header>Introduction</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="What_you_should_already_know" class="main-section" >
    <header>What you should already know</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="indexJavaScript_and_Java" class="main-section" >
    <header>JavaScript and Java</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="Hello_World" class="main-section" >
    <header>Hello World</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <section id="Variables" class="main-section" >
    <header>Variables</header>
    <p></p>
    <p></p>
    <code></code>
    <li></li>
  </section>
  <nav id="navbar">
    <header>JS Documentation</header>
    <a href="index.html#Introduction" class="nav-link" >Introduction</a>
    <h1></h1>
    <a href="index.html#What_you_should_already_know" class="nav-link" >What you should already know</a>
    <h1></h1>
    <a href="index.html#JavaScript_and_Java" class="nav-link" >JavaScript and Java</a>
    <h1></h1>
    <a href="index.html#Hello_World" class="nav-link" >Hello World</a>
    <h1></h1>
    <a class="nav-link" href="index.html#Variables">Variables</a>
  </nav>
</main>


</html>
  background-color: green;
}

It appears the tests don’t like that you added index.html before the # on those URLs. Technically, it shouldn’t make a difference, but the tests weren’t expecting it, and it isn’t really needed since you are linking to ids on the same page. So get rid of index.html in those URLs.

did it work when you tried it? it still doesn’t work for me

ok I found the issue thank you for help <3

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