Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

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

Your code so far

<!-- file: index.html -->
<main id="main-doc">
  <nav id="navbar">
    <header>Hello World</header>
   
    <a class="nav-link" href="#example_text_1"> example Text 1</a>
    <a class="nav-link" href="#example_text_2"> example Text 2</a>
    <a class="nav-link" href="#example_text_3"> example Text 3</a>
    <a class="nav-link" href="#example_text_4"> example Text 4</a>
    <a class="nav-link" href="#example_text_5"> example Text 5</a>

  </nav>
  <section class="main-section" id="#example_Text_1">
    <header>example Text 1</header>
    <p>This is Paragraph 1</p>
    <p>This is Paragraph 2</p>
    <code>Code</code>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </section>
<section class="main-section" id="#example_Text_2">
    <header>example Text 2</header>
    <p>This is Paragraph 3</p>
    <p>This is Paragraph 4</p>
    <code>Code</code>
  </section>
  <section class="main-section" id="#example_Text_3">
    <header>example Text 3</header>
    <p>This is Paragraph 5</p>
    <p>This is Paragraph 6</p>
    <code>Code</code>
  </section>
  <section class="main-section" id="#example_Text_4">
    <header>example Text 4</header>
    <p>This is Paragraph 7</p>
    <p>This is Paragraph 8</p>
    <code>Code</code>
  </section>
  <section class="main-section" id="#example_Text_5">
    <header>example Text 5</header>
    <p>This is Paragraph 9</p>
    <p>This is Paragraph 10</p>
    <code>Code</code>
  </section>
</main>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Your href values must match the ids of the elements they are linking to. For eg here:

You are using a capital letter in the id but not in the href.

1 Like
3

Hello!

The section id does not require the # included in the id.

Example:

<a class=".nav-link"  href="#jolly">jolly</a>

would connect to 

<section id="jolly" class="main-section">
<header>jolly</header>
other content for the section
</section>

In the .nav-link href value =“#” indicates the link is to a matching id.
It is used in css when we wish to style an id, too.
Example.

Wishing your good progress on your coding journey! :slightly_smiling_face:

1 Like