Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
  <div class="nav-header"><img src="https://banner2.cleanpng.com/20181128/cbr/kisspng-python-programming-basics-for-absolute-beginners-michigan-python-user-group-5-jul-2-18-5bfef921c53528.7857216715434365778078.jpg" alt="logo" />
    <header>Python Documentation</header>
  </div>

  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li>
      <a class="nav-link" href="#Prerequisites">Prerequisites</a>
    </li>
    <li>
      <a class="nav-link" href="#Python_2_and_3">Python 2 and 3</a>
    </li>
    <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
    <li><a class="nav-link" href="#Variables">Variables</a></li>
    <li>
      <a class="nav-link" href="#Data_Types">Data Types</a></li>
    <li><a class="nav-link" href="#If_else_statement">If else statement</a></li>
    <li><a class="nav-link" href="#While_loops">While loops</a></li>
    <li><a class="nav-link" href="#For_loops">For loops</a></li>
    <li><a class="nav-link" href="#Functions">Functions</a></li>
    <li>
      <a class="nav-link" href="#Lambda">Lambda</a>
    </li>
    <li>
      <a class="nav-link" href="#Class_and_Objects">Class and Objects</a>
    </li>
    <li><a class="nav-link" href="#Python_scope">Python scope</a></li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
  </ul>
</nav>

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

      <p>
        Since 2003, Python has consistently ranked in the top ten most popular programming languages in the TIOBE Programming Community Index where, as of February 2020, it is the third most popular language (behind Java, and C). It was selected Programming Language of the Year in 2007, 2010, and 2018.
      </p>

      <p>Besides that, python is widely used in web development (server-side), software development, mathematics, system scripting, and more.</p>

      <p>Why Python?</p>
      <ul>
        <li>Python works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc).</li>
        <li>Python has a simple syntax similar to the English language.</li>
        <li>Python has syntax that allows developers to write programs with fewer lines than some other programming languages.</li>
        <li>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.</li>
        <li>Python can be treated in a procedural way, an object-orientated way or a functional way.</li>
      </ul>
    </article>
  </section>

  <section class="main-section" id="Prerequisites">
    <header>Prerequisites</header>
    <article>
      <p>Python is a simplest programming language available for developers or beginners, before jumping into the learning curve, having some basic knowledge in math and problem-solving skills are helpful. Having some good knowledge in other programming languages is a plus. </p>
    </article>
  </section>

  <section class="main-section" id="Python_2_and_3">
    <header>Python 2 and 3</header>
    <article>
      <p>Python 3.0 was released on 3 December 2008. It was a major revision of the language that is not completely backward-compatible. Many of its major features were backported to Python 2.6.x and 2.7.x version series. Releases of Python 3 include the 2 to 3 utility, which automates (at least partially) the translation of Python 2 code to Python 3</P>

      <p>Python 2 code does not run unmodified on Python 3. The Python 2 language was officially discontinued in 2020 (first planned for 2015), and Python 2.7.18 is the last Python 2.7 release and therefore the last Python 2 release. No more security patches or other improvements will be released for it. With Python 2's end-of-life, only Python 3.5.x and later are supported.</p>
    </article>
  </section>

  <section class="main-section" id="Hello_world">
    <header>Hello world</header>

    <article>
      <p>let's get started by writing the first line of code "Hello World" in the console, console is the part where the output of the codes are shown.</p>

      <p>Start by writing the code below in the text editor and there you have it, makesure you place the hello world inside the quotation mark!</p>
      <code>print("Hello World")</code>
    </article>
  </section>

  <section class="main-section" id="Variables">
    <header>Variables</header>
    <article>
      <p>Variables are containers for storing data values.

        Unlike other programming languages, Python has no command for declaring a variable.

        A variable is created the moment you first assign a value to it.</p>

      <code>
        its_me = "Solomon"
        last_name = "aime"
        print(x)
        print(y)
      </code>

      <p>Variables can be updated with new values with the "=" sign!</p>

      <code>
        its_me = "Solomon"
        its_me ="James"
        print(its_me)
        Output: James
      </code>

      <p>
        A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume).</p>

      <p>Rules for Python variables:</p>
      <ul>
        <li>A variable name must start with a letter or the underscore character</li>
        <li>A variable name cannot start with a number</li>
        <li>A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )</li>
        <li>Variable names are case-sensitive (age, Age and AGE are three different variables)</li>
      </ul>
    </article>
  </section>

  <section class="main-section" id="Data_Types">
    <header>Data Types</header>
    <article>
      <p>Variables can store data of different types, and different types can do different things.

        Python has the following data types built-in by default such as strings, numbers, boolean values, binary values, and much more.</p>

      <table>
        <tr>
          <th>Data types</th>
          <th>Example</th>
        </tr>
        <tr>
          <td>String</td>
          <td>x = "Hello World"</td>
        </tr>
        <tr>
          <td>Integer</td>
          <td>x = 20</td>
        </tr>
        <tr>
          <td>Float</td>
          <td>x = 20.5</td>
        </tr>
        <tr>
          <td>Complex</td>
          <td>x = 1j</td>
        </tr>
        <tr>
          <td>List</td>
          <td>x = ["apple", "banana", "cherry"]</td>
        </tr>
        <tr>
          <td>Tuple</td>
          <td>x = ("apple", "banana", "cherry")</td>
        </tr>
        <tr>
          <td>Range</td>
          <td>x = range(6)</td>
        </tr>
        <tr>
          <td>Dict</td>
          <td>x = {"name" : "John", "age" : 36}</td>
        </tr>
        <tr>
          <td>Set</td>
          <td>x = {"apple", "banana", "cherry"}</td>
        </tr>
        <tr>
          <td>Frozenset</td>
          <td>x = frozenset({"apple", "banana", "cherry"})</td>
        </tr>
        <tr>
          <td>Boolean type</td>
          <td>x = true</td>
        </tr>
        <tr>
          <td>Bytes</td>
          <td>x = b"Hello"</td>
        </tr>
        <tr>
          <td>Bytearray</td>
          <td>x = bytearray(5)</td>
        </tr>
        <tr>
          <td>Memoryview</td>
          <td>x = memoryview(bytes(5))</td>
        </tr>
      </table>

      <p></p>
    </article>
  </section>

  <section class="main-section" id="If_else_statement">
    <header>If else statement</header>
    <article>
      <p>
        Python supports the usual logical conditions from mathematics such as, a == b, a != b, a < b, a <=b, a> b and a >= b.
          These conditions can be used in several ways, most commonly in "if statements" and loops.

          An "if statement" is written by using the if keyword.</p>

      <code>
        a = 200
        b = 33
        if b > a:
        print("b is greater than a")
        elif a == b:
        print("a and b are equal")
        else:
        print("a is greater than b")
      </code>

      <p>Python relies on indentation (whitespace at the beginning of a line) to define scope in the code. Other programming languages often use curly-brackets for this purpose.</p>
    </article>
  </section>

  <section class="main-section" id="While_loops">
    <header>While loops</header>
    <article>
      <p>With the while loop we can execute a set of statements as long as a condition is true.</p>

      <code>
        i = 1
        while i < 6: print(i) i +=1 </code>

          <p>Besides that, the break statement can stop the loop even if the while condition is true.</p>

          <code>
            while i < 6: print(i) if i==3: break i +=1 </code>

              <p>Moreover, the continue statement can stop the current iteration, and continue with the next</p>

              <code>
                i = 0

                while i < 6: i +=1 if i==3: continue print(i) </code>

    </article>
  </section>

  <section class="main-section" id="For_loops">
    <header>For loops</header>
    <article>
      <p>A for loop is used for iterating over a sequence (that is either a list, a tuple, a dictionary, a set, or a string). With the for loop we can execute a set of statements, once for each item in a list, tuple, set etc.</p>

      <code>
        fruits = ["apple", "banana", "cherry"]
        for x in fruits:
        print(x)
      </code>

      <p>Besides that, the break statement can stop the loop before it has looped through all the items</p>

      <code>
        fruits = ["apple", "banana", "cherry"]

        for x in fruits:
        print(x)

        if x == "banana":
        break
      </code>

      <p>Moreover, the continue statement can stop the current iteration of the loop, and continue with the next</p>

      <code>
        fruits = ["apple", "banana", "cherry"]

        for x in fruits:

        if x == "banana":
        continue
        print(x)
      </code>

      <p>To loop through a set of code a specified number of times, we can use the range() function,
        The range() function returns a sequence of numbers, starting from 0 by default, and increments by 1 (by default), and ends at a specified number.</p>

      <code>
        for x in range(6):
        print(x)
      </code>

      <p>The range() function defaults to 0 as a starting value, however it is possible to specify the starting value by adding a parameter: range(2, 6), which means values from 2 to 6 (but not including 6). Moreover, The range() function defaults to increment the sequence by 1, however it is possible to specify the increment value by adding a third parameter: range(2, 30, 3)</p>

      <code>
        for x in range(2, 30, 3):
        print(x)
      </code>
    </article>
  </section>

  <section class="main-section" id="Functions">
    <header>Functions</header>
    <article>
      <p>A function is a block of code which only runs when it is called.

        You can pass data, known as parameters, into a function.

        A function can return data as a result.</p>

      <code>
        def my_function():
        print("Hello from a function")

        my_function()
      </code>

      <p>A function can be created with a "def" keyword. On top that, Information can be passed into functions as arguments.

        Arguments are specified after the function name, inside the parentheses. You can add as many arguments as you want, just separate them with a comma.
      </p>

      <code>
        def my_function(fname):
        print(fname + " Refsnes")

        my_function("Emil")
        my_function("Tobias")
        my_function("Linus")
      </code>
    </article>
  </section>

  <section class="main-section" id="Lambda">
    <header>Lambda</header>
    <article>
      <p>A lambda function is a small anonymous function.

        A lambda function can take any number of arguments, but can only have one expression.
      </p>
      <p>this is the syntax for lambda function</p>
      <code>lambda arguments : expression</code>

      <p>the reason why lambda function exist is better shown when you use them as an anonymous function inside another function.

        Say you have a function definition that takes one argument, and that argument will be multiplied with an unknown number</p>

      <code>
        def myfunc(n):
        return lambda a : a * n

        mydoubler = myfunc(2)

        print(mydoubler(11))
      </code>
    </article>
  </section>

  <section class="main-section" id="Class_and_Objects">
    <header>Class and Objects</header>
    <article>
      <p>Python is an object oriented programming language.

        Almost everything in Python is an object, with its properties and methods.

        A Class is like an object constructor, or a "blueprint" for creating objects.</p>
      <p>Creating a class, using the keyword "class"</p>

      <code>
        class MyClass:
        x = 5
      </code>

      <p>Creating an object named MyClass</p>
      <code>p1 = MyClass()
        print(p1.x)</code>

      <p>The examples above are classes and objects in their simplest form, and are not really useful in real life applications.

        To understand the meaning of classes we have to understand the built-in __init__() function.

        All classes have a function called __init__(), which is always executed when the class is being initiated.

        Use the __init__() function to assign values to object properties, or other operations that are necessary to do when the object is being created.</p>
      <code>
        class Person:

        def __init__(self, name, age):
        self.name = name
        self.age = age

        p1 = Person("John", 36)

        print(p1.name)
        print(p1.age)
      </code>
    </article>
  </section>

  <section class="main-section" id="Python_scope">
    <header>Python scope</header>
    <article>
      <p>A variable is only available from inside the region it is created. This is called scope.</p>

      <p>A variable created in the main body of the Python code is a global variable and belongs to the global scope.

        Global variables are available from within any scope, global and local.</p>

      <p>If you operate with the same variable name inside and outside of a function, Python will treat them as two separate variables, one available in the global scope (outside the function) and one available in the local scope (inside the function)</p>

      <p>We can create global variable that can be accessed either locally or globally via "global" keyword, as it makes the variable global.</p>

      <code>
        def myfunc():
        global x
        x = 300

        myfunc()
        print(x)</code>
    </article>
  </section>

  <section class="main-section" id="Reference">
    <header>Reference</header>
    <article>
      <ul>
        <li>
          All the documentation in this page is taken from
          <a href="https://www.w3schools.com/python/default.asp" target="_blank">W3schools</a>
        </li>
      </ul>
    </article>
  </section>
