Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

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

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <p></p>
<p></p>


<code></code>
<li></li>
      </section>
       <section class="main-section" id="What_you_should_already_know">
         <header>What you should already know</header>
         <p></p>
<p></p>


<code></code>
<li></li>
       </section>
        <section class="main-section" id="JavaScript_and_Java">
          <header>JavaScript and Java</header>
          <p></p>
<p></p>


<code></code>
<li></li>
        </section>
         <section class="main-section" id="Hello_World">
           <header>Hello World</header>
           <p></p>
<p></p>


<code></code>
<li></li>
         </section>
          <section class="main-section" id="Variables">
            <header>Variables</header>
            <p></p>
<p></p>


<code></code>
<li></li>
          </section>
          <nav id="navbar">
            <header>JS Documentation</header>
            <a class="nav-link" href="Introduction">Introduction</a>
          </nav>
          <nav id="navbar">
            
            <a class="nav-link" href="What_you_should_already_know">What you should already know</a>
          </nav>
          <nav id="navbar">
           
            <a class="nav-link" href="JavaScript_and_Java">JavaScript and Java</a>
          </nav>
          <nav id="navbar">
            
            <a class="nav-link" href="Hello_World">Hello World</a>
          </nav>
          <nav id="navbar">
            
            <a class="nav-link" href="Variables">Variables</a>
          </nav>
          
    </main>
  </body>
</html>

/* file: styles.css */

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

The ‘href’ attributes should have the # character in front of their values:

<a href="#Name">Name</a>
3

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