Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
The error is :
The first child of each .main-section should be a header element.
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.

idk why is it still wrong tho, i

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <nav id="navbar">
      <header>JS Documentation</header>
      <ul>
        <li>
          <a class="nav-link" href="#Introduction">Introduction</a>
        </li>
        <li>
          <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
        </li>
        <li>
          <a class="nav-link" href="#JavaScript_and_Java">Javascript and Java</a>
        </li>
        <li>
          <a class="nav-link" href="#Hello_World">Hello World</a>
        </li>
        <li>
          <a class="nav-link" href="#Variables">Variables</a>
        </li>
        <li>
          <a class="nav-link" href="#Declaring_Variables">Declaring Variables</a>
        </li>
        <li>
          <a class="nav-link" href="#Variables_Scope">Variables Scope</a>
        </li>
        <li>
          <a class="nav-link" href="#Global_Variables">Global Variables</a>
        </li>
        <li>
          <a class="nav-link" href="#Constants">Constants</a>
        </li>
        <li>
          <a class="nav-link" href="#Data_Types">Data Types</a>
        </li>
        <li>
          <a class="nav-link" href="#If...else statement">If...else statement</a>
        </li>
        <li>
          <a class="nav-link" href="#While_Statement">While Statement</a>
        </li>
        <li>
          <a class="nav-link" href="#Function_Declarations">Function Declarations</a>
        </li>
        <li>
          <a class="nav-link" href="#Reference">Reference</a>
        </li>
      </ul>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header><h2>Introduction</h2></header>
      </section>
      <section class="main-section" id="What_you_should_already_know"></section>>
        <header><h2>What you should already know</h2></header>
      </section> 
      <section class="main-section" id="JavaScript_and_Java">
        <header><h2>JavaScript and Java</h2></header>
      </section>
      <section class="main-section" id="Hello_World">
        <header><h2>Hello World</h2></header>
      </section>
      <section class="main-section" id="Variables">
        <header><h2>Variables</h2></header>
      </section>
      <section class="main-section" id="Declaring_Variables">
        <header><h2>Declaring Variables</h2></header> 
      </section>
      <section class="main-section" id="Variables_Scope">
        <header><h2>Variables Scope</h2></header>
      </section>
      <section class="main-section" id="Global_Variables">
        <header><h2>Global Variables</h2></header>
      </section>
      <section class="main-section" id="Constants">
        <header><h2>Constants</h2></header>
      </section>
      <section class="main-section" id="Data_Types">
        <header><h2>Data Types</h2></header>
      </section>
      <section class="main-section" id="If...else statement">
        <header><h2>If...else statement</h2></header>
      </section>
      <section class="main-section" id="While_Statement">
        <header><h2>While Statement</h2></header>
      </section>
      <section class="main-section" id="Function_Declarations">
        <header><h2>Function Declarations</h2></header>
      </section>
      <section class="main-section" id="Reference">
        <header><h2>Reference</h2></header>
      </section>
    </main>
  </body>
</html>

/* file: styles.css */

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hello!

I think this has a double angle bracket causing the problem.

1 Like
3

I don’t think you meant to close off this section element at the end of this line:

Also:

When you have this as an href or id attribute, it needs an underscore between ‘else’ and ‘statement’.

The related tests will pass if you fix these two things.

4

thankyou you’re right!!!

1 Like
5

yepp i just realize that i couldn’t use … in id, THANKYOU YO!

7

You can use ... in an id attribute. In fact you can use anything except for a space. That was the problem with your href and id attributes. You needed to replace the space with an underscore.

1 Like
8

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