Nav Bar Issue please Help

HTML-CSS
1

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

2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

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>
      ```
4

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
5

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

6

Hi There!

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

7

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

1 Like
8

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

9

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

1 Like
10

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