Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Hello everyone. I am working on this technical page project but i cannot seem to pass two tests:
Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
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).

Does anyone know what I am doing wrong?

type or paste code here
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>  
<body>
<main id="main-doc">

<section class="main-section" id="Resource_list">
<header id="Resource_List">Resource List</header>
<p>Greetings students this is page with a resource list to help you learn more about programming languages </p>
  <p> Popular Topics </p>
      <ul>
        <li><a >Introduction</a></li>
        <li>
          <a>What you should already know</a>
        </li>
        <li>
          <a >JavaScript and Java</a>
        </li>
        <li><a >Hello world</a></li>
        <li><a >Variables</a></li>
        <li>
          <a>Declaring variables</a>
        </li>

      </ul>
<p> LINK </p>

    <code></code>
</section>
<section class="main-section" id="JavaScript">
<header id="JavaScript_Resources"> JavaScript </header>
<p>JavaScript is one of basis for web development. This is an crucial language to learm </p>
<p> LINK </p>
    <code></code>
</section>
<section class="main-section" id="Python">
<header id="Python_Resources">Python</header>
<p>Python is a extremely popular language for beginners to learn when starting out with programming </p>
<p> LINK </p>
    <code></code>
</section>
<section class="main-section" id="C++">
  <header id="C++_Resources"> C++</header>
<p>C++ is a complex language, and for this reason is nto very well liked in the community </p>
<p> LINK </p>
<code></code>
</section>
<section class="main-section" id="React">
  <header id="React_Resources">React</header>
<p>React is a simple modular programming language </p>
<p> LINK </p>
    <code></code>
   </section>
      <nav id="navbar">
  <header> Navigation</header>
  <ul>
  <li><a class="nav-link" href="#JavaScript">JavaScript Resources</a></li>
    <li><a class="nav-link" href="#Python_Resources">Python Resources</a></li>
    <li><a class="nav-link" href="#C++_Resources"> C++ Resources</a></li>
    <li><a class="nav-link" href="#React_Resources"> React Resources</a></li>
    <li><a class="nav-link" href="Resource_List">Resource List</a></li>
</ul>
    </nav>
</main>  

</body>
</html>
2

Look above please. The header text is Javascript but the id is “JavaScript_Resources”. These two must match.

Then the nav-link also has the same issue. The id must match the href value and the text of the link.

(check all of the links and all the headers. They all must match as per the requirements)

3

Hello and thank you for your help. I changed the ids fo the header and i passed the first test.
For som reason i still can’t pass the second one, even thougt i changed every href and ids

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>  
<body>
<main id="main-doc">

<section class="main-section" id="Resource_list">
<header id="Resource_List">Resource List</header>
<p>Greetings students this is page with a resource list to help you learn more about programming languages </p>
  <p> Popular Topics </p>
      <ul>
        <li><a >Introduction</a></li>
        <li>
          <a>What you should already know</a>
        </li>
        <li>
          <a >JavaScript and Java</a>
        </li>
        <li><a >Hello world</a></li>
        <li><a >Variables</a></li>
        <li>
          <a>Declaring variables</a>
        </li>

      </ul>
<p> LINK </p>

    <code></code>
</section>
<section class="main-section" id="JavaScript_Resources">
<header id="JavaScript_Resources"> JavaScript Resources</header>
<p>JavaScript is one of basis for web development. This is an crucial language to learm </p>
<p> LINK </p>
    <code></code>
</section>
<section class="main-section" id="Python_Resources">
<header id="Python_Resources">Python Resources</header>
<p>Python is a extremely popular language for beginners to learn when starting out with programming </p>
<p> LINK </p>
    <code></code>
</section>
<section class="main-section" id="C++_Resources">
  <header id="C++_Resources"> C++ Resources</header>
<p>C++ is a complex language, and for this reason is nto very well liked in the community </p>
<p> LINK </p>
<code></code>
</section>
<section class="main-section" id="React_Resources">
  <header id="React_Resources">React Resources</header>
<p>React is a simple modular programming language </p>
<p> LINK </p>
    <code></code>
   </section>
      <nav id="navbar">
  <header> Navigation</header>
  <ul>
  <li><a class="nav-link" href="#JavaScript_Resources">JavaScript Resources</a></li>
    <li><a class="nav-link" href="#Python_Resources">Python Resources</a></li>
    <li><a class="nav-link" href="#C++_Resources"> C++ Resources</a></li>
    <li><a class="nav-link" href="#React_Resources"> React Resources</a></li>
    <li><a class="nav-link" href="Resource_List">Resource List</a></li>
</ul>
    </nav>
</main>  

</body>
</html>
4

You have created duplicate ids.
That is not allowed in html.
Delete all the duplicates and hopefully that will help.

5

Hello, thank you very much for your reply. It was the duplicated ids and i was missing a capital letter. Thank you once again

1 Like
6

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