Build a Technical Documentation Page! can you help me with the css section?

HTML-CSS
1

hello there!
this is my code for this challenge!

I have actually passed all the [user stories] for this challenge but I am failing at making the li element actually responded to other sections!
no matter what I do they still go directly to only the introduction section.

also, I have been failing to make the navbar stickers to the left side of the page, I guess I’m struggling with the Css is there any way to fix this?

2

You’ve given your section elements and your header elements the same id’s. This won’t work because id’s are supposed to be unique. I would give it to your section elements and give your header elements some other id name. Then see if your nav links will work.

3

As for the navbar position, I would open the codepen editor for the example page for this project and look at FCC’s css. That’s what I had to do. It was a good learning experience.

https://codepen.io/freeCodeCamp/pen/NdrKKL

4

12. Each element with the class of “nav-link” should contain text that corresponds to the text within each (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”)

does this mean that i have to add the id to the section or the header?

5

i have tried but the li items kept appearing above the other elements and not really to the left especially when i set it to fixed!
i tried to add so i can separate em but it kept giving me an error when i was i tried to close

6

This just means that if you have a header called “javaScript” then you need to have a nav link that shows the text “javaScript”. In other words, the text for the links should match the text for the section headers. This user-story requirement is unrelated to the id. It’s really about the text.

7

Bruh An Id is something unique. You should have only use one id for one element.

Here you are giving the same ID to the navlink and also the section. When clicking on the link the page will go to the navlink with that id.

<li><a class="nav-link" id="introduction" href="#introduction">Introduction</a></li>

 <header id="introduction">Introduction</header>

Either give a different id to the navlink or change that to class.Issue will be fixed

8

okay i’ll try, thank you so much for explaining.

2 Likes
9

thanks for replying i’ll try fix it.

1 Like
10

it didn’t work
still not responding to the section

11
12

You’re still reusing id’s multiple times. Gimme a min and I’ll post what it should be…

1 Like
13

I just gone through your code you made some serious mistakes.

The <head> tag is supposed to hold the meta data about your page. You cant use it like you just did.

Put the navlinks and sections inside a container div and add a display of flex to the div

1 Like
14

Here is an example of those duplicates ids the others have mentioned.

You have

  <section class="main-section" id="introduction">
    <header id="introduction">Introduction</header>

That is just one of the duplicates I found.
You will need to carefully go through the document and remove all of the duplicate ids because there are a few.

@adramelech brought up another issue concerning the head tags.

Cleaning up your html will help you pass these tests.
As well as give you a better understanding of the proper html structure.

Here is the html validator

If you need further assistance then let us know. :grinning:

15

such a great community!
thank you so much for replying
i will check it again

16 
    <ul>
      <li><a class="nav-link" href="#introduction">Introduction</a></li>

      <li><a class="nav-link" href="#front_end_development"> Front end development</a></li>

      <li><a class="nav-link" href="#algorithems"> Algorithems</a></li>

      <li><a class="nav-link" href="#javascript"> Javascript</a></li>

      <li><a class="nav-link" href="#data_science">data science</a></li>

    </ul>
  </nav>
</head>

<body>

  <main id="main-doc">
    <section class="main-section" id="introduction">
      <header>Introduction</header>
      ...

    <section class="main-section" id="front_end_development">
      <header id>Front End Development</header>
    ....

          <section class="main-section" id="algorithems">
            <header>Algorithems</header>
            .....
            <section class="main-section" id="javascript">
              <header>javaScript</header>
              ...
            <section class="main-section" id="data_science">
              <header>Data science</header>
1 Like
17

it worked now i see what i have been doing wrong!
thanks for ur time

1 Like
18

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