Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Please help. I keep getting this error message, I’ve checked for spelling errors and closing tags.

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)
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html/>
<html lang="en"> </html>
<head> 
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="styles.css" />
  <title>Javascript Documentation</title>
</head>
<body>
  <nav id="navbar"><header>JS Documentation</header><a class="nav-link" href="#Introduction">Introduction</a>
  <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
  <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
  <a class="nav-link" href="Hello_world">Hello world</a>
  <a class="nav-link" href="#Variables">Variables</a>
  <a class="nav-link" href="#Declaring_variables">Declaring variables</a>
  <a class="nav-link" href="#Variable_scope">Variable scope</a>
  <a class="nav-link" href="#Global_variables">Global variables</a>
  <a class="nav-link" href="#Constants">Constants</a>
  <a class="nav-link" href="#Data_types">Data types</a>
  <a class="nav-link" href="#if...else_statement">if...else statement</a>
  <a class="nav-link" href="#While_statement">While statement</a>
  <a class="nav-link" href="#Function_declarations">Function declarations</a>
  <a class="nav-link" href="#Reference">Reference</a></nav>


  <main id="main-doc">
  <section class="main-section" id="Introduction"><header>Introduction</header><p></p><p></p><li></li><li></li></section>
  <section class="main-section" id="What_you_should_already_know"><header>What you should already know</header><p></p><li></li><li></li><li></li></section>
  <section class="main-section" id="JavaScript_and_Java"><header>JavaScript and Java</header><p></p><p></p><p></p></section>
  <section class="main-section" id="Hello_world" ><header>Hello world</header><p></p><p></p><code></code></section>
  <section class="main-section" id="Variables" ><header>Variables</header><p></p><p></p><p></p><code></code></section>
  <section class="main-section" id="Declaring_variables"><header>Declaring variables</header><p></p><p></p><p></p><p></p><p></p><p></p><p></p><code></code></section>
  <section class="main-section" id="Variable_scope" ><header>Variable scope</header><p></p><p></p><p></p><code></code></section>
  <section class="main-section" id="Global_variables" ><header>Global variables</header><p></p><p></p></section>
  <section class="main-section" id="Constants" ><header>Constants</header><p></p><p></p><p></p><p></p><code></code></section>
  <section class="main-section" id="Data_types" ><header>Data types</header><p></p><li></li><li></li></section>
  <section class="main-section" id="if...else_statement"><header>if...else statement</header><p></p><p></p><p></p><p></p><p></p><p></p><code></code></section>
  <section class="main-section" id="While_statement"><header>While statement</header><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><li></li><li></li><li></li><code></code></section>
  <section class="main-section" id="Function_declarations"><header>Function declarations</header><p></p><p></p><p></p><p></p><li></li><li></li><li></li><code></code></section>
  <section class="main-section" id="Reference" ><header>Reference</header><p></p><li></li></section>

  </main>
  </body>

/* file: styles.css */
@media(max-width: 1000px) {
nav{
  width:250px;
}
main{
  width:600px;
}
}
nav{
display:flex;
flex-direction:column;
}
.nav-link{
  border-bottom: 1px solid black;
  width: 200px;
  margin: 15px;
  padding: 0;
  color:black;
}
a{
  text-decoration:none;
}
main{
  display:flex;flex-direction:column;
  position:absolute;
  left:250px;
  top:15px
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

I think you need to click on each link in the nav menu and verify that it really takes you to the correct place.

3

From my preview page, when I click on each link, it does take me the to the right place. I don’t know why I keep getting the error message on the html page.

4

Are you absolutely 100% sure about that? Based on the HTML you pasted in above one of those links is not quite correct. I can see it by just eyeballing your code. Look closely at all the href values for your links. Doesn’t one jump out at you?

1 Like
5

Thanks a lot, you’re the best, I got it. I looked closely at the href values again, and i found the missing #.