Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I have passed all the tests except one.
-The header element in the #navbar should come before any link (a) elements also in the #navbar.
What might be wrong with my code?

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>Technical Documentation Page</title><link  rel="stylesheet" href="styles.css"></head>
<body><main id="main-doc">JS Documentation<section class="main-section"        id="Introduction"><header>Introduction</header><nav id="navbar"><a class="nav-link" href="#Introduction">Introduction</a></nav><p></p><li></li></section><section class="main-section" id="What_you_should_already_know"><header>What you should already know</header><nav id="navbar"><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></nav><p></p><li></li></section><section class="main-section" id="JavaScript_and_Java"><header>JavaScript and Java</header><nav id="navbar"><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></nav><p></p></section><section class="main-section" id="Hello_world"><header>Hello world</header><nav id="navbar"><a class="nav-link" href="#Hello_world">Hello world</a></nav><p></p><code></code></section><section class="main-section" id="Variables"><header>Variables</header><nav id="navbar"><a class="nav-link" href="#Variables">Variables</a></nav><p></p></section><section class="main-section" id="Declaring_variables"><header>Declaring variables</header><nav id="navbar"><a class="nav-link" href="#Declaring_variables">Declaring variables</a></nav><p></p><code></code></section><section class="main-section" id="Variable_scope"><header>Variable scope</header><nav id="navbar"><a class="nav-link" href="#Variable_scope">Variable scope</a><p></p><code></code></section><section class="main-section" id="Global_variables"><header>Global variables</header><nav id="navbar"><a class="nav-link" href="#Global_variables">Global variables</a></nav><p></p></section><section class="main-section" id="Constants"><header>Constants</header><nav id="navbar"><a class="nav-link" href="#Constants">Constants</a></nav><p></p><code></code></section><section class="main-section" id="Data_types"><header>Data types</header><nav id="navbar"><a class="nav-link" href="#Data_types">Data types</a></nav><p></p><li></li></section><section class="main-section" id="if...else_statement"><header>if...else statement</header><nav id="navbar"><a class="nav-link" href="#if...else_statement">if...else statement</a></nav><p></p><code></code></section><section class="main-section" id="while_statement"><header>while statement</header><nav id="navbar"><a class="nav-link" href="#while_statement">while statement</a></nav><p></p><code></code><li></li></section><section class="main-section" id="Function_declarations"><header>Function declarations</header><nav id="navbar"><a class="nav-link" href="#Function_declarations">Function declarations</a>
</nav><p></p><code></code><li></li></section><section class="main-section" id="Reference"> <header>Reference</header><nav id="navbar"><header>Reference</header><li></li><a class="nav-link" href="#Reference">Reference</a></nav></section></main></body></html>

