Technical Documentation Page - Build a Technical Documentation Page

hello, i dont know where i am wrong.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <section id="Introduction" class="main-section">
        <header>Introduction</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
              <header>Introduction</header>
              <a class="nav-link" href="/#Introduction/">Introduction</a>
              </nav>
      </section>
      <section id="What_you_should_already_know" class="main-section">
        <header>What you should already know
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
              
              <a class="nav-link" href="/#What_you_should_already_know/">What you should already know</a>
              </nav>

      </section>
      <section id="JavaScript_and_Java" class="main-section">
        <header>JavaScript and Java
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
         
              <a class="nav-link" href="/#JavaScript_and_Java/">JavaScript and Java</a>
              </nav>

      </section>
      <section id="Hello_world" class="main-section">
<header>Hello world
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
              
              <a class="nav-link" href="/#Hello_world/">Hello world</a>
              </nav>

      </section>
        
      <section id="Variables" class="main-section">
        <header>Variables
</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
            <nav id="navbar">
            
              <a class="nav-link" href="/#Variables/">Variables</a>
            </nav>
      </section>

    </main>
  </body>
</html>
/* file: styles.css */
#navbar{
  text-align: left;
}
@media (min-width:567px){

}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Can you provide more information about what you are struggling to do?

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).

this should be href="#Introduction" without any slashes if you want to link to a section whose id is Introduction

i removed the slashes and still have the same problem !

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <nav id="navbar">
      <header>JS Documentation</header>
      
        <ul>
          <li><a class="nav-link" href="#Introduction">Introduction</a></li>
          <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
          <li><a class="nav-link" href="#Javascript_and_Java">JavaScript and Java</a></li>
          <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
          <li><a class="nav-link" href="#Variables">Variables</a></li>
          </ul> 
        </nav>
      <section id="Introduction" class="main-section">
        <header>Introduction</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
      </section>
      
      <section id="What_you_should_already_know" class="main-section">
        <header>What you should already know</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>

      </section>
      <section id="JavaScript_and_Java" class="main-section">
        <header>JavaScript and Java</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
           

      </section>
      <section id="Hello_world" class="main-section">
<header>Hello world</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
         

      </section>
        
      <section id="Variables" class="main-section">
        <header>Variables</header>
        <p><code></code></p>
        <p></p>
        <ul>
          <li></li>
          <ul>
      </section>

    </main>
  </body>
</html>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

you have to make sure all your links are working. For eg. this link doesn’t work because the id is not an exact match

thank you i passed the code

1 Like