For my technical documentation page, I have two major issues :slight-smile:
-
Each
.main-section
should have anid
that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_
) for the id’s. -
Each
.nav-link
should have anhref
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 asection
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: