Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

All navigation links correspond to text.All text correspond as far as I can tell to chapter titles.There are media queries and flexbox and the navbar is in the left top corner.What is wrong?

Your code so far

<!-- file: index.html -->

/* 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/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

What do you want to do with your code and layout. Did you just need help to passing the test or something more?
You haven’t Added your code to the topic.

You didn’t answered my question.

Use that validation service to validate your html file. It’s looking messy.

1 Like

Update: I ran it through an AI.It’s still not working.

EDIT:Cleaned it up a bit more.Still not working.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Added for responsive design -->
    <link rel="stylesheet" href="styles.css"> <!-- Corrected the link element -->
    <title>The Principles of Python</title> <!-- Added a title for the document -->
</head>
<body>
    <header>
        <h1>THE PRINCIPLES OF PYTHON</h1>
    </header>
    
    <nav id="navbar">
 <header>       <h2>Table of Contents</h2> <!-- Changed to a smaller heading -->
 </header>
 
        <ul>
            <li><a class="nav-link" href="#Introduction">Introduction</a></li>
            <li><a class="nav-link" href="#Getting_Started">Getting Started</a></li>
            <li><a class="nav-link" href="#How_to_Use_Python-Part_1-Basic_Syntax">How to Use Python-Part 1-Basic Syntax</a></li>
            <li><a class="nav-link" href="#How_to_Use_Python-Part_2-Basic_Syntax-Data_Types">How to Use Python-Part 2-Basic Syntax-Data Types</a></li>
            <li><a class="nav-link" href="#How_to_Use_Python-Part_3-Basic_Syntax-Control_Structures">How to Use Python-Part 3-Basic Syntax-Control Structures</a></li>
            <li><a class="nav-link" href="#How_to_Use_Python-Part_4-Basic_Syntax-Functions">How to Use Python-Part 4-Basic Syntax-Functions</a></li>
            <li><a class="nav-link" href="#How_to_Use_Python-Part_5-Object_Oriented_Programming">How to Use Python-Part 5-Object Oriented Programming</a></li>
            <li><a class="nav-link" href="#How_to_Use_Python-Part_6-Libraries_and_Frameworks">How to Use Python-Part 6: Libraries and Frameworks</a></li>
            <li><a class="nav-link" href="#Conclusion">Conclusion</a></li>
        </ul>
    </nav>

    <main id="main-doc">
        <section id="Introduction" class="main-section">
            <header><h2>Introduction</h2></header>
            <p>Python is a top-rank universal-purpose programming language. The benefits of adding this to your arsenal should be self-evident.</p>
            <ul>
                <li>Its syntax emphasizes legibility and easiness of use. Code is executed line by line, making fixing any errors/mistakes easy as pie.</li>
                <li>It is <b>Cross-Platform</b> meaning it can run on many operating systems such as Windows, macOS, and Linux.</li>
                <li>The type of a variable is determined only when the program is activated and can be changed even as it is running - this is known as <b>Dynamic Typing</b>.</li>
                <li>Additionally, method or attribute calls are resolved at runtime rather than at compile time. This is known as <b>Dynamic Binding</b>.</li>
                <li>Python also comes with an <b>Extensive Standard Library</b> for all your programming needs. In fact, Python has a large and active community, which means there are plenty of resources, tutorials, and third-party libraries. This community will support you every step of the way.</li>
                <li>Python is incredibly versatile and flexible - it can be used for a range of applications, including web development, data analysis, machine learning, scientific computing, etc.</li>
            </ul>
            <p>However, this comes with flaws such as errors related to mistakes in coding happening while the program is running, which can be more difficult to fix (this is known as <b>Runtime Errors</b>), as well as slower performance in general. Both of these are due to the fact that type checks are performed only during runtime.</p>
        </section>

        <section id="Getting_Started" class="main-section">
            <header>
                
                <h2>Getting Started</h2>
                </header>
            <p>Python is what is known as an <i>interpretative command line</i>. This means that one must first type the files you want executed into the text editor, then tell the interpreter to execute them. For example, one creates a file entitled <code>helloworld.py</code> and encodes within it <code>print("Hello, World")</code>. Save your file, then go to the command line and navigate to the directory that saved your file and run it. This navigation is accomplished via <code>cd C:\Users\YourName</code>. The running is accomplished via <code>python helloworld.py</code>.</p>
            <p>Hence, <code>C:\Users\YourName>python helloworld.py</code>.</p>
        </section>

        <section id="How_to_Use_Python-Part_1-Basic_Syntax" class="main-section">
            <header>
                <h2>How to Use Python-Part 1-Basic Syntax</h2>
                </header>
            <p>In order to use Python effectively, you must understand <b>Basic Syntax.</b></p>
            <p>Variables here are much like in your high school algebra class, except less boring. Variables here are containers for values you assign. For example, <code>x = 5</code>. Unlike many other such programs, Python does not require an explicit command to create a variable. Simply assign a value to it (for example, type in <code>x = 5</code>). Additionally, Python uses <b>Lexical Scoping</b>, meaning that the scope of a variable is determined by its location within the source code.</p>
            <p><b>Dynamic Typing</b> means that you don't need to declare the type of a variable - it will be AI deduced from the value you type in. To change the type of a variable, simply change the type of value - for example, changing <code>x=5</code> to <code>x="Five"</code> changes <code>x</code> from an integer into a string. <code>x = 5  # x is an integer</code></p>
            <p><code>x = "Five"  # x is now a string</code></p>
            <p><b>Multiple Assignments</b> are now also a possibility. For example: <code>a, b, c = 1, 2, "Three"</code>.</p>
            <p>Here <b>Chained Assignment</b> is the twin brother to this attribute, allowing the same variable to be assigned to multiple variables simultaneously, like so: <code>a = b = c = 10</code>.</p>
        </section>

        <section id="How_to_Use_Python-Part_2-Basic_Syntax-Data_Types" class="main-section">
            <header>
                <h2>How to Use Python-Part 2-Basic Syntax-Data Types</h2>
                </header>
            <p>Python has a variety of <b>Data Types</b> for any circumstances that arise. First comes <b>Text Type</b>: <b>str</b>, string, used to represent text data. Strings are wrapped in single, double, or triple quotes. Next comes the various <b>Numeric Types</b>: <b>int</b>, integer, represents whole numbers like so: <code>age = 30</code>. Next comes <b>float</b>, representing "floating-point" i.e., <b>decimal</b> numbers. Next comes <b>complex</b>, representing complex numbers with a real and imaginary part, like so: <code>complex_num = 3 + 4j</code>.</p>
            <p>After these come the <b>Sequence Types</b>: first <b>list</b>, lists are rather self-explanatory as shown here: <code>fruits = ["apple", "banana", "cherry"]</code>; next <b>tuple</b>, twin to list but cannot be changed upon declaration (i.e., <b>immutable</b>), and finally <b>range</b>, which represents a sequence of numbers: <code>numbers = range(5)  # 0, 1, 2, 3, 4</code>. This is often used to create "loops".</p>
            <p>Next up is the <b>Mapping Type</b> for which there is but one type, <b>dict</b>. A collection of key-value pairs, where each key is unique: <code>person = {"name": "Alice", "age": 30}</code>. Next there is the <b>Set Type</b> of variable. For this category, we have <b>set</b>, an unordered collection of unique items: <code>unique_numbers = {1, 2, 3, 4, 5}</code>. Then we have <b>frozenset</b>, a version of a set that cannot be changed: <code>frozen_set = frozenset([1, 2, 3, 4, 5])</code>. Sixth, we have the <b>Boolean Type</b>, <b>bool</b>, representing either True or False: <code>is_active = True</code>.</p>
            <p>Seventh we have the <b>Binary Types</b>, ironically tripartite. First <b>bytes</b>, immutable sequences of bytes: <code>byte_data = b"Hello"</code>. Secondly, <b>bytearray</b>, mutable sequences of bytes. Thirdly <b>memoryview</b>, which allows the user to access the internal data of an object that supports the buffer protocol without copying: <code>mem_view = memoryview(byte_data)</code>. And last of all the <b>Data Types</b> we have the <b>None Type</b>. Of which there is only one kind - <b>NoneType</b> - which represents the absence of value/null value: <code>result = None</code>.</p>
        </section>

        <section id="How_to_Use_Python-Part_3-Basic_Syntax-Control_Structures" class="main-section">
            <header>
                <h2>How to Use Python-Part 3-Basic Syntax-Control Structures</h2>
                </header>
            <p><b>Control structures</b> in Python are necessary for ordering the flow of a program. They permit the user to execute code <b>conditionally</b>, <b>repeatedly</b>, or <b>iteratively</b>. Firstly, there are <b>Conditional Statements</b>, which fittingly, allow the user to input and activate certain blocks of code based on certain conditions. There is the <b>if statement</b>, which activates a block of code <b>if</b> a certain condition is true: <code>age = 18 if age >= 18: print("You are an adult.")</code>.</p>
            <p>Next, there is the <b>if-else Statement</b>, which activates one block of code if a certain condition is true and another block if it is false: <code>age = 16 if age >= 18: print("You are an adult.") else: print("You are a minor.")</code>.</p>
            <p>Finally, there is the <b>if-elif-else Statement</b>, which checks multiple conditions. After <b>Conditional Statements</b>, we have <b>Loops</b>, which allow the user to activate a block of code multiple times. Firstly, there is the <b>for loop</b>, which iterates over a sequence (like a <b>list</b>, <b>tuple</b>, <b>dictionary</b>, <b>set</b>, or <b>string</b>): <code>fruits = ["apple", "banana", "cherry"] for fruit in fruits: print(fruit)</code>.</p>
            <p>Then there is the <b>while loop</b>, which repeats only so long as a certain condition is true: <code>count = 5 while count > 0: print(count) count -= 1</code>.</p>
            <p>After <b>Loops</b> come <b>Loop Control Statements</b>, which alter the flow of a loop. There is <b>break</b>, which aborts the loop: <code>for i in range(10): if i == 5: break print(i)</code>; then there is <b>continue</b>, which aborts the current iteration and continues with the next one: <code>for i in range(10): if i % 2 == 0: continue print(i)</code>.</p>
            <p>Next there is <b>pass</b>, which is a placeholder that does nothing and is used as a placeholder. Lastly is the <b>Nested Control Structure</b>, which consists of the types of control structures previously described, nested within each other to create <i>complex logic</i>: <code>for i in range(1, 11): if i % 2 == 0: print(f"{i} is even") else: print(f"{i} is odd")</code>.</p>
        </section>

        <section id="How_to_Use_Python-Part_4-Functions" class="main-section">
            <header>
                <h2>How to Use Python-Part 4-Functions</h2>
                </header>
            <p>After <b>Basic Syntax</b> comes <b>Functions</b>. Functions are blocks of organized, recyclable code that each perform a single, related action. Functions in Python are <b>First-Class Objects</b>, meaning they can be passed around and used as arguments just like any other object. Functions provide better modularity for your application and a high degree of code reusability.</p>
            <p>Functions are defined using the <b>def</b> keyword followed by the function name and parentheses, which may include parameters. The function body is indented and contains the code to be activated. An example of this syntax can be found here: <code>def greet(name): """This function greets the person passed in as a parameter.""" print(f"Hello, {name}!")</code>.</p>
            <p>To call a function, use the function name followed by parentheses. If the function requires parameters, pass them inside the parentheses. An example with parameters can be seen here: <code>greet("Alice")</code>.</p>
            <p><b>Parameters</b> are variables listed inside the parentheses in the function definition. <b>Arguments</b> are values passed to the function when it is called. An example with parameters can be seen here: <code>def add(a, b): return a + b result = add(3, 5) print(result)  # Outputs: 8</code>.</p>
            <p>There are several facets of Python we must cover to understand the true significance/usefulness of Functions. First, there are <b>Default Parameters</b>. Default values can be defined for parameters, but if an argument is not provided, the default is used: <code>def greet(name="Guest"): print(f"Hello, {name}!) greet()         # Outputs: Hello, Guest! greet("Alice")  # Outputs: Hello, Alice!</code>.</p>
            <p>Next is the <b>Return Statement</b>, which is used to exit a function and return a value: <code>def square(x): return x * x result = square(4) print(result)  # Outputs: 16</code>.</p>
            <p>Then there is <b>Variable Scope</b>, which means that variables defined inside a function are local to that function and cannot be accessed outside of it. Finally, there is <b>Lambda Functions</b>, which are small anonymous functions defined using the <b>lambda</b> keyword. They can have any number of arguments but only one expression.</p>
        </section>

        <section id="How_to_Use_Python-Part_5-Object_Oriented_Programming" class="main-section">
            <header>
                <h2>How to Use Python-Part 5-Object Oriented Programming</h2>
                </header>
            <p><b>Object-Oriented Programming</b> is a programming paradigm that uses objects and classes to structure software in a way that is modular and reusable. It is incredibly crucial to understanding the workings of Python.</p>
            <p>First, we must consider the key twin concepts of <b>Classes and Objects</b>. <b>Classes</b> are blueprints for creating objects. They each define a set of attributes and methods that the objects created from a given class can use. <b>Objects</b> are instances of classes. They are created using their class and can have their own unique data. They can be seen in action here: <code>class Dog: def __init__(self, name, age): self.name = name self.age = age def bark(self): print(f"{self.name} says woof!") my_dog = Dog("Buddy", 3) my_dog.bark()  # Outputs: Buddy says woof!</code>.</p>
            <p>Secondly, we must consider <b>Encapsulation</b>. Encapsulation is the combination of data/attributes and methods/functions that operate on the data into a single unit/class. It restrains direct access to some of the object's components, which can prevent the accidental modification of data. An example of it can be seen here: <code>class Computer: def __init__(self): self.__maxprice = 900 def sell(self): print(f"Selling Price: {self.__maxprice}") def setMaxPrice(self, price): self.__maxprice = price c = Computer() c.sell()  # Outputs: Selling Price: 900 c.setMaxPrice(1000) c.sell()  # Outputs: Selling Price: 1000</code>.</p>
            <p>Thirdly, there is <b>Inheritance</b>, which allows a class to inherit attributes and methods from another class. This helps in recycling code and establishing a relationship between classes. An example can be seen here: <code>class Beast: def eat(self): print("I can eat!") class Dog(Beast): def bark(self): print("I can bark! Woof woof!!") dog1 = Dog() dog1.eat()  # Outputs: I can eat! dog1.bark()  # Outputs: I can bark! Woof woof!!</code>.</p>
            <p>Fourth is <b>Polymorphism</b>, which allows methods to do different things based on the object it is acting upon, even if they share the same name. This can be achieved through method overriding and method overloading. An example can be seen here: <code>class Cat(Animal): def speak(self): return f"{self.name} says meow!" animals = [Dog("Buddy"), Cat("Whiskers")] for animal in animals: print(animal.speak())</code>.</p>
            <p>Lastly, there is <b>Abstraction</b>, which refers to hiding the complex implementation details and showing only the necessary features of an object. This can be achieved using abstract classes and methods. An example can be seen here: <code>from abc import ABC, abstractmethod class Shape(ABC): @abstractmethod def area(self): pass class Rectangle(Shape): def __init__(self, width, height): self.width = width self.height = height def area(self): return self.width * self.height rect = Rectangle(10, 20) print(rect.area())  # Output: 200</code>.</p>
        </section>

        <section id="How_to_Use_Python-Part_6-Libraries_and_Frameworks" class="main-section">
            <header>
                <h2>How to Use Python-Part 6: Libraries and Frameworks</h2>
                </header>
            <p>The wide array of modules and packages available in the extensive standard library/frameworks allow developers to perform many tasks without needing to write out the necessary code. The <b>Python Standard Library</b> is the name for the first of these great resources.</p>
            <h3>File and Directory Access</h3>
            <p>Firstly, <code>os</code> provides a way of using operating system-dependent functionality like reading or writing to file systems. Next, <code>shutil</code> offers high-level operations on files and collections of files, such as copying and removal. Thirdly, <code>pathlib</code> provides an object-oriented interface for working with file system paths.</p>
            <h3>Data Serialization</h3>
            <p>Firstly, we must consider <code>json</code>, which serves to parse JSON (JavaScript Object Notation). Secondly among the keywords is <code>pickle</code>, which is for serializing and deserializing Python object structures.</p>
            <h3>Internet Protocol and Support</h3>
            <p>First, there is <code>http.client</code>, which is for HTTP protocol client-side operations. Next, <code>ftplib</code>, which is for FTP protocol operations. Finally, <code>smtplib</code> is for sending emails using the Simple Mail Transfer Protocol (SMTP).</p>
            <h3>String Processing</h3>
            <p><code>re</code> is for regular expression operations and <code>string</code> is for common string operations. Furthermore, <code>textwrap</code> is for formatting text paragraphs.</p>
            <h3>Date and Time</h3>
            <p><code>datetime</code> is for manipulating dates and times, and <code>time</code> is for time-related functions.</p>
            <h3>Mathematics</h3>
            <p><code>math</code> is for mathematical functions of all sorts, such as trigonometry and logarithms, and <code>statistics</code> is for statistical functions like mean, median, variance, etc.</p>
            <h3>Concurrency</h3>
            <p><code>threading</code> is for creating and managing threads. <code>multiprocessing</code> is for creating processes and managing inter-process communication.</p>
            <h3>Unit Testing</h3>
            <p><code>unittest</code> serves to create and run tests.</p>
            <p>After the library, we must consider the <b>Frameworks</b>, which also help simplify and streamline the development of certain types of applications.</p>
            <h3>Web Development</h3>
            <p>For web development, we have <b>Django</b>, a high-level web framework that encourages rapid development and clean, pragmatic design. For those at a lower level, we have <b>Flask</b>, a lightweight WSGI framework that is easy to get started with and flexible.</p>
            <h3>Data Science and Machine Learning</h3>
            <p>For data science and machine learning, we have <b>Pandas</b> for data manipulation and analysis, <b>NumPy</b> for numerical computing, <b>SciPy</b> for scientific and technical computing, <b>Scikit-learn</b> for machine learning, and <b>TensorFlow</b>/<b>PyTorch</b> for deep learning.</p>
            <h3>GUI Development</h3>
            <p>For GUI development, we have <b>Tkinter</b> as the standard interface with the Tk GUI toolkit and <b>PyQt</b> as a set of Python bindings for Qt libraries used for creating cross-platform projects.</p>
            <h3>Game Development</h3>
            <p>For game development, we have <b>Pygame</b>, modules designed for the writing of video games.</p>
            <h3>Network Programming</h3>
            <p>For network programming, we have <b>Twisted</b>, an event-driven networking engine.</p>
            <h3>Automation</h3>
            <p>For automation, we have <b>Selenium</b> for automating web browser interactions and <b>BeautifulSoup</b> for web scraping.</p>
        </section>

        <section id="Conclusion" class="main-section">
            <header>
                <h2>Conclusion</h2>
                </header>
            <p>Python is an all-purpose programming language for all your needs and desires. Now you know it, and you can use it. And knowing is half the battle.</p>
        </section>
    </main>
</body>
</html>

Hi @zm17jaga

One of the links do not work.

Happy coding

One of which links?All of the Table of Contents ones seem to work fine.

Since this is a certification project I cannot give a direct answer.

Check every link to make sure it goes to its section.