Technical Documentation Page - Build a Technical Documentation Page: Navbar

HTML-CSS
1

Tell us what’s happening:
I am unsure as to why the nav works and I have only one test check left unfilled .
Describe your issue in detail here.

   **Your code so far**

/* file: index.html */
<main id="main-doc">
 <link rel="stylesheet" type="styles.css" >
 <style>
   @media (min-width: 200px) and (max-width: 480px ) {
	header  {
		margin-top: 25;
		padding: .25em;
		text-align: center;
	} 
 #navbar {text-align:left;
}
	nav > a {
		font-size: 1.3em;
   margin-right:15em;
		margin-left: 0px;
		padding: 0;
		text-align: left;
		text-decoration: none;
   white-space:nowrap;
	}}
 </style>
  <nav id="navbar">
    <header>Nav</header>
    <code>  </code>
  <ul>
    <a class="nav-link" href="#Overview"><li>Overview</li></a>
    <a class="nav-link" href="#Popular_Libraries"><li>Popular Libraries</li></a>
    <a class="nav-link" href="#Python_History"><li>Python History</li></a>
     <a class="nav-link" href="#Blank_Section_1"><li>Blank Section 1</li></a>
    <a class="nav-link" href="#Blank_Section_2"><li>Blank Section 2</li></a>
    </ul>
    
 </nav>
<section class="main-section" id="Overview">
 <header>Overview</header>
 <code>  </code> 
 <p>Python is a general purpose programming language, and it is dynamically typed. Python is an interpreted language, meaning that Python must be interpreted by and ran in the language native to the device. </p>
 <p>Python is one of the fastest languages depending on what you use it for, and probably on your hardware. </p>
</section>
<section class="main-section" id="Popular_Libraries">
<header>Popular Libraries</header>
 <code>  </code>
  <ul> 
    <li><h2>NumPy</h2></li>
    <p>"Numerical Python" is commonly used for machine learning, it has a built in array interface.  </p>
    <li><h2>PyPy</h2></li>
    <p>PyPy is a replacement for CPython (Cython) and </p>
    <li><h2>Matplotlib</h2></li>
    <p>Is used to plot data. You can make charts and graphs withit, definiitely a useful library in the field of data science, and marketing</p>
    <li><h2>Flask</h2></li>
    <p>Flask is a web framework used because it lacks certain things found in other web frameworks like <ul><li>Form Validation</li>
<li>Database Abstraction Layer</li>
    </ul>
    </p>
    <li><h2>Pandas</h2></li>
    <p></p>
    <li><h2></h2></li>
    <p></p>
  </ul>
 </section>
<section class="main-section" id="Python_History">
 <header>Python History</header>
 <code></code>
 <li><h2></h2></li>
 <p></p>
 <p></p>

</section>
<section class="main-section" id="Blank_Section_1">
<header>Blank Section 1</header>
<code>  </code> 
<li></li>
 <p></p>
 <p></p>
 
</section>
<section class="main-section" id="blank_section_2">
  <header>Blank Section 2</header>
 <code>  </code>
 <p></p>
 <p></p>
 <li></li>
</section>

</main>

/* file: styles.css */


   **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Can you give some more details? Which test is failing?

3

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

4

I have indented your code here so it can be more easily read.

