Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

I got error why after running my code. But my webpage is working perfectly correct. Couldn’t identify the error, please, I need support!

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css"/> 
  </head>
  <body>
<nav id="navbar">
<header>Python Documentation</header>
<ul>
  <li ><a class="nav-link" href="#Introduction" id="nav-link">Introduction</a>
  </li>

  <li ><a class="nav-link" href="#What_can_Python_do?" id="nav-link">What can Python do?</a>
  </li>

  <li ><a class="nav-link" href="#Why_Python?" id="nav-link">Why Python?</a>
  </li>

  <li ><a class="nav-link" href="#Good_to_know" id="nav-link">Good to know</a>
  </li>

  <li ><a class="nav-link" href="#Python_Syntax_compared_to_other_programming_languages" id="nav-link">Python Syntax compared to other programming languages</a>
  </li>

  <li ><a class="nav-link" href="#Python_Syntax" id="nav-link">Python Syntax</a>
  </li>

  <li ><a href="#Python_Indentation" class="nav-link" id="nav-link">Python Indentation</a>
  </li>

  <li ><a class="nav-link" href="#Python_Variables" id="nav-link">Python Variables</a>
  </li>

  <li ><a class="nav-link"href="#Comments" id="nav-link">Comments</a>
  </li>

  <li ><a class="nav-link" href="#File_Handling" id="nav-link">File Handling</a>
  </li>
 
</ul>
</nav>

<!-- MAIN SECTION -->
<main id="main-doc">
  <!-- First SECTION -->
  <section id="#Introduction" class="main-section">
<header>Introduction</header>
    <article>
<p>
  Python is a popular programming language. It was created by Guido van Rossum, and released in 1991.
</p>

  <p>Python is a very powerful high language object-oriented programming langauge and can be used for many things.</p>
  <ul>
    <span><strong>It can be used for:</strong>
    </span>

    <li >web development (server-side),</li>
    <li >Software Dvelopment,</li>
    <li >Machine learning,</li>
    <li >Artificial Itelligence,</li>
    <li >Mathematics,</li>
    <li >System Scripting</li>
  </ul>

    </article>
  </section>

  <!-- Second SECTION -->
  <section id="What_can_Python_do?" class="main-section">
<header>What can Python do?</header>
    <article>
<ul>
<li >
  <p>Python can be used on a server to create web applications.</p>
  </li>

<li >
  <p>Python can be used alongside software to create workflows.</p>
  </li>

<li ><p>Python can connect to database systems. It can also read and modify files.</p>
</li>

<li >
  <p>Python can be used to handle big data and perform complex mathematics.</p>
  </li>

<li >
  <p>Python can be used for rapid prototyping, or for production-ready software development.</p>
  </li>

<li >
  </p>Python can be used for machine learning and Artificial Intelligence.</p>
  </li>

<li >
  </p>Python can be used for task automation, data analysis, and data visualization.</p>
  </li>
</ul>
    </article>
  </section>

  <!-- Third SECTION -->
  <section id="Why_Python?" class="main-section">
    <header>Why Python?</header>
    <article>
<ul>
  <li >
    <p>Python works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc).</p>
  </li>
  <li >
    <p>Python has a simple syntax similar to the English language.</p>
  </li>
  <li >
    <p>Python has syntax that allows developers to write programs with fewer lines than some other programming languages.</p>
  </li>
  <li >
    <p>Python runs on an interpreter system, meaning that code can be executed as soon as it is written. This means that prototyping can be very quick.</p>
  </li>
  <li >
    <p>Python can be treated in a procedural way, an object-oriented way or a functional way.</p>
  </li>
  <li >
    <p>Python is a multi-purpose Language. It can be used for Web Dvelopment, Software Development and many things.</p>
  </li>
</ul>
    </article>
  </section>

  <!-- Fourth SECTION -->
  <section id="Good_to_know"class="main-section">
    <header>Good to know</header>
    <article>
<ul>
  <li >
    <p>The most recent major version of Python is Python 3, which we shall be using in this tutorial. However, Python 2, although not being updated with anything other than security updates, is still quite popular.</p>
    </li>

  <li >
    <p>In this tutorial Python will be written in a text editor. It is possible to write Python in an Integrated Development Environment, such as Thonny, Pycharm, Netbeans or Eclipse which are particularly useful when managing larger collections of Python files.</p>
    </li>
