Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Your #navbar should have exactly one header element within it.
can’t get it done!

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>JS Documentation Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <code>
      <p>in this course we will learn the meaning of ipsum</p>
      <p>in this course we will learn the meaning of ipsum</p>
      </code>
    </section>
    <section class="main-section" id="What_you_should_already_know">
      <header>What you should already know</header>
    </section>
    <section class="main-section" id="JavaScript_and_Java">
      <header>JavaScript and Java</header>
      <code>
      <p>in this course we will learn the meaning of ipsum</p>
      <p>in this course we will learn the meaning of ipsum</p>
      </code>
    </section>
    <section class="main-section" id="Hello_world">
      <header>Hello world</header>
      <code>
      <p>in this course we will learn the meaning of ipsum</p>
      <p>in this course we will learn the meaning of ipsum</p>
      </code>
      <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>React</li>
        <li>GitHub</li>
      </ol>
    </section>
    <section class="main-section" id="Variables">
      <header>Variables</header>
      <code>
      <p>in this course we will learn the meaning of ipsum</p>
      <p>in this course we will learn the meaning of ipsum</p>
      </code>
    </section>
    <section class="main-section" id="Declaring_variables">
      <header>Declaring variables</header>
      <code>
      <p>in this course we will learn the meaning of ipsum</p>
      <p>in this course we will learn the meaning of ipsum</p>
      </code>
    </section>
    <section class="main-section" id="Variables_scope">
      <header>Variables scope</header>
    </section>
    <section class="main-section" id="Global_variables">
      <header>Global variables</header>
    </section>
    <section class="main-section" id="Constants">
      <header>Constants</header>
    </section>
    <section class="main-section" id="Data_types">
      <header>Data types</header>
    </section>
    <section class="main-section" id="if...else_statement">
      <header>if...else statement</header>
    </section>
    <section class="main-section" id="while_statement">
      <header>while statement</header>
    </section>
    <section class="main-section" id="Function_declarations">
      <header>Function declarations</header>
    </section>
    <section class="main-section" id="Reference">
      <header>Reference</header>
    </section>
  </main>
  <nav id="navbar">
      <header><a class="nav-link" href="#Introduction">Introduction</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Hello_world">Hello world</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Variables">Variables</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Declaring_variables">Declaring variables</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Variables_scope">Variables scope</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Global_variables">Global variables</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Constants">Constants</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Data_types">Data types</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#if...else_statement">if...else statement</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#while_statement">while statement</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Function_declarations">Function declarations</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Reference">Reference</a></header>
  </nav>
</body>
</html>

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hi @Kesho1992

Thank you for posting your code with a neat indentation.

Firstly, the point of nav elements are to contain all of your link inside it. So you don’t need to wrap each link in nav element as you can see here

      ...
      <nav id="navbar">
      <header><a class="nav-link" href="#Data_types">Data types</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#if...else_statement">if...else statement</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#while_statement">while statement</a></header>
      </nav>
      <nav id="navbar">
      <header><a class="nav-link" href="#Function_declarations">Function declarations</a></header>
      </nav>
      ...

You are allowed to use multiple nav element in the world application, but it should contain several links to it, not just one :slight_smile:

And when you are done with creating the navbar, proceed into putting just one header inside it

Hope that helps :pray:

1 Like
3

Thank you so much for explaining! worked like a charm.

4

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