Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

I’m getting a bit upset/stressed out over the things that I’m not fulfilling. Please note my code looks kind of bare 'cus my autism struggles with creative freedom (I need some kind of thematic guidance) so I did a very literal reading. The tests I’m still getting wrong are #s 5, 13, 16, 18 and 20.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<html>
  
  <main id="main-doc">Technical Documentation
    <header>The First Section</header>
    <nav id="navbar">
    <section class="main-section" id="The_First_Section"><a class="nav-link" href="#First-Section">The First Section</a></nav>
    <p><code><li></li></code></p>
    <p><li></li></p>
    </section>
    <section class="main-section" id="The_Second_Section"><header>The Second Section</header><a class="nav-link" href="#Second-Section">The Second Section</a>
    <p><code><li></li></code></p>
    <p><li></li></p>
    </section>
    <section class="main-section" id="The_Third_Section"><header>The Third Section</header>
    <p><code><a class="nav-link" href="#Third-Section">The Third Section</a><code><li></li></code></p>
    <p><li></li></p>
    </section>
    <section class="main-section" id="The_Fourth_Section"><header>The Fourth Section</header><a class="nav-link" href="#Fourth-Section">The Fourth Section</a>
    <p><code><li></li></code></p>
    <p><li></li></p>
    </section>
    <section class="main-section" id="The_Fifth_Section"><header>The Fifth Section</header><a class="nav-link" href="#Fifth-Section">The Fifth Section</a><p><code><li></li></code></p>
    <p><li></li></p>
    </section>
  </main>
</html>

/* file: styles.css */
#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}
#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 815px) {
 
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Lets work one at a time.

  1. The first child of each .main-section should be a header element.

What is the first child of this .main-section ?

3

oooh I see it thank you! sometimes I don’t see it when it’s all together. Fixing that also fixed the rest except for 16 and 20.

4

@erispeterson

Can you provide your code for what your html looks like now?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

entering-code-example
entering-code-example1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (')

5
  1. All of your .nav-link elements should be in the #navbar .

Compare your code quoted here to the below example of incorrect and correct nesting.
Wrong:

<main>

    <p>

</main>
    
    </p>

Correct:

 <main>
    <p>

    </p>
</main>
6

here’s the new code
I think the Navbar issue is just a side effect from how I took things to a literalness
I found the error here’s the most recent code
EDIT: and for #20 I was just missing the word “The” from my hrefs.
Problems solved!

<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<html>
  
  <main id="main-doc">Technical Documentation
    
    <nav id="navbar">
    <section class="main-section" id="The_First_Section"><header>The First Section</header><a class="nav-link" href="#First-Section">The First Section</a>
    <p><code><li></li></code></p>
    <p><li></li></p>
    </section>
     <li><a class="nav-link" href="#Second-Section">The Second Section</a></li>
     <li><a class="nav-link" href="#Third-Section">The Third Section</a></li>
     <li><a class="nav-link" href="#Fourth-Section">The Fourth Section</a></li>
     <li><a class="nav-link" href="#Fifth-Section">The Fifth Section</a></li>
    </nav>
    <section class="main-section" id="The_Second_Section"><header>The Second Section</header>
    <p><code><li></li></code></p>
    <p><li></li></p>
    </section>
    <section class="main-section" id="The_Third_Section"><header>The Third Section</header>
    <p><code><code><li></li></code></p>
    <p><li></li></p>
    </section>
    <section class="main-section" id="The_Fourth_Section"><header>The Fourth Section</header>
    <p><code><li></li></code></p>
    <p><li></li></p>
    </section>
    <section class="main-section" id="The_Fifth_Section"><header>The Fifth Section</header><p><code><li></li></code></p>
    <p><li></li></p>
    </section>
    
  </main>
</html>
7

Edit: You have a section element in the #navbar and also the #navbar should not be in the main element.

8
  1. 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).

What is theThe purpose of your nav here is to link to each .main-section. What is a main-section doing in your nav element?

List elements are inteded to be children of <ul>, <ol>, or <menu>