Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
Can someone help me on this project becuase in this task, where it say:

  • The header element in the #navbar should come before any link (a ) elements also in the #navbar .
  • 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”).
  • 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).

I been 3 to 4 days, and I have no idea how to get pass this problem

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

@phanuntneang77
Kindly share your code so i can see your html & CSS structure…
preferably i prefer you share it on code pen

here, u go: https://codepen.io/ElegantPotato/pen/MWVQLmb

From what i’m seeing here, the challenge needs you to have your header element inside your nav bar but from what i’m seeing here, your header element is not inside the nav bar…The nav bar stands as parent element for your header element so once you fix that, you should pass the challenge

  <div class="header1">
    <header id="header">

      <nav id="navbar">
        <h1>Health & Fitness </h1>

oh okay but what about this part:

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

@phanuntneang77
Were you able to pass the first challenge with my explanation? Well I’ll solve the problem for you now just give me a second !!!

AH let me rehceck my code

I was able to pass that part, but im stil stuck on this part:

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

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

   <header id="9" class="heading">How to be Consistent</header>

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

If you look at your previous header element, class=“heading” comes before id=“9”…Try to fix that and let me know if you pass the challenge

I manage to fix that by using the id of the section element. Now there only 2 problem left, which is:

  • You should have the same number of .nav-link and .main-section elements.
  • You should have at least five code elements that are descendants of .main-section elements.

Currently, Im working on the first one, which is having the same amoutn of nav link and main section. But even though the amoutn of nav link and main section is the same, it still show me that error

@phanuntneang77
It’s so hard to read your code but i was able to find some errors…Look at line 25 in your html structure, you didn’t close the anchor tag & again you also didn’t add a class to your anchor tag, you only stated the href attribute & the class=“nav-link” should come before the href attribute but you omitted that…Here’s what i’m saying below…

<nav id="navbar">
        <h1>Health & Fitness </h1>
        <ul>
          <li><a href="#1">Introduction</a></li>
          <hr>
          <li><a href="#2">Meditation</a></li>
          <hr>

          <li><a class="nav-link" href="#3">Healthy Food</a></li>
          <hr>
          

if you look at class of nav-link for “healthy food”, you would notice that you added a class for it but you didn’t for “introduction” and “meditation” so fix that & let me know if you passed the challenge…

This is how all your anchor tag should look like but you omitted class=“nav-link” for introduction & meditation

I can’t see any code element in your html structure that’s why you won’t pass the challenge…Here’s a preview below of what a code element looks like

were you able to pass my challenge with my explanation??

I seem to have fixed my mistake becuase I add thew class nav link to my introductions and meditations. As for having at least five code elements that are descendants of .main-section elements. Im still working on that. But after fixing the first 2 mistake, it still show this error:

  • You should have at least five code elements that are descendants of .main-section elements.

Is there a way for me to show you my code? In a clear manner so that you can pinpoint my mistake?

Here my code pen if you want to see my html structure. It updated to my last edit:

Did you pass the challenge with my explanation??

I fixed the problem, but i wasnt able to pass the challenge

You won’t pass the challenge simply because you don’t have any code element in your html structure when i looked at it…I already showed you what a code element looks like previously

yes, I will add a code element to my html structure, but what troublesome is this:

  • Failed:You should have at least five code elements that are descendants of .main-section elements.

All you need to do is add at least 5 code elements to your html structure and once you do that, you should pass the challenge