/* file: styles.css */
@media (max-width: 960px) {#introduction{width: 350px}}

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 Edg/114.0.1823.51

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

The format of your code is not easy to read :confused:

It would take time for people to reformat to spot what could be wrong.
Most people wont do to that, since many people on here are volunteers or other people learning to code.

If you formatted the code in this way because its to long to post.
I can understand you trying this. :smiley:
Learning how to ask a question and providing relevant information in a way that helps others help you is part of learning to code.

However there are other ways to post code to get an answer.
You can link to your code if you have it stored on the internet, I’ve seen people use code pen to do this.

you may need to make an account.

OR

Another solution is to post the code you think most relevant.
This could be a section of code, or an example code that demonstrates a bug or issue your having.

If your still having a problem with passing. Try reformatting posting using the section of code you think most relevant.
Writing a short description of what you have already tried can also be helpful.

It’s impossible to read code formatted like that.
I have pasted your code into a code formatter and this is the result:

<!-- 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>Technical Documentation Page</title>
      <link  rel="stylesheet" href="styles.css">
   </head>
   <body>
      <main id="main-doc">
         JS Documentation
         <section class="main-section" id="Introduction">
            <header>Introduction</header>
            <nav id="navbar"><a class="nav-link" href="#Introduction">Introduction</a></nav>
            <p></p>
            <li></li>
         </section>
         <section class="main-section" id="What_you_should_already_know">
            <header>What you should already know</header>
            <nav id="navbar"><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></nav>
            <p></p>
            <li></li>
         </section>
         <section class="main-section" id="JavaScript_and_Java">
            <header>JavaScript and Java</header>
            <nav id="navbar"><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></nav>
            <p></p>
         </section>
         <section class="main-section" id="Hello_world">
            <header>Hello world</header>
            <nav id="navbar"><a class="nav-link" href="#Hello_world">Hello world</a></nav>
            <p></p>
            <code></code>
         </section>
         <section class="main-section" id="Variables">
            <header>Variables</header>
            <nav id="navbar"><a class="nav-link" href="#Variables">Variables</a></nav>
            <p></p>
         </section>
         <section class="main-section" id="Declaring_variables">
            <header>Declaring variables</header>
            <nav id="navbar"><a class="nav-link" href="#Declaring_variables">Declaring variables</a></nav>
            <p></p>
            <code></code>
         </section>
         <section class="main-section" id="Variable_scope">
            <header>Variable scope</header>
            <nav id="navbar">
            <a class="nav-link" href="#Variable_scope">Variable scope</a>
            <p></p>
            <code></code>
         </section>
         <section class="main-section" id="Global_variables">
            <header>Global variables</header>
            <nav id="navbar"><a class="nav-link" href="#Global_variables">Global variables</a></nav>
            <p></p>
         </section>
         <section class="main-section" id="Constants">
            <header>Constants</header>
            <nav id="navbar"><a class="nav-link" href="#Constants">Constants</a></nav>
            <p></p>
            <code></code>
         </section>
         <section class="main-section" id="Data_types">
            <header>Data types</header>
            <nav id="navbar"><a class="nav-link" href="#Data_types">Data types</a></nav>
            <p></p>
            <li></li>
         </section>
         <section class="main-section" id="if...else_statement">
            <header>if...else statement</header>
            <nav id="navbar"><a class="nav-link" href="#if...else_statement">if...else statement</a></nav>
            <p></p>
            <code></code>
         </section>
         <section class="main-section" id="while_statement">
            <header>while statement</header>
            <nav id="navbar"><a class="nav-link" href="#while_statement">while statement</a></nav>
            <p></p>
            <code></code>
            <li></li>
         </section>
         <section class="main-section" id="Function_declarations">
            <header>Function declarations</header>
            <nav id="navbar"><a class="nav-link" href="#Function_declarations">Function declarations</a></nav>
            <p></p>
            <code></code>
            <li></li>
         </section>
         <section class="main-section" id="Reference">
            <header>Reference</header>
            <nav id="navbar">
               <header>Reference</header>
               <li></li>
               <a class="nav-link" href="#Reference">Reference</a>
            </nav>
         </section>
      </main>
   </body>
</html>

I think you misunderstand how a navbar is supposed to work.
You should have only one nav element, which usually sits at the top of your html body, above all of the other page content.
Inside the nav should be all of the links to the other sections of the page.
As a side point to this, id attributes must be unique. You have several nav elements, all of which have the same id attribute.

I have reformatted my code but still the same issue.

Have you removed all of the duplicated nav elements and collected all of the .nav-link elements together inside a single nav element?

Try nesting them like this

 <nav id="navbar">
       <header>Moondstad Characters</header>
        <ul>
        <li><a class="nav-link" href="#Diluc">Diluc</a></li>
        <li><a class="nav-link" href="#Lumine">Lumine</a></li>
        <li><a class="nav-link" href="#Albedo">Albedo</a></li>
        <li><a class="nav-link" href="#Jean">Jean</a></li>
        <li><a class="nav-link" href="#Aether">Aether</a></li>
        <li><a class="nav-link" href="#Klee">Klee</a></li>
        </ul>
    </nav>
1 Like

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