Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Problem with the Technical Documentation Page
They are saying i haven’t done 3 things.
1.
You should have the same number of .nav-link and .main-section elements
2.
Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
3.
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">
  <meta charset="utf-8">
  <title>Javascript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <body>
    
    <main id="main-doc">
      <section class="main-section" id="Technical_Documentation"><header>Technical Documentation</header>
      <h1>Technical Documentation</h1>
      
      <nav id="navbar">
        <header>Technical Teams
        <a class="nav-link" href="#project_team">Project Team</a>
        <a class="nav-link" href="#tutoria_team">Tutoria Team</a>
        <a class="nav-link" href="#project_manager">Project Manager</a>
        <a class="nav-link" href="#data_team">Data Team</a>
        <a class="nav-link" href="#safety_team">Safety Team</a>
      </header>
      </nav>
      </section>
      <section class="main-section" id="project_team"><header>Project Team</header><p><i><a href="#project_team">Project Team</a></i> The team that design the project of <strong>The Company</strong></p><code></code>
      <p>Project Teams are categorized of two types: <br>
      <ol>
        <li>Project Teams (Manager) </li>
        <li>Project Teams (Supervisor) </li>
      </ol>
      </p>
        
      </section>
      <section class="main-section" id="tutoria_team">
        <header>Tutoria Team</header>
      <article class="technical"><a href="#tutoria_team">Tutoria Team</a>
    <code></code>
    <p>Teachers the major team here that taught the staff on the current project</p>
        </section>
        <section class="main-section" id="project_manager"><header>Project Manager</header>
        <article class="technical"><a href="#project_manager">Project Manager</a>
        <code></code>
        <p>Manager are the major risk taker in promoting the affairs of the company</p>
</section>
      <section class="main-section" id="data_team"><header>Data Team</header>
      <article class="technical"><a href="#data_team">Data Team</a>
      <code></code>
      <p>There is two types of storage here: <br>
    <ul>
    <li>Digital</li>
    <li>Analog</li>
    </ul></p>
    <p>Digital storage is the process of storing your information in the server</p>
    <p>While the Analog storage is the process of storing all your information on hard copy</p>
    </article>
    </section>
    <section class="main-section" id="safety_team"><header>Safety Team</header>
      <article class="technical"><a href="#safety_team">Safety Team</a>
        <code><code>
          <p>Safety of every staff should be a guranttee</p>
    <ul><li>Safety wears</li></ul>
    </article>
    </section>
    </main>
    


      
      
    </body>
    <head>

    </head>
    </main>

/* file: styles.css */
@media {
  body {
    max-width: 900px;
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

How many .nav-links do you have? How many .main-section elements do you have? Are they the same number?

1 Like
3

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