Technical Documentation Page - Build a Technical Documentation Page

Problem with the Technical Documentation Page
They are saying i haven’t done 3 things.
You should have the same number of .nav-link and .main-section elements
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”).
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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
    <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>
      <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>
        <li>Project Teams (Manager) </li>
        <li>Project Teams (Supervisor) </li>
      <section class="main-section" id="tutoria_team">
        <header>Tutoria Team</header>
      <article class="technical"><a href="#tutoria_team">Tutoria Team</a>
    <p>Teachers the major team here that taught the staff on the current project</p>
        <section class="main-section" id="project_manager"><header>Project Manager</header>
        <article class="technical"><a href="#project_manager">Project Manager</a>
        <p>Manager are the major risk taker in promoting the affairs of the company</p>
      <section class="main-section" id="data_team"><header>Data Team</header>
      <article class="technical"><a href="#data_team">Data Team</a>
      <p>There is two types of storage here: <br>
    <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>
    <section class="main-section" id="safety_team"><header>Safety Team</header>
      <article class="technical"><a href="#safety_team">Safety Team</a>
          <p>Safety of every staff should be a guranttee</p>
    <ul><li>Safety wears</li></ul>


/* 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/ Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

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

1 Like

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