</ul>
    </article>
  </section>

  <!-- Fifth SECTION -->
  <section id="Python_Syntax_compared_to_other_programming_languages"class="main-section">
    <header>Python Syntax compared to other programming languages</header>
    <article>
<ul>
  <li >Python was designed for readability, and has some similarities to the English language with influence from mathematics.</li>
  <li >Python uses new lines to complete a command, as opposed to other programming languages which often use semicolons or parentheses.</li>
  <li >Python relies on indentation, using whitespace, to define scope; such as the scope of loops, functions and classes. Other programming languages often use curly-brackets for this purpose.</li>
</ul>
<h3>Example</h3>
<code><span class="blue-color">print</span>("Hello World!");</code>
  <code>Result => Hello World!</code>

    </article>
  </section>

  <!-- Sixth SECTION -->
  <section id="Python_Syntax" class="main-section">
    <header>Python Syntax</header>
    <p>Python has one of the most easiest and shortest syntax, written with just short lines of code to complete a task.</p>
    <h3>Execute Python Syntax</h3>
    <article>
<p>As we learned in the previous page, Python syntax can be executed by writing directly in the Command Line:</p>
<code>>>> <span class="blue-color">print</span>("My name is Sixtus!");</code>
<code>My name is Sixtus!</code>
<p>Or by creating a python file on the server, using the .py file extension, and running it in the Command Line:</p>
    </article>
  </section>

  <!-- Seventh SECTION -->
  <section id="Python_Indentation" class="main-section">
    <header>Python Indentation</header>
    <article>
<p>Indentation refers to the spaces at the beginning of a code line.</p>

<p>Where in other programming languages the indentation in code is for readability only, the indentation in Python is very important</p>

<p>Python uses indentation to indicate a block of code.</p>

<h3>Example</h3>
<code><span class="blue-color">if</span> 10 > 5:</code>
<code class="margin-left"><span class="blue-color">print</span>("Ten is greater than five!")</code>

<p>Failure to properly indent your codes, Python would throw an error. </p>


    </article>
  </section>

  <!-- Eighth SECTION -->
  <section id="Python_Variables" class="main-section">
    <header>Python Variables</header>
    <article>
<p>In Python, variables are created when you assign a value to it:</p>

<h3>Example:</h3>
<code>x = 6</code>
<code>y = "Hello, World"</code>
<code>Name = "John Doe"</code>

<p>Though, Python has no command for declaring a variable.</p>

<p>You will learn more about variables in the <a href="https://www.w3schools.com/python/python_variables.asp" target="_blank">Python Variables</a> chapter.</p>
    </article>
  </section>

  <!-- Ninth SECTION -->
  <section id="Comments" class="main-section">
    <header>Comments</header>
    <article>
<p>Python has commenting capability for the purpose of in-code documentation.</p>

<p>Comments start with a #, and Python will render the rest of the line as a comment:</p>

<h3>Example</h3>
<p class="comment">#This is a comment</p>
<code><span class="blue-color">print</span>("Hello, World")</code>
    </article>
  </section>

  <!-- Tenth SECTION -->
  <section id="File_Handling" class="main-section">
    <header>File Handling</header>
    <article>
         <span><strong>Python File Open</strong></span>
<p>File handling is an important part of any web application.</p>

<p>Python has several functions for creating, reading, updating, and deleting files.</p>

<p>The key function for working with files in Python is the <span class="red-color">open()</span> function.</p>

<p>The <span class="red-color">open()</span> function takes two parameters; filename, and mode.</p>

<p>There are four different methods (modes) for opening a file:</p>

<ul>
  <li ><span class="red-color">"r"</span> -  Read - Default value. Opens a file for reading, error if the file does not exist</li>
  <li >
    <span class="red-color">"a"</span> -  Append - Opens a file for appending, creates the file if it does not exist
  </li>
  <li >
    <span class="red-color">"w"</span> - Write - Opens a file for writing, creates the file if it does not exist
  </li>
  <li >
    <span class="red-color">"x"</span> -  Create - Creates the specified file, returns an error if the file exists
  </li>
