Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening: I am continuously getting the error-

Each .nav-link should have a text that corresponds to the header text of its related section .

I have looked over my code more times than i can count and just can’t figure it out. Any suggestions would be appreciated.

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">
  <link rel="stylesheet" href="styles.css">
  <title>Technical Documentaion Page - freeCodeCamp</title>
</head>

<body>
  <nav id="navbar">
    <header id="main-header">
      <h1>Coding Languages</h1><br>
      <ul>
        <li><a class="nav-link" href="#Introduction"></a>Introduction</li>
        <li><a class="nav-link" href="#HTML"></a>HTML</li>
        <li><a class="nav-link" href="#CSS"></a>CSS</li>
        <li><a class="nav-link" href="#JavaScript">JavaScript</a></li>
        <li><a class="nav-link" href="#Java">Java</a></li>
        <li><a class="nav-link" href="#Python">Python</a></li>
        <li><a class="nav-link" href="#C">C</a></li>
        <li><a class="nav-link" href="#C_Plus_Plus">C Plus Plus</a></li>
        <li><a class="nav-link" href="#C_Sharp">C Sharp</a></li>
        <li><a class="nav-link" href="#Rust">Rust</a></li>
      </ul>
    </header> 
  </nav><br>
  

  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <article class="main-article">
        <p>Coding languages are how we give computers the instructions to do
          what we need them to do. There are many different languages defined 
          by their unique syntax. There is no "one size fits all" coding
          coding language, and all of them has their purpose. Below, we'll go 
          over a few of the most popular coding languages out there today that 
          used to create things like:</p>
          <ul>
            <li>Computer Operating Systems</li>
            <li>Video Games</li>
            <li>Photo, Video, and Audio Editing Software</li>
            <li>Mobile Device Applications</li>
            <li>Websites</li>
          </ul>
        </article>
      </section><br>

      <section class="main-section" id="HTML">
        <header>HTML</header>
        <article class="main-article">
          <p>HTML, or Hyper-Text Markup Language, is the standard language for 
            creating webpages. It is used to create the basic setup of a 
            webpage, and is later styled and made interactive using other 
            languages like CSS and JavaScript.</p>
            
            <p>A snippet of HTML code looks like this:</p>

            <code>&lt;html&gt;<br>&lt;head&gt;<br>&lt;/head&gt;<br>
              &lt;body&gt;<br>&lt;p&gt;Hello World&lt;/p&gt;<br>
              &lt;/body&gt;<br>&lt;/html&gt;<br></code>

          <p>You can enter this code into any code editor setup for HTML and 
            get the most famous message in programming, "Hello World". We'll 
            learn this with all of the different languages we go over her.</p>

        </article>
      </section><br>

      <section class="main-section" id="CSS">
        <header>CSS</header>
        <article class="main-article">
          <p>CSS, or Cascading Style Sheets, is a language designed 
            specifically to arrange, organize, and style elements of a 
            HTML coded webpage.</p>

          <p>We use it by declaring classes, ids, and other selectors to our 
            HTML elements, and then using those selectors to call upon those 
            elements so that we can style them with our CSS code. That looks 
            like this:</p>

            <code>h1 {<br>width: 10px;<br>height: 10px<br>}</code>

          <p>This would declare the width and height of any HTML code defined 
            by the element "h1". While we can't use basic CSS to write our 
            Hello World code, we can use the code above to change the size 
            the Hello World output when displayed.</p>

          </article>         
        </section><br>

        <section class="main-section" id="JavaScript">
          <header>JavaScript</header>
          <article class="main-article">
            <p>JavaScript is a scripting language used to make webpages more 
              interactive. It enables you to create dynamically updating 
              content, control multimedia, create animations, and much much 
              more.</p>
              
              <p>Hello World can be displayed by writing:</p>

              <code>document.write("hello world");</code>

          </article>
        </section><br>

        <section class="main-section" id="Java">
          <header>Java</header>
          <article class="main-article">
            <p>Java is a multi-platform, object-oriented, and network-centric 
              language used to create web applications like games and product 
              customizers. Unlike JavaScript, which is meant to be used with 
              other things like HTML and CSS, Java is meant to be a 
              stand-alone language to create applications from scratch.</p>
              
              <p>Here is a snippet of Java code:<br></p>

              <code>class HelloWorld {<br>&emsp;&emsp;&emsp;public static 
              void main(String[] args)&nbsp;{<br>&emsp;&emsp;&emsp;&emsp;
              &emsp;System.out.printIn("Hello World");<br>&emsp;&emsp;}<br>
              &emsp;}</code>

          </article>
        </section><br>

        <section class="main-section" id="Python">
          <header>Python</header>
          <article class="main-article">
            <p>Python is a multipurpose coding language primarily used for 
              building website and software, automating tasks, and conducting 
              data analysis. Due to this it is considered a "general purpose 
              language".</p>
               
              <p>Here is our snippet of Python code:<br></p>

              <code>print('Hello World')</code>

          </article>
        </section><br>

        <section class="main-section" id="C">
          <header>C</header>
          <article class="main-article">
            <p>C is low-level general purpose coding language used in many 
              of the worlds most famous computer operating systems including 
              many older versions of Windows and new versions of Linux</p>

              <p>Here is how to write Hello World in C:<br></p>

              <code>#include &lt;stdio.h&gt;<br>int main() {<br>&nbsp;&nbsp; 
              printf("Hello World");<br>&nbsp;&nbsp;&nbspreturn 0;<br>}</code>

          </article>
        </section><br>

        <section class="main-section" id="C_Plus_Plus">
          <header>C Plus Plus</header>
          <article class="main-article">
            <p>C++ is another general purpose programming language and is 
              arguably the most used language world-wide at the moment. It 
              was initially built as a decsendant of the C programming 
              language to improve upon its capabilities. C++ is used in many 
              applications from website and software development to operating 
              systems and video games.</p>

              <p>This is how we would write our Hello World code in the 
                C++ language:<br></p>

                <code>#include &lt;iostream&gt;<br><br>int main() {<br>
                &nbsp;&nbsp;std::cout &lt;&lt; "Hello World";<br>&nbsp;&nbsp;
                return 0;<br>}</code>

          </article>
        </section><br>

        <section class="main-section" id="C_Sharp">
          <header>C Sharp</header>
          <article class="main-article">
            <p>C# (C Sharp) is a high level general purpose programming 
              language that is object-oriented. A more modern version of the C 
              and C++ programming languages used because of easier to learn 
              syntax.</p>

              <p>Here is our Hello World code for C#:<br></p>

              <code>namespace HelloWorld<br>&nbsp;{<br>&nbsp;&nbsp;class Hello 
              {<br>&nbsp;&nbsp;&nbsp;&nbsp;static void Main(string[] args)<br>
              &nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              System.Console.WriteLine("Hello World");<br>&nbsp;&nbsp;&nbsp;
              &nbsp;}<br>&nbsp;&nbsp;}<br>}</code>

          </article>
        </section><br>

        <section class="main-section" id="Rust">
          <header>Rust</header>
          <article class="main-article">
            <p>Rust, similarly syntaxed to C++, is another general purpose 
              language mostly used in web development due to it being bug-free 
              and higher performance than C++. It was initially developed for 
              Firefox but can be used almost anywhere.</p>

              <p>And here is our final Hello World code:<br></p>

              <code>fn main() {<br>&nbsp;&nbsp;pringIn!("Hello World");<br>
              }</code>

          </article>
        </section>

  </main>