/* file: index.html */
<main id="main-doc">
    <link rel="stylesheet" type="styles.css" >
    <style>
    @media (min-width: 200px) and (max-width: 480px ) {
        header  {
            margin-top: 25;
            padding: .25em;
            text-align: center;
        } 
        #navbar {text-align:left;
        }
        nav > a {
            font-size: 1.3em;
            margin-right:15em;
            margin-left: 0px;
            padding: 0;
            text-align: left;
            text-decoration: none;
            white-space:nowrap;
            }}
            </style>
            <nav id="navbar">
                <header>Nav</header>
                <code>  </code>
                <ul>
                    <a class="nav-link" href="#Overview"><li>Overview</li></a>
                    <a class="nav-link" href="#Popular_Libraries"><li>Popular Libraries</li></a>
                    <a class="nav-link" href="#Python_History"><li>Python History</li></a>
                    <a class="nav-link" href="#Blank_Section_1"><li>Blank Section 1</li></a>
                    <a class="nav-link" href="#Blank_Section_2"><li>Blank Section 2</li></a>
                </ul>
                
            </nav>
            <section class="main-section" id="Overview">
                <header>Overview</header>
                <code>  </code> 
                <p>Python is a general purpose programming language, and it is dynamically typed. Python is an interpreted language, meaning that Python must be interpreted by and ran in the language native to the device. </p>
                <p>Python is one of the fastest languages depending on what you use it for, and probably on your hardware. </p>
            </section>
            <section class="main-section" id="Popular_Libraries">
                <header>Popular Libraries</header>
                <code>  </code>
                <ul> 
                    <li><h2>NumPy</h2></li>
                    <p>"Numerical Python" is commonly used for machine learning, it has a built in array interface.  </p>
                    <li><h2>PyPy</h2></li>
                    <p>PyPy is a replacement for CPython (Cython) and </p>
                    <li><h2>Matplotlib</h2></li>
                    <p>Is used to plot data. You can make charts and graphs withit, definiitely a useful library in the field of data science, and marketing</p>
                    <li><h2>Flask</h2></li>
                    <p>Flask is a web framework used because it lacks certain things found in other web frameworks like <ul><li>Form Validation</li>
                        <li>Database Abstraction Layer</li>
                    </ul>
                </p>
                <li><h2>Pandas</h2></li>
                <p></p>
                <li><h2></h2></li>
                <p></p>
            </ul>
        </section>
        <section class="main-section" id="Python_History">
            <header>Python History</header>
            <code></code>
            <li><h2></h2></li>
            <p></p>
            <p></p>
            
        </section>
        <section class="main-section" id="Blank_Section_1">
            <header>Blank Section 1</header>
            <code>  </code> 
            <li></li>
            <p></p>
            <p></p>
            
        </section>
        <section class="main-section" id="blank_section_2">
            <header>Blank Section 2</header>
            <code>  </code>
            <p></p>
            <p></p>
            <li></li>
        </section>
        
    </main>

This section here:

    <link rel="stylesheet" type="styles.css" >
    <style>
    @media (min-width: 200px) and (max-width: 480px ) {
        header  {
            margin-top: 25;
            padding: .25em;
            text-align: center;
        } 
        #navbar {text-align:left;
        }
        nav > a {
            font-size: 1.3em;
            margin-right:15em;
            margin-left: 0px;
            padding: 0;
            text-align: left;
            text-decoration: none;
            white-space:nowrap;
        }
    }
    </style>

This line is not valid html:
<link rel="stylesheet" type="styles.css" >
(to link to a stylesheet use the href attribute, not the type attribute)

Below there is a closing p tag at the end but no matching opening p tag:

        <header>Popular Libraries</header>
        <code>  </code>
        <ul>
            <li><h2>NumPy</h2></li>
            <p>"Numerical Python" is commonly used for machine learning, it has a built in array interface.  </p>
            <li><h2>PyPy</h2></li>
            <p>PyPy is a replacement for CPython (Cython) and </p>
            <li><h2>Matplotlib</h2></li>
            <p>Is used to plot data. You can make charts and graphs withit, definiitely a useful library in the field of data science, and marketing</p>
            <li><h2>Flask</h2></li>
            <p>Flask is a web framework used because it lacks certain things found in other web frameworks like <ul><li>Form Validation</li>
                <li>Database Abstraction Layer</li>
            </ul>
        </p>

You are missing the <!DOCTYPE html> declaration

as well the margin-top: 25; is missing units

In this line:
<section class="main-section" id="blank_section_2">
The id should have a capital B and capital S

There are other mistakes as well (like when you make a ul list, the children all have to be of type li, but you have added p and other types of children in the list. You should restructure the elements to be children of the li, not children of the ul)

I think the error with the id will fix the test just by itself but you should fix the rest of your code if you want to have well-formed HTML for future reference and practice.

1 Like
5

I fixed some of it and I will probably add to these projects later (as I learn Javascript). Thank you, for your help.

1 Like
6

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