Technical Documentation Page - Build a Technical Documentation Page

What’s happening: My code doesn’t pass the criteria: 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).
Can anyone see the problem?

<html lan="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
<title>Java Documentation</title>
  </head>
  <body>
  <nav id="navbar">
    <header>Java Documentation</header>
      <ul>
        <li><a class="nav-link" href="Getting_start_with_Java">Getting start with Java</a></li>
        <li><a class="nav-link" href="Java_Entry_Point">Java Entry Point</a></li>
        <li><a class="nav-link" href="Printing_to_the_console">Printing to the console</a></li>
        <li><a class="nav-link" href="Declaring_functions">Declaring functions</a></li>
        <li><a class="nav-link" href="Object_Oriented_Programming">Object Oriented Programming</a></li>
      </ul>
      </nav>
      <main id="main-doc">
        <section class="main-section" id="Getting_start_with_Java">
          <header>Getting start with Java</header>
          <p>Steps in getting started:</p>
          <ol>
            <li>Download Java</li>
            <li>Download Java SDK</li>
            <li>Get an Integrated Development Environment (IDE)</li>
            <li>Start a Project within the IDE</li>
            <li>Code up "Hello World!" and run the code</li>
          </ol>
        </section>
        <section class="main-section" id="Java_Entry_Point">
          <header>Java Entry Point</header>
          <p>The entry point to a Java application is the main function</p>
          <p>It is categorized by its (string[] arg) as a parameter to the function</p>
          <pre>
            <code>
              public class MyMainFunction{
                /* java main function exemple */
                public static void main(string[] args){

                }
              }
            </code>
          </pre>
          <p>As you can see the main function is wrapped within a class which is part of the object oriented structure of the Java projects</p>
          <p>The name of the project is therefore "MyMainFunction"</p>
        </section>
        <section class="main-section" id="Printing_to_the_console">
          <header>Printing to the console</header>
          <p>In order to print to the console we use System.out.println.</p>
          <p>I know, it is very long and cumbersome, but this is the way its done.</p>
          <pre>
            <code>
              public class MyMainFunction{
                /* java main function exemple /*
                public static void main (string[] args) {
                  System.out.println("hello world");
                }
              }
            </code>
          </pre>
          <p>In this exemple we are printing out "hello world" to the console when we run the program.</p>
          </section>
          <section class="main-section" id="Declaring_functions">
          <header>Declaring functions</header>
          <p>Functions are actually called methods in Java. Here is a an exemple of how to declare a Java method:</p>
          <img src="https://techvidvan.com/tutorials/wp-content/uploads/sites/2/2020/02/example-of-java-method-declaration.jpg" alt="java-method-img" class="image">
          <p>Some copiable code:</p>
          <pre>
            <code>
              Public static void myFunction(String name, int age)
              {
                // function code
              }
            </code>
          </pre>
        </section>
        <section class="main-section" id="Object_Oriented_Programming">
          <header>Object Oriented Programming</header>
          <p>Java is known as an object orented programming language</p>
          <p>This means that it is easy to represent entities as objects by using classes and encapsulation</p>
          <p>An exemple of this might be a student class to represent a student</p>
          <pre>
            <code>
              Public class student {
              /* Student properties */
              private String name;
              private int age;

              /* Constructor */
              Public student(String name, int age)
              this.name = name;
              this.age = age;
              }
            </code>
          </pre>
          <p>We use this class by doing the following:</p>
          <pre>
            <code>
              Student student1 = new student("Jimmy", 19);
              String jimmyName = student1.getName();
              Student1.setName("Kevin");
              String kevinName = student1.getName();
            </code>
          </pre>
        </section>
          <footer>
            <p>Documentation brought to you on the fly by Daniel Ribas</p>
          </footer>
  </body>

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:

@adlribas welcome to the community! Try to prepend your href values with # in the navlink items to indicate that the link is an id of a section in the current page.

2 Likes

Here’s a reference article that will help you understand internal links in HTML.

3 Likes

Thanks a lot :wink: I’ve done it…

Great tip;) Done. Thanks!

1 Like