</ul>

<p><b>Note</b> that you can also specify if the file should be handled as binary or text mode.</p>

<ul>
  <li ><span class="red-color">"t"</span> - Text - Default value. Text mode</li>
  <li>
    <span class="red-color">"b"</span> -  Binary - Binary mode (e.g. images)
  </li>
</ul>

<h3>Syntax</h3>

<p>To open a file for reading it is enough to specify the name of the file:</p>

<p><span class="green-color">f</span> = open("demofile.txt")</p>

<p>The code above is the same as:</p>

<p><span class="green-color">f</span> = open("demofile.txt", "rt") </p>

<p>Because "r" for read, and "t" for text are the default values, you do not need to specify them.</p>

<p><b>Important notice:</b> Be sure the file exist else, an error would be thrown.</p>

<h3>Reference</h3>
<ul>
  <li >
Almost all the Documentation in this page is taken from <a href="https://www. w3schools.com/python/python_reference.asp" target="_blank">W3schools</a></li>
</ul>
    </article>
  </section>

</main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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:

We need to see your code to help you

That’s the code above. The code actually works well and produced the required result from the webpage. But when executed to proceed to the next project, it’s throwing two errors that the #main-section should use the symbol( _ ) where there is space and should correspond to the it’s first child’s text, which is the headers. But in my opinion, I’ve done everything correctly just couldn’t explain why it keeps throwing error. Please, I some solutions!

Need some solutions I mean to say!

That’s one issue, I guess there can be more, that’s a lot of code

I found it with the validator, consider to use it:

As you can see below is the scores. You would can see the once that are passed and the once that are failed. which I not find the fault yet.

:heavy_check_mark: * You should have a main element with an id of main-doc.

:heavy_check_mark: * Passed:You should have at least five section elements with a class of main-section.

:heavy_check_mark: * Passed:All of your .main-section elements should be section elements.

:heavy_check_mark: * Passed:You should have at least five .main-section elements that are descendants of #main-doc.

:heavy_check_mark: * Passed:The first child of each .main-section should be a header element.

:heavy_check_mark: * Passed:None of your header elements should be empty.

:heavy_check_mark: * Passed:All of your .main-section elements should have an id.

:x:* Failed: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.

:heavy_check_mark: * Passed:You should have at least 10 p elements (total) within your .main-section elements.

:heavy_check_mark: * Passed:You should have at least five code elements that are descendants of .main-section elements.

:heavy_check_mark: * Passed:You should have at least five li elements that are descendants of .main-section elements.

:heavy_check_mark: * Passed:You should have a nav element with an id of navbar.

:heavy_check_mark: * Passed:Your #navbar should have exactly one header element within it.

:heavy_check_mark: * Passed:You should have at least one a element with a class of nav-link.

:heavy_check_mark: * Passed:All of your .nav-link elements should be anchor (a) elements.

:heavy_check_mark: * Passed:All of your .nav-link elements should be in the #navbar.

:heavy_check_mark: * Passed:You should have the same number of .nav-link and .main-section elements.

:heavy_check_mark: * Passed:The header element in the #navbar should come before any link (a) elements also in the #navbar.

:heavy_check_mark: * Passed: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”).

:x: * 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).

:heavy_check_mark: * Passed:Your #navbar should always be on the left edge of the window.

:heavy_check_mark: * Passed:Your Technical Documentation project should use at least one media query.

In addition, you have duplicate id-s in your HTML for some reason

Okay. Though I haven’t found the fault yet!

this is your problem, compare it to other sections

1 Like

I still couldn’t see the error though. That section element is as same as others. The id’s and the classes with their values respectively. The reason other id’s contains underscore( _ ) is because , the instruction was given that each value of an id that has a white space or space should be replaced with an underscore( _ )

Compare id-s of these two sections. Carefully. Your introduction section has some issue, it’s little, but it’s critical

Okay, let me try making a modification to see what it brings out.
Thanks though!

I have seen the mistake, from
the harsh tag(#) is the issue. Just see noticed it now. Thanks a lot!