Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

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

Your code so far

I need help that I already try my best to solve and search tutorial on youtube and find the hints, but I still can not solve the problem.

<!-- 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">Hello world</a>
     <a class="nav-link" href="#filler_text_2">Hello world</a>
     <a class="nav-link" href="#filler_text_3">Hello world</a>
     <a class="nav-link" href="#filler_text_4">Hello world</a>
     <a class="nav-link" href="#filler_text_5">Hello world</a>

    </nav>

  <section class="main-section" id="filler_text_1">
    
    <header>Filter_Text_1</header>
  
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
  
  <code>Sample</code>

  <ul>
    <li><li>
    <li><li>
    <li><li>
    <li><li>
    <li><li>
  </ul>
 
  </section>
  
  <section class="main-section" id="filler_text_2">
    
    <header>Filter_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>Filter_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>Filter_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>Filter_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.618em;
  margin-bottom: 7;
}

#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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

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

Matching includes capitalization.

“filler_text_1” does not equal “Filter_Text_1”

Also, you spelled it “filler” in the id and “Filter” in the text.

3

Now, I only left one problem which is Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).
I try to add . before all the nav-link, but it doesn’t work. what should I do.
I need help.

4

Look at your first nav link. The text is “Hello world”.

Look at its corresponding section, the header text is “Filter_Text_1”.

These need to match.

5

I revised this two detailed. But I still can not fixed the problem. * Failed:Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

  • Failed: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).
6

First one, I try to fix the nav-link="hello world before the hello world.
Second question, I do not understand.

7

All of your links had this problem, not just the one I pointed out.

If you are still having problems then you need to paste your updated HTML in here so we can see what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

8 
 <header>Topic</header>
  
 <a class="nav-link" href="#filler_text_1">Hello world</a>
 <a class="nav-link" href="#filler_text_2">Hello world</a>
 <a class="nav-link" href="#filler_text_3">Hello world</a>
 <a class="nav-link" href="#filler_text_4">Hello world</a>
 <a class="nav-link" href="#filler_text_5">Hello world</a>

</nav>

<header>Filter_Text_1</header>

This is paragraph 1.

This is paragraph 2.

Sample

<header>Filter_Text_2</header>

This is paragraph 3.

This is paragraph 4.

Filter_Text_3

This is paragraph 5.

This is paragraph 6.

Filter_Text_4

This is paragraph 7.

This is paragraph 8.

Filter_Text_5

This is paragraph 9.

This is paragraph 10.

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

I do not know how to solve this problem.
I try to add “.” in front of the nav-link. but it doesn’t appear good result well.

9

You didn’t quite paste your HTML in here properly. Make sure you start with triple backs on a line by itself, then paste in all of your HTML below those back ticks, then after your HTML add another set of triple back ticks on a line by itself.

10

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