Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

I am not passing User Story #12: 1. 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”)

I have reread each corresponding id and section header for spelling errors and am not finding the issue. Any input is appreciated! (this is my first post)

Your code so far

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>  

  <body>
  <nav id="navbar">
  <header class="JS">Javascript Documentation</header>

<!--Navigation Bar-->
    <ul class="navul">
      <li><a class="nav-link" href="#Introduction">Introduction</a></li>
      <li><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li>
      <li><a class="nav-link" href="#Javascript_and_Java">Javascript and Java</a></li>
      <li><a class="nav-link" href="#Hello_World">Hello World</li></a>
      <li><a class="nav-link" href="#Variables">Variables</li></a>
      <li><a class="nav-link" href="#Declaring_Variables">Declaring Variables</li></a>
      <li><a class="nav-link" href="#Variable_Scope">Variable Scope</li></a>      
      <li><a class="nav-link" href="#Global_Variables">Global Variables</li></a>    
      <li><a class="nav-link" href="#Constants">Constants</li></a>    
      <li><a class="nav-link" href="#Data_Types">Data Types</li></a> 
      <li><a class="nav-link" href="#If...else_statements">If...else statements</li><a>         
      <li><a class="nav-link" href="#While_statement">While statement</li></a> 
      <li><a class="nav-link" href="#Functional_Declaration">Function Declaration</li></a> 
      <li><a class="nav-link" href="#Reference">Reference</li></a>       
    </nav>      

 <!--Main Doc-->         
  <main id="main-doc">

<!--Section 1-->
    <section class="main-section" id="Introduction">
      <header>Introduction</header>
      <p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
      <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</P>
    <code></code> 
    <li></li>  
 <!--Section 2-->   
    </section>
    <section class="main-section" id="What_you_should_already_know">
      <header>What you should already know</header>
      <p></p>
      <p></P>
   <code></code>   
    <li></li>           
    </section>     
<!--Section 3-->     
    <section class="main-section" id="Javascript_and_Java">
      <header>Javascript and Java</header>  
      <p></p>
      <p></P>      
   <code></code>    
    <li></li>              
    </section>  
<!--Section 4-->    
    <section class="main-section" id="Hello_World">
      <header>Hello World</header>     
      <p></p>
      <p></P>    
   <code></code>  
    <li></li>               
    </section>  
<!--Section 5-->     
    <section class="main-section" id="Variables">
      <header>Variables</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>     
<!--Section 6-->    
    <section class="main-section" id="Declaring_Variables">
      <header>Declaring Variables</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>  
<!--Section 7-->              
    <section class="main-section" id="Variable_Scope">
      <header>Variable Scope</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>   
<!--Section 8-->            
    <section class="main-section" id="Global_Variables">
      <header>Global Variables</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>  
<!--Section 9-->
    <section class="main-section" id="Constants">
      <header>Constants</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>   
<!--Section 10-->
    <section class="main-section" id="Data_Types">
      <header>Data Types</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>    
<!--Section 11-->
    <section class="main-section" id="If...else_statements">
      <header>If...else statements</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>   
<!--Section 12-->
    <section class="main-section" id="While_statement">
      <header>While statement</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>      
<!--Section 13-->
    <section class="main-section" id="Functional_Declaration">
      <header>Functional Declaration</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section> 
<!--Section 14-->
    <section class="main-section" id="Reference">
      <header>Reference</header>    
      <p></p>
      <p></P>     
   <code></code>     
    <li></li>            
    </section>      
  </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hey, didn’t I already help you with one issue but left this one for you to fix :slight_smile: Are you trying to get out of it :slight_smile:

Welcome to the wonderful world of finding typos. It’s there. You just need to look really hard.

P.S. OK, I don’t think I did help you, it was someone else with this same issue. Sorry for the accusations. But I was just having fun and wasn’t serious anyway. But seriously, the typo is there to find.

To make it up to you, I’ll give you a hint. It’s one of the last links in your nav menu.

4

@PaulMorphy Why did you add a class to your unordered list tag??
You can just make it a child element under id of nav-bar and what the challenge needs you to do is each element of the class of nav-link that has a text, must correspond or correlate to the header element text within the section element…Look at the class of nav-link “If… else statement”, you shouldn’t add a dot to it…This is what you should have…

<a class="nav-link" href="#If_else_statements">If...else statements</li><a>
5

Thank you all. It looks like I wrote “Function Declaration” instead of “Functional Declaration” as my nav link text (I wrote “Functional Declaration” as my class link so they did not match.

I was able to get this to work without changing #If…else_statements to #If_else_statements as well

6

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