Problems with Technical Documentation Page

For my technical documentation page, I have two major issues :slight-smile:

  1. Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

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

Can someone please help me? Thank you in advance!

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  </head>
<nav id="navbar">

<header>CHEMICAL AND BIOLOGICAL ENGINEERING</header>

<ul>
 
 <li><a class="nav-link" href="#Fluid_Mechanics">Fluid Mechanics</a></li>
 <li><a class="nav-link" href="#Material_and_Energy_Balances">Material and Energy Balances</a></li>
 <li><a class="nav-link" href="#Inorganic_Chemistry">Inorganic Chemistry</a></li>
 <li><a class="nav-link" href="#Organic_Chemistry">Organic Chemistry</a></li>
 <li><a class="nav-link" href="#Integrated Technical Communication">Integrated Technical Communication</a></li>
 
</ul>
   
</nav>

<main id="main-doc">
<section class="main-section" id="Fluid_Mechanics"><header>Fluid Mechanics</header>

<p>
 <code>"Includes fluid kinematics and dynamics"</code>
 </p>

<p> 
   
<ul>
 <li>Fluid mechanics is the study of fluid behavior (liquids, gases, blood, and plasmas) at rest and in motion. Fluid mechanics has a wide range of applications in mechanical and chemical engineering, in biological systems, and in astrophysics.</li>
 </p>
 </ul> 


<section class="main-section" id="Material_and_Energy_Balances"><header>Material and Energy Balances</header>

<p>
 <code>"The fundamental aspect of process engineering"</code>
 </p>

<p> 
<ul>
 <li>A material and energy balance is essentially a quantitative account of the redistribution of material and/or energy that occurs when anything happens. This basic tool of process engineering can be used to solve many practical problems.</li>
 
 </ul> 
</p>

<section class="main-section" id="Inorganic_Chemistry"><header>Inorganic Chemistry</header>

<p>
 <code>"Not necessarily the opposite of organic chemistry"</code>
 </p>

<p> 
<ul>
 <li>Inorganic chemistry is concerned with the properties and behavior of inorganic compounds, which include metals, minerals, and organometallic compounds.
</li>
 
 </ul> 
</p>


<section class="main-section" id="Organic_Chemistry"><header>Organic Chemistry</header>

<p>
 <code>"Everything-carbon related"</code>
 </p>

<p> 
<ul>
 <li>Organic chemistry is the study of the structure, properties, composition, reactions, and preparation of carbon-containing compounds. Most organic compounds contain carbon and hydrogen, but they may also include any number of other elements (e.g., nitrogen, oxygen, halogens, phosphorus, silicon, sulfur).</li>
 
 </ul> 
</p>

<section class="main-section" id="Integrated_Technical_ Communication"><header>Integrated Technical Communication</header>

<p>
 <code>"Engineers have to write too!"</code>
 </p>

<p> 
<ul>
 <li>Technical communication is a broad field and includes any form of communication that exhibits one or more of the following characteristics: Communicating about technical or specialized topics, such as computer applications, medical procedures, or environmental regulations.</li>
 
 </ul> 
</p>

   </main>


 </html>
/* file: styles.css */
* {
 background-color: maroon;
}
a {
 color: rgba(127, 153, 200, 1);
}
a:hover {
 background-color: rgba(127, 106, 126);
 color: #3a3240;
}
#navbar {
 border-style: solid;
 border-width: 5px;
 border-color: #92869c;
 height: 100%;
 top: -5px;
 left: -5px;
 padding: 5px;
 text-align: center;
 color: #92869c
}
@media (min-width: 480px) {
 #navbar {
   position: fixed;
 }
}
main {
 margin-left: 220px;
 color: #92869c
}
header {
 font-size: 20pt;
}
code {
 background-color: #92869c;
 border-style: dashed;
 border-width: 2px;
 border-color: #92869c;
 padding: 5px;
 color: black;
}
footer {
 text-align: center;
}
   **Your browser information:**

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

Hi ^^

The problem seems to be the “Integrated Technical Communication”. The nav-link element’s href attribute has no underscores, just whitespaces, so ultimately it’s not corresponding to any .main-section id.

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