</body>

</html>

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 lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Technical Documentaion Page - freeCodeCamp</title>
</head>

<body>
  <nav id="navbar">
    <header id="main-header">
      <h1>Coding Languages</h1><br>
      <ul>
        <li><a class="nav-link" href="#Introduction"></a>Introduction</li>
        <li><a class="nav-link" href="#HTML"></a>HTML</li>
        <li><a class="nav-link" href="#CSS"></a>CSS</li>
        <li><a class="nav-link" href="#JavaScript">JavaScript</a></li>
        <li><a class="nav-link" href="#Java">Java</a></li>
        <li><a class="nav-link" href="#Python">Python</a></li>
        <li><a class="nav-link" href="#C">C</a></li>
        <li><a class="nav-link" href="#C_Plus_Plus">C Plus Plus</a></li>
        <li><a class="nav-link" href="#C_Sharp">C Sharp</a></li>
        <li><a class="nav-link" href="#Rust">Rust</a></li>
      </ul>
    </header> 
  </nav><br>
  

  <main id="main-doc">
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <article class="main-article">
        <p>Coding languages are how we give computers the instructions to do
          what we need them to do. There are many different languages defined 
          by their unique syntax. There is no "one size fits all" coding
          coding language, and all of them has their purpose. Below, we'll go 
          over a few of the most popular coding languages out there today that 
          used to create things like:</p>
          <ul>
            <li>Computer Operating Systems</li>
            <li>Video Games</li>
            <li>Photo, Video, and Audio Editing Software</li>
            <li>Mobile Device Applications</li>
            <li>Websites</li>
          </ul>
        </article>
      </section><br>

      <section class="main-section" id="HTML">
        <header>HTML</header>
        <article class="main-article">
          <p>HTML, or Hyper-Text Markup Language, is the standard language for 
            creating webpages. It is used to create the basic setup of a 
            webpage, and is later styled and made interactive using other 
            languages like CSS and JavaScript.</p>
            
            <p>A snippet of HTML code looks like this:</p>

            <code>&lt;html&gt;<br>&lt;head&gt;<br>&lt;/head&gt;<br>
              &lt;body&gt;<br>&lt;p&gt;Hello World&lt;/p&gt;<br>
              &lt;/body&gt;<br>&lt;/html&gt;<br></code>

          <p>You can enter this code into any code editor setup for HTML and 
            get the most famous message in programming, "Hello World". We'll 
            learn this with all of the different languages we go over her.</p>

        </article>
      </section><br>

      <section class="main-section" id="CSS">
        <header>CSS</header>
        <article class="main-article">
          <p>CSS, or Cascading Style Sheets, is a language designed 
            specifically to arrange, organize, and style elements of a 
            HTML coded webpage.</p>

          <p>We use it by declaring classes, ids, and other selectors to our 
            HTML elements, and then using those selectors to call upon those 
            elements so that we can style them with our CSS code. That looks 
            like this:</p>

            <code>h1 {<br>width: 10px;<br>height: 10px<br>}</code>

          <p>This would declare the width and height of any HTML code defined 
            by the element "h1". While we can't use basic CSS to write our 
            Hello World code, we can use the code above to change the size 
            the Hello World output when displayed.</p>

          </article>         
        </section><br>

        <section class="main-section" id="JavaScript">
          <header>JavaScript</header>
          <article class="main-article">
            <p>JavaScript is a scripting language used to make webpages more 
              interactive. It enables you to create dynamically updating 
              content, control multimedia, create animations, and much much 
              more.</p>
              
              <p>Hello World can be displayed by writing:</p>

              <code>document.write("hello world");</code>

          </article>
        </section><br>

        <section class="main-section" id="Java">
          <header>Java</header>
          <article class="main-article">
            <p>Java is a multi-platform, object-oriented, and network-centric 
              language used to create web applications like games and product 
              customizers. Unlike JavaScript, which is meant to be used with 
              other things like HTML and CSS, Java is meant to be a 
              stand-alone language to create applications from scratch.</p>
              
              <p>Here is a snippet of Java code:<br></p>

              <code>class HelloWorld {<br>&emsp;&emsp;&emsp;public static 
              void main(String[] args)&nbsp;{<br>&emsp;&emsp;&emsp;&emsp;
              &emsp;System.out.printIn("Hello World");<br>&emsp;&emsp;}<br>
              &emsp;}</code>

          </article>
        </section><br>

        <section class="main-section" id="Python">
          <header>Python</header>
          <article class="main-article">
            <p>Python is a multipurpose coding language primarily used for 
              building website and software, automating tasks, and conducting 
              data analysis. Due to this it is considered a "general purpose 
              language".</p>
               
              <p>Here is our snippet of Python code:<br></p>

              <code>print('Hello World')</code>

          </article>
        </section><br>

        <section class="main-section" id="C">
          <header>C</header>
          <article class="main-article">
            <p>C is low-level general purpose coding language used in many 
              of the worlds most famous computer operating systems including 
              many older versions of Windows and new versions of Linux</p>

              <p>Here is how to write Hello World in C:<br></p>

              <code>#include &lt;stdio.h&gt;<br>int main() {<br>&nbsp;&nbsp; 
              printf("Hello World");<br>&nbsp;&nbsp;&nbspreturn 0;<br>}</code>

          </article>
        </section><br>

        <section class="main-section" id="C_Plus_Plus">
          <header>C Plus Plus</header>
          <article class="main-article">
            <p>C++ is another general purpose programming language and is 
              arguably the most used language world-wide at the moment. It 
              was initially built as a decsendant of the C programming 
              language to improve upon its capabilities. C++ is used in many 
              applications from website and software development to operating 
              systems and video games.</p>

              <p>This is how we would write our Hello World code in the 
                C++ language:<br></p>

                <code>#include &lt;iostream&gt;<br><br>int main() {<br>
                &nbsp;&nbsp;std::cout &lt;&lt; "Hello World";<br>&nbsp;&nbsp;
                return 0;<br>}</code>

          </article>
        </section><br>

        <section class="main-section" id="C_Sharp">
          <header>C Sharp</header>
          <article class="main-article">
            <p>C# (C Sharp) is a high level general purpose programming 
              language that is object-oriented. A more modern version of the C 
              and C++ programming languages used because of easier to learn 
              syntax.</p>

              <p>Here is our Hello World code for C#:<br></p>

              <code>namespace HelloWorld<br>&nbsp;{<br>&nbsp;&nbsp;class Hello 
              {<br>&nbsp;&nbsp;&nbsp;&nbsp;static void Main(string[] args)<br>
              &nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              System.Console.WriteLine("Hello World");<br>&nbsp;&nbsp;&nbsp;
              &nbsp;}<br>&nbsp;&nbsp;}<br>}</code>

          </article>
        </section><br>

        <section class="main-section" id="Rust">
          <header>Rust</header>
          <article class="main-article">
            <p>Rust, similarly syntaxed to C++, is another general purpose 
              language mostly used in web development due to it being bug-free 
              and higher performance than C++. It was initially developed for 
              Firefox but can be used almost anywhere.</p>

              <p>And here is our final Hello World code:<br></p>

              <code>fn main() {<br>&nbsp;&nbsp;pringIn!("Hello World");<br>
              }</code>

          </article>
        </section>

  </main>

</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

Move the text between anchor tags.
@zakk.murray1989

1 Like

I could legit give you a hug right now my man. I am sitting here looking for misspellings and never checked the exact placement of all of my text. Thank you so much. That finished the project for me.

1 Like

Your welcome man. Keep it up, happy Coding!

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