Technical Documentation Page... Stuck. Please Help

HTML-CSS
1

I’m constantly stuck on this section. Any help would be greatly appreciated.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Technical Documentation Page</title>
  </head>

<body>    
      <nav id="navbar">
        <header>Navigation Bar
          </header>
          <ul id="ul-navbar">
    <li>    
  <a class="nav-link" href="#introduction">Introduction</a></li><br> 
<li>
  <a class="nav-link" href="#java_and_javascript">Java and Javascript</a></li><br> 
<li>
  <a class="nav-link" href="#data_types">Data Types</a></li><br> 
<li>
  <a class="nav-link" href="#variables">Variables</a></li><br>
<li>
  <a class="nav-link" href="declaring_variables">Declaring Variables</a></li>
  </ul>
</nav>  
      </body><br>

    <main id="main-doc">
      
      <section class="main-section" id="introduction"><header>Introduction</header>
      <p><code></code></p>
      <p></p>
      
      <ul>
        <li></li>
        </ul>
      </section>
      
      
      <section class="main-section" id="java_and_javascript"><header>Java and Javascript</header>
      <p><code></code></p>
      <p></p>
      
      <ul>
        <li></li>
        </ul>
      </section>
      
      
      <section class="main-section" id="data_types"><header>Data Types</header>
      <p><code></code></p>
      <p></p>
      
      <ul>
        <li></li>
        </ul>
      </section>
      
      
      <section class="main-section" id="variables"><header>Variables</header>
      <p><code></code></p>
      <p></p>
      
      <ul>
        <li></li>
        </ul>
      </section>
      
      
      <section class="main-section" id="declaring_variables"><header>Declaring Variables</header>
      <p><code></code></p>
      <p></p>
      
      <ul>
        <li></li>
        </ul>
      </section>
      </main>
      </html>
2

Welcome back to the forum @Odin

Consider using h2 or h3 elements for the headings.

Secondly, the href attribute value needs to start with a hash to indicate the reference is an id attribute.

Thirdly, you need at least one media query.

Happy coding

3

Thanks, @Teller. Its good to be back.

Thanks for the help. Finally passed, was driving me crazy haha. Can’t believe I missed that.

2 Likes
4

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