Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Your code so far

<!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>
    <nav id="navbar">
      <header class="navbar-header">HTML Documentation
      </header>
      <ul>  
        <li><a href="#Introduction"class="nav-link">Introduction</a></li>
        <li><a href="#Tags" class="nav-link">Tags</a></li>
        <li><a href="#forms" class="nav-link">Forms</a></li>
        <li><a href="#Variables" class="nav-link">Variables</a></li>
        <li><a href="#Function_declarations" class="Function_declarations">Function declarations</a></li>
        <li><a href="#Reference" class="nav-link">Reference</a></li>
      </ul>
    </nav>

    <main id="main-doc">
      <section class="main-section" id="introduction">
        <header>Introduction</header>
        <article>
        <p>HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.</p>
        <p>One of HTML's main jobs is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.</p>
        <ul>
          <li>Creating hyperlinks
Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.</li>
<li>Advanced text formatting
There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.</li>
        </ul>
        </article>
      </section>
      <section class="main-section" id="tags">
        <header>Tags</header>
        <article>
          <p>HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.</p>
       <p>When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.</p>
       <ul>
         <li>An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.</li>
         <li>All HTML tags must enclosed within < > these brackets.</li>
         <li>Every tag in HTML perform different tasks.</li>
          <li>If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)</li>
         </ul>   
        </article>
      </section>
      <section class="main-section" id="forms">
        <header>Forms</header>
        <article>
          <p><form> is a HTML element to collect input data with containing interactive controls. It provides facilities to input text, number, values, email, password, and control fields such as checkboxes, radio buttons, submit buttons, etc., or in other words, form is a container that contains input elements like text, email, number, radio buttons, checkboxes, submit buttons, etc. Forms are generally used when you want to collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment details in the payment form to place an order.</p>
          <p>Forms are created by placing input fields within paragraphs, preformatted text, lists and tables. This gives considerable flexibility in designing the layout of forms. </p>
          <h2>Form Elements</h2>
          <h3>These are the following HTML <form> elements:</h3>
          <ul>
            <li>Label: It defines label for <form> elements.</li>
            <li>Input: It is used to get input data from the form in various types such as text, password, email, etc by changing its type.</li>
            <li>Button: It defines a clickable button to control other elements or execute a functionality.</li>
            <li>Select: It is used to create a drop-down list.</li>
            <li>Textarea: It is used to get input long text content.</li>
            <li>Fieldset: It is used to draw a box around other form elements and group the related data.</li>
            <li>Legend: It defines caption for fieldset elements.</li>
            <li>Datalist: It is used to specify pre-defined list options for input controls.</li>
            <li>Optgroup: It is used to define group-related options in a drop-down list.</li>
          </ul>
        </article>
      </section>
      <section class="main-section" id="Variables">
        <header>Variables</header>
        <article>
          <p> HTML variables is a phrase tag and used to specify the variable in a mathematical equation or in the computer program. The content of this tag is displayed in an italic format in most of the browsers.</p>
          <p>A substitution variable holds a value that HTML code can reference. At run time, the actual value replaces a substitution variable. You use square brackets to delineate a substitution variable.</p>
          <code><code>var n = 0; var x = 0; while (n &lt; 3) { n++; x += n; }</code>
          <p>
            With each iteration, the loop increments n and adds that value to x.
            Therefore, x and n take on the following values:
          </p>

          <ul>
            <li>After the first pass: n = 1 and x = 1</li>
            <li>After the second pass: n = 2 and x = 3</li>
            <li>After the third pass: n = 3 and x = 6</li>
          </ul>
          <p>
            After completing the third pass, the condition n &lt; 3 is no longer
            true, so the loop terminates.
          </p>
        </article>
      </section>
      <section class="main-section" id="Function_declarations">
        <header>Function declarations</header>
        <article>
          A function definition (also called a function declaration, or function
          statement) consists of the function keyword, followed by:

          <ul>
            <li>The name of the function.</li>
            <li>
              A list of arguments to the function, enclosed in parentheses and
              separated by commas.
            </li>
            <li>
              The JavaScript statements that define the function, enclosed in
              curly brackets, { }.
            </li>
          </ul>
          <p>
            For example, the following code defines a simple function named
            square:
          </p>

          <code>function square(number) { return number * number; }</code>
          <p>
            The function square takes one argument, called number. The function
            consists of one statement that says to return the argument of the
            function (that is, number) multiplied by itself. The return
            statement specifies the value returned by the function.
          </p>
          <code>return number * number;</code>
          <p>
            Primitive parameters (such as a number) are passed to functions by
            value; the value is passed to the function, but if the function
            changes the value of the parameter, this change is not reflected
            globally or in the calling function.
          </p>
        </article>
      </section>
      <section class="main-section" id="reference">
        <header>Reference</header>
        <article>
          <ul>
            <li>All the documentation in this page is taken from
            <a href="https://technical-documentation-page.freecodecamp.rocks/"></a> </li>
          </ul>
        </article>

      </section>

    </main>

  </body>
</html>

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

The number of my .nav-link and .main-section elements corresponds in the code but it still does not pass

make sure the ids of the main-section match exactly the header text.
In this case, you should use Introduction for the id not introduction.

here is another area to fix
the href should be #Forms and below the id should be Forms

Thank you @hbar1st , i have made the corrections but the code did not pass still

i found one other place you must fix.
Please try to double check all the code yourself:

ok @hbar1st , am still stocked here with test 17, 19 and 20
Please i need help

what are those steps? the link you posted only has 15?

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

TEST 19
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”).

TEST 20
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 one is missing the nav-link class

Thank you so much @hbar1st

1 Like