Technical Documentation Page - Build a Technical Documentation Page

I’m getting runtime errors but I feel my code should pass
Runtime errors:

  • You should have at least 10 p elements (total) within your .main-section elements.
  • Failed:You should have at least five code elements that are descendants of .main-section elements.
  • Failed:You should have at least five li elements that are descendants of .main-section elements.
  • 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”).
  • Failed: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).
**`<link rel="stylesheet" href="styles.css"></link>
<main id="main-doc">
   
<section class="main-section" id="Functional_app">
    <header>Functional App</header>
     <p></p>
     <p></p> 
     <code></code> 
     <ul><li>Create a functional Application</li></ul>
</section>

<section class="main-section" id="JavaScript_and_Java"><header>
    JavaScript and Java</header></section>
    <p></p>
    <p></p>
    <code></code>
    <ul><li>JavaScript and Java App</li></ul> 

<section class="main-section" id="C" href="C">
    <header>C</header>
    <p></p>
    <p></p>
    <code></code>
    <ul><li>C</li></ul>
</section>

<section class="main-section" id="C++">
   <header>C++</header>
   <p></p>
   <p></p>
   <code></code>
   <ul><li>C++</li></ul>
</section>

<section class="main-section" id="Python">
    <header>Python</header>
    <p></p>
    <p></p>
    <p></p>    
    <code></code>
    <ul><li>Python</li></ul> 
</section>

<nav id="navbar">
<header>Technical Documentation</header>

<a class="nav-link" href="Functional_app">Functional_app</a>
<a class="nav-link" href="JavaScript_and_Java">JavaScript_and_Java</</a>
<a class="nav-link" href="C">C</a>
<a class="nav-link" href="C++">C++</a>
<a class="nav-link" href="Python">Python</a>
</nav>

</main> 

#navbar{
  text-align:left;
  
}
@media (width:275px){
  main {
background-color: lightblue;
}
}`**

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

You have a misplaced section tag here which is causing some tests to fail.

1 Like

Hello!

I believe to get elements to be decendants of another element (main, div, nav, whatever) the decendant elements need to all be within the opening and closing of the original element.

Like how the html element encloses all other elements in the code.
This is how I believe the parent element behaves to the other elements.
It does not matter if the decendants have other decendants, only that all of the decendants be within the parent element.

Example:
< main>
< h1> < a href = “”> < /a>
< /h1>
< div class= “navbar”>
< nav-link> < /nav> < /div>
< /main>

I believe everything within the main element would be decendants of the main element.
That is my way of working on my projects.

Hope this helps you.
Happy coding! :slight_smile:

1 Like

Good morning, thank you so much for the assistance. 3 days man 3 days… a syntax error I didn’t see. Nevertheless, Ive been chopping and changing my code for a while. I am still finding no progress with the nav bark and nav link elements.
*Your #navbar should have exactly one header element within it.

  • You should have the same number of .nav-link and .main-section elements.
  • 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”).
  • Failed: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).

`

Navigation Bar Functional App JavaScript and Java C C++ Python Functional App

  • Create a functional Application
JavaScript and Java

  • JavaScript and Java App
C

  • C
C++

  • C++
Python

  • Python
`
<link rel="stylesheet" href="styles.css"></link>
<main id="main-doc">

<nav id="navbar">
    <header>Navigation Bar</header>
    <a class="nav_link" href="Functional_App">Functional App</a>
    <a class="nav-link" href="JavaScript_and_Java">JavaScript and Java</a> 
    <a class="nav-link" href="C">C</a>
    <a class="nav-link" href="C++">C++</a>
    <a class="nav-link" href="Python">Python</a>
    <nav>

<section class="main-section" id="Functional_app">
    <header>Functional App</header>
     <p></p>
     <p></p> 
     <code></code> 
     <ul><li>Create a functional Application</li></ul>
</section>

<section class="main-section" id="JavaScript_and_Java">
  <header>JavaScript and Java</header>
    <p></p>
    <p></p>
    <code></code>
    <ul><li>JavaScript and Java App</li></ul> 
</section>

<section class="main-section" id="C">
  <header>C</header>
    <p></p>
    <p></p>
    <code></code>
    <ul><li>C</li></ul>
</section>

<section class="main-section" id="C++">
  <header>C++</header>
   <p></p>
   <p></p>
   <code></code>
   <ul><li>C++</li></ul>
   
</section>

<section class="main-section" id="Python">
  <header>Python</header>
    <p></p>
    <p></p>
    <p></p>    
    <code></code>
    <ul><li>Python</li></ul> 
</section>

</main> 

I copied and pasted the coded incorrectly, please see the correct pasted code below the following reply.

i apparently do not have the same amount of navlinkand main section elements
and * 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”).

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

There are some issues with your code. You should have the following elements for a properly structured HTML document:

  1. A DOCTYPE declaration at the top of your document.
  2. An html element which contains all of your HTML code.
  3. A head element, which should contain meta, title and link elements containing of all the document’s metadata. Also, link elements are self-closing, so don’t need a separate closing tag.
  4. A body element, which contains all elements which are visible to the user.

As for the failing tests:

  1. If you want your href attributes to point to an id elsewhere on the page, they should each be prefixed with a hash (#).
  2. One of your .nav-link elements has a typo (it has an underscore instead of a hyphen).

Fix those two things and all of your tests will pass.

Thank you, so much for the assistance. I had the !DOCTYPE html meta elements but I chose to clean up as much as I could in order to see better. Regardless, all my errors were syntax errors excluding the # that you advised. so much time wasted. I learned plenty.

1 Like

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