Technical Documentation Page - Build a Technical Documentation Page

I can’t tell why it says I don’t have five sections when i do. As well as five nav elements to match the number of sections. I don’t knoow what I’m doing wrong.

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.

<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
<title>Technical Document</title>
    </head>
  <body>
    <nav id="navbar">
      <header>The Ultimate Python Beginner's Handbook</header>
      <ul>
        <li><a class="nav-link" href="#Introduction_to_Python">Introduction to Python</a> </li>
          <li><a class="nav-link" href="#Installing_Python_3">Installing Python 3</a> </li>
          <li><a class="nav-link" href="#Running_Code">Running Code</a> </li>
          <li><a class="nav-link" href="#Syntax">Syntax</a> </li>
          <li><a class="nav-link" href="#Comments">Comments</a> </li>
        </ul>
    </nav>
    <main id="main-doc">
<section class="main-section" id="Introduction_to_Python">
  <header>
    Introduction to Python
      </header>
      <article>
        <p>Python was created in 1990 by Guido van Rossum in Holland.</p>

<p>One of the objectives of the language was to be accessible to non-programmers.</p>

<p>Python was also designed to be a second language for programmers to learn due to its low learning curve and ease of use.</p>

<p>Python runs on Mac, Linux, Windows, and many other platforms.
</p>
<p>Python is:</p>
<ul>
<li>
  Interpreted: it can execute at runtime, and changes in a program are instantly perceptible. To be very technical, Python has a compiler. The difference when compared to Java or C++ is how transparent and automatic it is. With Python, we don't have to worry about the compilation step as it's done in real-time. The tradeoff is that interpreted languages are usually slower than compiled ones.</li>
  <li>
    Semantically Dynamic: you don't have to specify types for variables and there is nothing that makes you do it.</li>
    <li>
      Object-Oriented: everything in Python is an object. But you can choose to write code in an object-oriented, procedural, or even functional way.</li>
      <li>
        High level: you don't have to deal with low-level machine details.</li>
  </ul>
  <p>Python has been growing a lot recently partly because of its many uses in the following areas:</p>
  <ul>
<li>
  System scripting: it's a great tool to automate everyday repetitive tasks.</li>
  <li>Data Analysis: it is a great language to experiment with and has tons of libraries and tools to handle data, create models, visualize results and even deploy solutions. This is used in areas like Finance, E-commerce, and Research.</li>
  <li>Web Development: frameworks like Django and Flask allow the development of web applications, API's, and websites.</li>
  <li>Machine Learning: Tensorflow and Pytorch are some of the libraries that allow scientists and the industry to develop and deploy Artificial Intelligence solutions in Image Recognition, Health, Self-driving cars, and many other fields.</li>
    </ul>
    <p>
You can easily organize your code in modules and reuse them or share them with others.</p>

<p>Finally, we have to keep in mind that Python had breaking changes between versions 2 and 3. And since Python 2 support ended in 2020, this article is solely based on Python 3.</p>

<p>So let's get started.
      </p>
        </article>
  </section>
  <section class="main-section" id="Installing_Python_3">
    <header>
      Installing Python 3
      </header>
      <article>
        <p>
If you use a Mac or Linux you already have Python installed. But Windows doesn't come with Python installed by default.</p>

<p>You also might have Python 2, and we are going to use Python 3. So you should check to see if you have Python 3 first.</p>

<p>Type the following in your terminal.</p> 
<code class="code_dif">python3 -V</code>
<p>Notice the uppercase V.</p>
<p>If your result is something similar to 'Python 3.x.y', for instance,<code class="code_simp>Python 3.8.1</code>, then you are ready to go.</p>
<p>If not, follow the next instructions according to your Operating System.</p>
        </article>
    </section>
    <section class="main-section"
    id="Running_Code">
    <header>
        Running Code
      </header>
      <article>
        <p>You can run Python code directly in the terminal as commands or you can save the code in a file with the <code class="code_simp">.py</code> extension and run the Python file.</p>
        <h2>Terminal</h2>
        <p>Running commands directly in the terminal is recommended when you want to run something simple.</p>

