Nav Bar Issue please Help

Hello Everyone,

I am completing the “Build a Technical Documentation Page” project from the Responsive Web design section.

I am having issue with the navbar, as 2 of ma section ( introduction and the interview process) seems not work but I can’t see what I am doing wrong.

These is the 3 tasks I am failing:

User Story #10: Additionally, the navbar should contain link (a ) elements with the class of “nav-link” . There should be one for every element with the class “main-section” .

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

This is my navbar code:

</header>
   <!--beginning of the menu/need to go down to bottom of page/right-->
     <ul>
       <li><a href="#INTRODUCTION" class="nav-link">Introduction</a></li>
      <li><a href="#HTML" class="nav-
        link">HTML</a></li>
      <li><a href="#CSS" class="nav-
        link">CSS</a></li>
      <li><a href="#JAVASCRIPT" class="nav-
        link">JAVASCRIPT</a></li>
      <li><a href="#Others" class="nav-
        link">Others</a></li>
      <li><a href="#The_interview_process"
        class="nav-link">The interview             process</a></li>
     </ul>
  </nav>
  </header>

This is my main section code:

<main id="main-doc">
   <h1>Everything you need to know to be a
     Front-end web developer</h1>
   
   <section id="INTRODUCTION" class="main-section">
     <header>Introduction</header>
      <p>Front end development manages everything that users visually see first in their browser or application. Front end developers are responsible for the look and feel of a site. Front end development is mostly focused on what some may coin the "client side" of development.</p>
      
      <p>To enable users to view and interact with data they need to be converted to a graphical interfacen this happened with the use of:</p>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
      <p>This three points will be covered in the next setions</p>
   </section>

...

<section class="main-section" id="The_interview_process">
<header>The interview process </header>
       <p>As a front-end developer, it’s inevitable that you will encounter a front-end technical interview (or ten). Unfortunately the process for a front-end development interview can be a bit unclear, and will vary from company to company.

Having a solid understanding of the process will help you feel more comfortable in your interviews. Interviewing is a skill that takes practice, but having insight into the process can calm your nerves.

So let’s take a look at the front-end development interview process:</p>
      
      <ul>
        <li>cultural interview</li>
        <li>coding interview</li>
        <li>take home challenge</li>
        <li>Final meetings&offer</li>
      </ul>
    </section>

The link to the codepen: https://codepen.io/emeline-baba/pen/XWNQdRE

Thanks

your navbar code starts with a closing tag, maybe you want to check that


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Your section headings have to be the same case as the nav a href elements: e.g -

<li><a href="#INTRODUCTION" class="nav-link">Introduction</a></li>
<section id="INTRODUCTION" class="main-section">
<!--same uppercase heading as a link-->
     <header>INTRODUCTION</header>
      <p>Front end development manages everything that users visually see first in their browser or application. Front end developers are responsible for the look and feel of a site. Front end development is mostly focused on what some may coin the "client side" of development.</p>
      ```

For some reason you have line breaks in your nav-links, after the hyphens:

<li><a href="#HTML" class="nav- 
        link">HTML</a></li>
      <li><a href="#CSS" class="nav-
        link">CSS</a></li>
      <li><a href="#JAVASCRIPT" class="nav-
        link">JAVASCRIPT</a></li>
1 Like

Thank you for the response, instructions for posting are well received :smiley:

Not sure to get what you mean for the Nav bar but will take the time to understand

Hi There!

Thank you, try to change it, but did not do it, will try again, might have some luck

My recommendation here was wrong, sorry and I’m happy your code worked out.

1 Like

Thank you ! That did it, I also had in the section, after resolving the issue I was able to pass all the test!

Thanks, The issue is fixed now, it was in the spacing :smiley:

1 Like