Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
2 tests aren’t passing. They are as follows:

  1. Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

  2. 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).
    As best as I can tell the only section that doesn’t doesn’t navigate to its main section is the Design Philsophy Section. Here is the code so far on that section:

    ** <li><a class="nav-link"  href="#Design_Philosophy">Design Philosophy</a>
    
Design Philosophy

Python uses dynamic typing that combines with reference counting and cycle-detecting garbage collection that aids in memory management.

Its design does offer limited support for functional programming in the LISP tradition.

  • Cited from the Zen of Python (PEP 20)
    • Beautiful is better than ugly
      Explicit is better than implicit.
      Simple is better than complex.
      Complex is better than complicated
      Readability counts
    .**
    /* file: index.html */
    <link rel="stylesheet" href="styles.css">
    
     <nav id="navbar">
     <header>
    Python Documentation
     </header>
     <ul>
     <li><a class="nav-link"           href="#Introduction">Introduction</a>
    </li>
    <li><a class="nav-link"           href="#Design_Philosophy">Design Philosophy</a>
    </li>
    <li><a class="nav-link"           href="#Semantics_and_Syntax">Semantics and Syntax</a>
    </li>
    <li><a class="nav-link"           href="#Examples_of_Programming">Examples of Programming</a>
    </li>
    <li><a class="nav-link"           href="#Python_Libraries">Python Libraries</a>
    </li>
    </ul>
     </nav>
    <main id="main-doc">
    <section class="main-section" id="Introduction">
     <header>Introduction</header>
     <p>Python is a Programming language that supports multiple programming paradigms including object-oriented and functional programming.</p>
     <p>Guido Van Rossum conceived it in the late 1980s and released version 0.90 in 1991.</p>
    </section>
    <section class="main-section" id="#Design_Philosophy">
     <header>Design Philosophy</header>
     <p>Python uses dynamic typing that combines with reference counting and cycle-detecting garbage collection that aids in memory management.</p>
     <p>Its design does offer limited support for functional programming in the LISP tradition.</p>
     <li>Cited from the Zen of Python (PEP 20)</li>
     <ul>Beautiful is better than ugly</ul>
     <ul>Explicit is better than implicit.</ul>
     <ul>Simple is better than complex.</ul>
     <ul>Complex is better than complicated</ul>
     <ul>Readability counts</ul>
    
    </section>
    <section class="main-section" id="Semantics_and_Syntax">
     <header>Semantics and Syntax</header>
     <p>Python is intended to be an easily readable language and utilizes white space instead of curly brackets or keywords to delimit blocks.</p>
     <p>Python has the usual arithmetic operators but when it comes to division there are two types of division in Python. Namely floor division (or integer division) and floating point division.</p>
    
    </section>
    <section class="main-section" id="Examples_of_Programming">
     <header>Examples of Programming</header>
     <p>Displayed below are two(2) examples of Python programming. The first is Hello World and the second calculates the factorial of a positive integer.</p>
    <p>Hello World Program</p>
     <code>print('Hello, world!')</code>
     <p>Positive Factorial Integer</p>
     <code>n = int(input('Type a number, and its factorial will be printed: ')) 
    if n < 0:
      raise ValueError('You must enter a non-negative integer') 
    factorial = 1 
    for i in range(2, n + 1):
      factorial *= i 
    print(factorial)</code>
     <cite>Wikipedia Python (Programming language): https://en.wikipedia.org/wiki/Python_(programming_language)
    </cite>
    <li> Area of a Triangle</li>
    <ul>Mathematical formula: Area of a triangle = (s*(s-a)*(s-b)*(s-c))-1/2
    <p> Here is the semi-perimeter and a, b and c are three sides of the triangle. Let's understand the following example</p>
    
    <li> Three sides of the triangle is a, b and c:</li>
    <code>  
    a = float(input('Enter first side: '))  
    b = float(input('Enter second side: '))  
    c = float(input('Enter third side: '))  
    </code> 
    <li> calculate the semi-perimeter </li> 
    <code> s = (a + b + c) / 2 </code> 
     
    <li> calculate the area</li>  
    <code> area = (s*(s-a)*(s-b)*(s-c)) ** 0.5  
    print('The area of the triangle is %0.2f' %area) </code>  
    
    <cite>https://www.javatpoint.com/python-area-of-triangle</cite>
    
    </section>
    <section class="main-section" id="Python_Libraries">
     <header>Python Libraries</header>
     <p>Python has a large standard library that is suited to many different tasks. For Internet-facing applications, Python supports standard protocols such as MIME and HTTP.</p>
     <p>The libraries also include modules for creating graphical user interfaces, connecting to relational databases, pseudo-random numbers, and unit testing just to name a few.</p>
     <p>Parts of the libraries are covered with specifications one example is Web Server Gateway Interface (WSGI Covered by PEP 333).</p>
     <p>Most libraries, however, are specified by their code, internal documentation, and test suites.</p>
    </section>
    </main>
    
    /* file: styles.css */
    @media (max-width: 1199px) and (min-width: 769px) {
    
    }
    
       **Your browser information:**
    

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

    Challenge: Technical Documentation Page - Build a Technical Documentation Page

    Link to the challenge:

    Does your main-sections match the id’s given to the .nav-link ?
    also your li elements dont have closing tags

    Hi!
    I advise you run your code though a html validator. I’m seeing a lot of syntax errors particularly in regards to list elements.

    I’d advise reading up on them.

    I’m also not seeing a <head> or <body> element. These are important and should be present. Review the new responsive design course section Learn Basic CSS by Building a Cafe Menu. That goes though the structuring of a HTML head element and what needs to be inside it.

    Found the problem. It was a misplaced hashtag. Thanks for your help

    1 Like

    I Found the problem. It was a misplaced hashtag. Thanks for your help

    1 Like