<p>Open the command line and type <code class="code_simp">python3</code> </p> 
<code class="code_dif">renan@mypc:~$ python3</code>
<p>You should see something like this in your terminal indicating the version (in my case, Python 3.6.9), the operating system (I'm using Linux), and some basic commands to help you.</p>

<p>The <code class="code_simp">>>></code> tells us we are in the Python console.</p> 
<code class="code_dif">Python 3.6.9 (default, Nov  7 2019, 10:44:02) 
[GCC 8.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>></code>
<p>Let's test it by running our first program to perform basic math and add two numbers.</p> 
<code class="code_dif">>>> 2 + 2</code>
<p>The output is:</p> 
<code class="code_dif">4</code>
<p>To exit the Python console simply type <code class="code_simp">exit()</code>.</p> 
<code class="code_dif">>>> exit()</code>
<h3>Running <code class="code_simp">.py</code> files</h3>
<p>If you have a complex program, with many lines of code, the Python console isn't the best option.</p>

<p>The alternative is simply to open a text editor, type the code, and save the file with a <code class="code_simp">.py</code> extension.</p>
<p>Let's do that, create a file called <code class="code_simp">second_program.py</code> with the following content.</p>
<code class="code_dif">print('Second Program')</code> 
<p>The <code class="code_simp">print()</code> function prints a message on the screen.</p>
<p>The message goes inside the parentheses with either single quotes or double quotes, both work the same.</p>

<p>To run the program, on your terminal do the following:</p> 
<code class="code_dif">renan@mypc:~$ python3 second_program.py</code>
<p>The output is:</p> 
<code class="code_dif">Second Program</code>
        </article>
    </section>
    <section class="main-section"
    id="Syntax">
    <header>
        Syntax
      </header>
      <article>
        <p>
          Python is known for its clean syntax.</p>

<p>The language avoids using unnecessary characters to indicate some specificity.</p>
<h3>Semicolons</h3>
<p>Python doesn't use semicolons to finish lines. A new line is enough to tell the interpreter that a new command is beginning.</p>

<p>The <code class="code_simp">print()</code> method will display something.</p>
<p>In this example, we have two commands that will display the messages inside the single quotes.</p>
<code class="code_dif">print('First command')</code>
<pre class="pre">
<code class="code_dif">print('Second command')</code>
<p>Output:</p>
<pre class="pre">
<code class="code_dif">First command</code>
<pre class="pre">
<code class="code_dif">Second command</code>
<p>But the following is <strong>wrong</strong> due to the semicolons in the end:</p>
<code class="code_dif">print('First command');</code>
<code class="code_dif">print('Second command');</code>
<h3>Indentation</h3>
<p>Many languages use curly-brackets to define scope.</p>

<p>Python's interpreter uses only indentation to define when a scope ends and another one starts.</p>

<p>This means you have to be aware of white spaces at the beginning of each line -- they have meaning and might break your code if misplaced.</p>
<p>This definition of a function works:</p>
<code class="code_dif">def my_function():</code>
    <code class="code_dif">print('First command')</code>
    <p>This <strong>doesn't work</strong> because the indentation of the second line is missing and will throw an error:</p>
    <code class="code_dif">def my_function():</code>
<code class="code_dif">print('First command')</code>
<h3>Case sensitivity and variables</h3>
<p>Python is case sensitive. So the variables <code class="code_simp">name</code> and <code class="code_simp">Name</code> are not the same thing and store different values.</p>
<code class="code_dif">name = 'Renan'</code>
<code class="code_dif">Name = 'Moura'</code>
<p>As you can see, variables are easily created by just assigning values to them using the <code class="code_simp">=</code> symbol.</p>
<p>This means <code class="code_simp">name</code> stores 'Renan' and <code class="code_simp">Name</code> stores 'Moura'.</p>
<h3>Comments</h3>
<p>Finally, to comment something in your code, use the hash mark <code class="code_simp">#</code>.</p>
<p>The commented part does not influence the program flow.</p>
<code class="code_dif"># this function prints something</code>
<code class="code_dif">def my_function():</code>
    <code class="code_dif">print('First command')</code>
    <p>This was just an overview. The details of each of these will become clearer in the next chapters with examples and broader explanations.</p>
        </article>
    </section>
    <section class="main-section"
    id="Comments">
    <header>
        Comments
      </header>
      <article>
        <p>The purpose of comments is to explain what is happening in the code.</p>

<p>Comments are written along with your code but do not influence your program flow.</p>

<p>When you work by yourself, maybe comments don't feel like something you should write. After all, at the moment, you know the whys of every single line of code.</p>
<p>But what if new people come on board your project after a year and the project has 3 modules, each with 10,000 lines of code?</p>

<p>Think about people who don't know a thing about your app and who are suddenly having to maintain it, fix it, or add new features.</p>
<p>Remember, there is no single solution for a given problem. Your way of solving things is yours and yours only. If you ask 10 people to solve the same problem, they will come up with 10 different solutions.</p>
<p>If you want others to fully understand your reasoning, good code design is mandatory, but comments are an integral part of any codebase.</p>
        </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/120.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

The code syntax highlighting is showing a problem here - you dropped a "

I’d run your code through an HTML validator to help catch errors.

1 Like

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