Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<main id="main-doc">

  <link rel='stylesheet' href="styles.css">

  <nav id='navbar'>


<a class="nav-link" href='#filler_text'>Filler Text 1</a>

     <a class="nav-link" href='#filler_text'>Filler Text 2</a>

    <a class="nav-link" href='#filler_text'>Filler Text 3</a>

     <a class="nav-link" href='#filler_text'>Filler Text 4</a>

     <a class="nav-link" href='#filler_text'>Filler Text 5</a>


  <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>

  <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>

  <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>

  <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>

 <section class="main-section" id="filler_text_5">

    <header>Filler Text 5</header>

    <p>This is paragraph 3.</p>
    <p>This is paragraph 4.</p>

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

#navbar header {
  font-size: 1.618em;
  margin-bottom: 7;


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


#main-doc {
  margin-left: 200px;

@media (max-height: 600px;) {
    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/ Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

The nav-links should include the numbers that are included in the text.

This is not the solution: It is an example.

For example: ```
< a class=“nav-link” href=‘#apples_a_9’>Apples A 9< /a>

Make sure to include the numbers in the page links, too. 

Happy coding! :)

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