Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I am stuck on this section and cannot figure out what is wrong in my script. The nav links work and direct me to the section of the page that is configured.

The specific question I’m failing on is:

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).

<!-- file: index.html -->
<!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>
    <header>
      <h1>JS Documentation</h1>
      <nav class="menu">
       <ul>
          <li><a href="#Introduction">Introduction</a></li>
          <li><a href="#Knowledge">Knowledge</a></li>
          <li><a href="#Java">Java</a></li>
          <li><a href="#Hello">Hello</a></li>
          <li><a href="#Variables">Variables</a></li>
        </ul>
        </nav>
        </header>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header id="Introduction">Introduction</header>
        <nav id="navbar">
          <header>Navigation link</header>
          <a class="nav-link" href="Introduction">Introduction</a>
        </nav>
        <p>JavaScript is a cross-platform, object-oriented scripting language.</p>
        <p>This is an example</p>
        <li>1,2,3,4</li>
      </section>
      <section class="main-section" id="Knowledge">
        <header id="Knowledge">Knowledge</header>
        <nav id="navbar">
          <a class="nav-link" href="Knowledge">Knowledge</a>
        </nav>
        <p>This guide assumes you have the following basic background:</p>
        <p>A general understanding of the Internet and the World Wide Web (WWW).</p>
        <li>Good working knowledge of HyperText Markup Language (HTML).</li>
      </section>
      <section class="main-section" id="Java">
        <header id="Java">Java</header>
        <nav id="navbar"><a class="nav-link" href="Java">Java</a>
        </nav>
        <p>JavaScript is a very free-form language compared to Java.</p>
        <p>This is an example</p>
        <li>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values.</li>
      </section>
      <section class="main-section" id="Hello">
        <header id="Hello">Hello</header>
        <nav id="navbar"><a class="nav-link" href="Hello">Hello</a>
        </nav>
        <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code</p>
        <p>This is an example</p>
        <li>You use variables as symbolic names for values in your application.</li>
      </section>
      <section class="main-section" id="Variables">
        <header id="Variables">Variables</header>
        <nav id="navbar">
          <a class="nav-link" href="Variables">Variables</a>
        </nav>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <code></code>
        <p>You use variables as symbolic names for values in your application.</p>
        <p>This is an example</p>
        <li>1,2,3,4.</li>
      </section>
      </main>
      </body>
  </html>

/* file: styles.css */
header{
  width: 500px;
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Welcome to the community @paulsantoleri !

I can see a few problems with the code.

There are several id = navbar. Id need to be unique every time. An id can only be used once.

There is only need for one id navbar which should nest all of the nav-link within it.

It appears the class =“nav-link” have been place within the main-section, which is not correct. The class nav-link should redirect to the section from the navbar.

Try relocating the nav-link into this area of you code, and see if that helps you pass the test.

3

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