Could you fix the bugs in the code?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Python-Dokumentation</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="main-doc">
<section id="header">
<header>
<h1>Python-Dokumentation</h1>
<nav>
<ul>
<li><a href="#the-python-tutorial" accesskey="P">The Python Tutorial</a></li>
<li><a href="#whetting-your-appetite" accesskey="W">Whetting Your Appetite</a></li>
<li><a href="#using-the-python-interpreter" accesskey="U">Using the Python Interpreter</a></li>
<li><a href="#argument-passing" accesskey="A">Argument Passing</a></li>
<li><a href="#interactive-mode" accesskey="I">Interactive Mode</a></li>
</ul>
</nav>
</header>
</section>
<section id="the-python-tutorial" role="region" aria-labelledby="the-python-tutorial">
<h2>The Python Tutorial</h2>
<p>Python is an easy to learn, powerful programming language. It has efficient high-level data structures and a simple but effective approach to object-oriented programming. Python’s elegant syntax and dynamic typing, together with its interpreted nature, make it an ideal language for scripting and rapid application development in many areas on most platforms.</p>
<p>The Python interpreter and the extensive standard library are freely available in source or binary form for all major platforms from the Python web site,<a href="https://www.python.org/">https://www.python.org/</a>, and may be freely distributed. The same site also contains distributions of and pointers to many free third party Python modules, programs and tools, and additional documentation.</p>
<p>The Python interpreter is easily extended with new functions and data types implemented in C or C++ (or other languages callable from C). Python is also suitable as an extension language for customizable applications.</p>
</section>
<section id="whetting-your-appetite" role="region" aria-labelledby="whetting-your-appetite">
<h2>1. Whetting Your Appetite</h2>
<p>If you do much work on computers, eventually you find that there’s some task you’d like to automate. For example, you may wish to perform a search-and-replace over a large number of text files, or rename and rearrange a bunch of photo files in a complicated way. Perhaps you’d like to write a small custom database, or a specialized GUI application, or a simple game.</p>
<p>If you’re a professional software developer, you may have to work with several C/C++/Java libraries but find the usual write/compile/test/re-compile cycle is too slow. Perhaps you’re writing a test suite for such a library and find writing the testing code a tedious task. Or maybe you’ve written a program that could use an extension language, and you don’t want to design and implement a whole new language for your application.</p>
<p>Python is just the language for you.</p>
<p>You could write a Unix shell script or Windows batch files for some of these tasks, but shell scripts are best at moving around files and changing text data, not well-suited for GUI applications or games. You could write a C/C++/Java program, but it can take a lot of development time to get even a first-draft program. Python is simpler to use, available on Windows, macOS, and Unix operating systems, and will help you get the job done more quickly.</p>
<p>Python is simple to use, but it is a real programming language, offering much more structure and support for large programs than shell scripts or batch files can offer. On the other hand, Python also offers much more error checking than C, and, being a very-high-level language, it has high-level data types built in, such as flexible arrays and dictionaries. Because of its more general data types Python is applicable to a much larger problem domain than Awk or even Perl, yet many things are at least as easy in Python as in those languages.</p>
</section>
<section id="argument-passing role="region" aria-labelledby="using-the-python-interpreter">
<h2 id="using-the-python-interpreter">Using the Python Interpreter</h2>
<h3>2.1. Invoking the Interpreter</h3>
<p>The Python interpreter is usually installed as /usr/local/bin/python3.11 on those machines where it is available; putting /usr/local/bin in your Unix shell’s search path makes it possible to start it by typing the command:</p>
<code>python3.11</code>
<p>to the shell. 1 Since the choice of the directory where the interpreter lives is an installation option, other places are possible; check with your local Python guru or system administrator. (E.g., /usr/local/python is a popular alternative location.)</p>
<p>On Windows machines where you have installed Python from the Microsoft Store, the <code>python3.11</code> command will be available. If you have the py.exe launcher installed, you can use the <code>py</code> command.</p>
<p>Typing an end-of-file character (Control-D on Unix, Control-Z on Windows) at the primary prompt causes the interpreter to exit with a zero exit status. If that doesn’t work, you can exit the interpreter by typing the following command: <code>quit()</code>.</p>
<p>A second way of starting the interpreter is <code>python -c command [arg]</code> ..., which executes the statement(s) in command, analogous to the shell’s -c option. Since Python statements often contain spaces or other characters that are special to the shell, it is usually advised to quote command in its entirety.</p>
<p>Some Python modules are also useful as scripts. These can be invoked using <code>python -m module [arg]</code> ..., which executes the source file for module as if you had spelled out its full name on the command line.</p>
</section>
<section id="argument-passing" role="region" aria-labelledby="argument-passing">
<h2>2.1.1. Argument Passing</h2>
<p>When known to the interpreter, the script name and additional arguments thereafter are turned into a list of strings and assigned to the <code>argv</code> variable in the <code>sys</code> module. You can access this list by executing <code>import sys</code>. The length of the list is at least one; when no script and no arguments are given, <code>sys.argv[0]</code> is an empty string. When the script name is given as <code>'-'</code> (meaning standard input), <code>sys.argv[0]</code> is set to <code>'-'</code>. When -c command is used, <code>sys.argv[0]</code> is set to <code>'-c'</code>. When -m module is used, <code>sys.argv[0]</code> is set to the full name of the located module. Options found after -c command or -m module are not consumed by the Python interpreter’s option processing but left in <code>sys.argv</code> for the command or module to handle.</p>
</section>
<section id="interactive-mode" role="region" aria-labelledby="interactive-mode">
<h2>2.1.2. Interactive Mode</h2>
<p>When commands are read from a tty, the interpreter is said to be in interactive mode. In this mode it prompts for the next command with the primary prompt, usually three greater-than signs (>>>); for continuation lines it prompts with the secondary prompt, by default three dots (...). The interpreter prints a welcome message stating its version number and a copyright notice before printing the first prompt:</p>
<code>$ python3.11
Python 3.11 (default, April 4 2021, 09:25:04)
[GCC 10.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>></code>
<p>Continuation lines are needed when entering a multi-line construct. As an example, take a look at this if statement:</p>
<code>>>> the_world_is_flat = True
>>> if the_world_is_flat:
... print("Be careful not to fall off!")
...
#Be careful not to fall off!</code>
</section>
</main>
<footer>
<address>
<p>All the documentation in this page is taken from: </p><a class="nav-link" href="https://docs.python.org/3/tutorial/index.html">docs.python.org</a><br />
site was made for www.freecodecamp.org<br />
</address>
</footer>
</body>
</html>
CSS
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
#header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label, .info input {
display: inline-block;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
text-align: right;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer,
footer a {
color: #dfdfe2;
}
address {
text-align: center;
padding: 0.3em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
code {
[details="Summary"]
This text will be hidden
[/details]
background-color: yellow;
}