Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

You should have a nav element with an id of navbar. Your #navbar should have exactly one header element within it. All of your .nav-link elements should be in the #navbar. The header element in the #navbar should come before any link a) elements also in the #navbar.

Your code so far

<!-- file: index.html -->
<main id="main-doc">
  <link rel='stylesheet' href='styles.css'
 
  <nav id='navbar'>
    <Header>Topic</header>
    <a class='nav-link' href='#filler_text_1'>Filler Text 1</a>
    <a class='nav-link' href='#filler_text_2'>Filler Text 2</a>
    <a class='nav-link' href='#filler_text_3'>Filler Text 3</a>
    <a class='nav-link' href='#filler_text_4'>Filler Text 4</a>
    <a class='nav-link' href='#filler_text_5'>Filler Text 5</a>
  </nav>
  <section class='main-section' id='filler_text_1'>
    <header>Filler Text 1</header>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <code></code>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </section>
  <section class='main-section' id='filler_text_2'>
    <header>Filler Text 2</header>
    <p>This is paragraph 3.</p>
    <p>This is paragraph 4.</p>
    <code></code>
    
  </section>
  <section class='main-section' id='filler_text_3'>
    <header>Filler Text 3</header>
    <p>This is paragraph 5.</p>
    <p>This is paragraph 6.</p>
    <code></code>
  </section>
  <section class='main-section' id='filler_text_4'>
    <header>Filler Text 4</header>
    <p>This is paragraph 7.</p>
    <p>This is paragraph 8.</p>
    <code></code>
  </section>
  <section class='main-section' id='filler_text_5'>
    <header>Filler Text 5</header>
    <p>This is paragraph 9.</p>
    <p>This is paragraph 10.</p>
    <code></code>
  </section>
</main>

/* file: styles.css */
#navbar {
  position: fixed;
  left: 0;
  padding: 20px
}

#navbar header {
  font-size: 1.1618em;
  margin-bottom: 7px;
}

#navbar a {
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
}

#main-doc {
 margin-left: 200px;
} 
@media (max-height: 600px)
  .main-section{
   font-size: .7em;
 }

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

I think you are missing something here. Perhaps a > at the end of the link tag?

3

Just a typo - your <header> opening tag shouldn’t have a uppercase ‘H’.

4

Just an FYI, tag names are case insensitive in HTML, so they can technically be either lowercase or uppercase or even a mix of both.

In the real world, you would always use all lowercase for tag names. But technically, it’s not an error not to.

1 Like
5

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