Build a Technical Documentation Page - same number of .nav-link and .main-section elements

HTML-CSS
1

I have double checked and tripled checked… my code currently passes all the tests for this challenge except for 1:

You should have the same number of .nav-link and .main-section elements.

As far as I can tell, I have the same number of those 2 element types…

My html code is here:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Python Beginner's Documentation</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <nav id="navbar">
      <header>&nbsp&nbspPython Docs</header>
      <div>
        <a class="nav-link" href="#Introduction_to_Python"><li>Introduction to Python</a>
      </div>
      <div>
        <a class="nav-link" href="#Install_Python"><li>Install Python</a>
      </div>
      <div>
        <a class="nav-link" href="#Hello_World"><li>Hello World</a>
      </div>
      <div>
        <a class="nav-link" href="#Variables"><li>Variables</a>
      </div>
      <div>
        <a class="nav-link" href="#if_else_statement"><li>if else statement</a>
      </div>
      <div>
        <a class="nav-link" href="#To_learn_more"><li>To learn more</a>
      </div>
    </nav>

    <main id="main-doc">
      
      <section class="main-section" id="Introduction_to_Python">
        <header>Introduction to Python</header>
        <p>
          Python consistently ranks amongst the most popular programming languages today. It features a simple syntax that is similar to the English language and also runs on an interpreter system, allowing code to be executed as soon as it is written. This makes it very fast for prototyping purposee.
        </p>
        <p>
          It was created by Guido van Rossum, and released in 1991.
        </p>
        <p>
          It can be used for:
          <ul>
            <li> web development (server-side)
            <li> software development
            <li> data analytics
            <li> mathematics
            <li> system scripting
          </ul>
        </p>
      </section>
      
      <section class="main-section" id="Install_Python">
        <header>Install Python</header>
        <p>
          You can opt to install it directly from <a href="https://www.python.org/">python.org</a>. Alternatively, you can install it with a package manager such as pip or conda.
        </p>
        <p>
           Once that is done, you can use any text editor to start writing your code! You can also execute python code in the console. To launch python in the console, you can type <code>python</code> in your console. This should show something like the following:
        </p>
        <p>
          <code class="codeblock">Python 3.9.6 (tags/v3.9.6:db3ff76, Jun 28 2021, 15:26:21) [MSC v.1929 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.</code>
        </p>
      </section>
      
      <section class="main-section" id="Hello_World">
        <header>Hello World</header>
        <p>The quintessential Hello World example:</p>
        <p>
          <code class="codeblock">print("Hello World!")</code>
        </p>
        <p>
          That's it! No boilerplate, no semicolons. Simple isn't it?
        </p>
      </section>
      
      <section class="main-section" id="Variables">
        <header>Variables</header>
        <p>
          In python you can declare variables without stating the type. That is automatically taken care of:
        </p>
        <p>
          <code class="codeblock">
            a = 2<br>
            b = "a string"<br>
            c = 3.5
          </code>
        </p>
      </section>
      
      <section class="main-section" id="if_else_statement">
        <header>if else statement</header>
        <p>
          To write a program, one of the most basic logic statements you have to learn is the if... else... statement. Here's a quick example:
        </p>
        <p>
          <code class="codeblock">
            if outside = True:<br>
            &nbsp&nbsp&nbsp&nbspprint("I am outside!")<br>
            else:<br>
            &nbsp&nbsp&nbsp&nbspprint("I am inside!")
          </code>
        </p>
      </section>
      
      <section class="main-section" id="To_learn_more">
        <header>To learn more</header>
        <p>
          This is but a very short introduction. Now go forth and learn more at <a href="https://www.freecodecamp.org/">freeCodeCamp</a>!
        </p>
      </section>
    </main>
  </body>
</html>
2

You have a -large- number of these li opening tags that have no matching closing tags.

Can you try to fix that?

3

Thank you so much. I was so stuck on this.

1 Like