</main>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
}

nav {
  border-right: 2px solid black;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 290px;
  height: 100%;
}

@media (max-width: 700px) {
  nav {
    background: white;
    border-right: none;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 175px;
    z-index: 1;
    box-shadow: 0px 0px 10px 0px black;
  }
}

nav ul {
  line-height: 40px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

@media (max-width: 700px) {
  nav ul {
    position: fixed;
    top: 35px;
    line-height: 20px;
    height: 100px;
    width: 100%;
    text-align: center;
  }
}

nav li {
  list-style: none;
}

nav a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: grey;
}

div > img {
  width: 50px;
  height: auto;
}

.nav-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-left: 30px;
  padding-top: 25px;
}

@media (max-width: 700px) {
  .nav-header {
    display: grid;
    grid-template-columns: 10% 90%;
    justify-items: center;
    padding: 0px;
  }

  header {
    margin-top: 10px;
  }
}

main {
  margin: 0px;
  padding: 0 20px 0 20px;
  position: relative;
  top: 20px;
  left: 300px;
  width: 75vw;
}

@media (max-width: 700px) {
  main {
    margin: 0px;
    padding: 10px;
    top: 200px;
    left: 0px;
    right: 0px;
    width: 100%;
  }
}

header {
  font-size: 25px;
  font-weight: bold;
}

p {
  text-align: justify;
}

section {
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 2px solid black;
}

@media (max-width: 800px) {
  section {
    padding: 0px;
  }
}

table {
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 1px solid black;
}

th {
  padding: 10px;
  border-bottom: 1px solid black;
}

tr,
td {
  padding: 10px;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f6f6f6;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

              
            
!

JS

              
                
              
            
!
999px

Console