Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

  • i need help with this part of the code 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).

this is what i have done so far but it is marking wrong and i am kinda stuck "

Overview
Getting Started
Concepts and Architecture
How to Guides
Reference

"
  • Passed:

Your code so far

<!-- 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</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="Overview">
       
        <header>Overview</header>
        <p></p>
        <code></code>
      </section>
      <section class="main-section" id="Getting_Started">
      
         <header>Getting Started</header>
         <p></p>
         <p></p>
        <code></code>

      </section>
      <section class="main-section" id="Concepts_and_Architecture">
       
         <header>Concepts and Architecture</header>
         <p></p>
         <p></p>
         <p></p>
       <code></code>
      </section>
      <section class="main-section" id="How_to_Guides">
        
         <header>How to Guides</header>
         <p></p>
         <p></p>
         <p></p>
        <code></code>
      </section>
       <section class="main-section" id="Reference">
    
          <header>Reference</header>
          <p>
            <nav id="navbar">
              <header>Brief description of the product, its purpose, and target audience.
              </header>
    
              <a class="nav-link" href="#overview">Overview</a>
              <a class="nav-link" href="#Getting_Started">Getting Started</a>
              <a class="nav-link" href="#Concepts_and_Architecture">Concepts and Architecture</a>
              <a class="nav-link" href="#How_to_Guides">How to Guides</a>
              <a class="nav-link" href="#Reference">Reference</a>
            </nav>
            </p>
         <code></code>
           <ul>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
           </ul>
       </section>

    </main>

  </body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
}
#navbar {
  position: auto;
  top: 10;
  left: 19;
  width: 100;
  height: 100%;
}
@media (max-width: 600px) {
  position: static;
  widtg: auto;
  height: auto;
}
#main-doc {
  margin-left: 0;
}
.main-section header {
  font-size: 18px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi, so the id and the href targets need to match exactly. At the moment:

href=“#overview” does not match the text exactly. It needs a capital O.
Otherwise it is looking really good!!

3

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