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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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>
<div class= "main-primary">
<nav id="navbar">
  <header>Python Documentation</header>
  <a href="#Introduction" class="nav-link">Introduction</a>
  <a href="#Python" class="nav-link">Python</a>
  <a href="#Values" class="nav-link">Values</a>
  <a href="#Collection_Types" class="nav-link">Collection Types</a>
  <a href="#Functional_Programming" class="nav-link">Functional Programming</a>
  
  
</nav>

<main id= "main-doc">
  <section class="main-section" id= "Introduction">
    <header>Introduction</header>
    <p>Python is an interpreted, high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991, Python's design philosophy emphasizes code readability with its notable use of significant whitespace. Its language constructs and object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.</p>
<p>Python is dynamically typed and garbage-collected. It supports multiple programming paradigms, including structured (particularly, procedural), object-oriented, and functional programming. Python is often described as a "batteries included" language due to its comprehensive standard library.</p>
  </section>
  
  <section class="main-section" id= "Python">
    <header>Python</header>
  <p>Python was conceived in the late 1980s as a successor to the ABC language. Python 2.0, released in 2000, introduced features like list comprehensions and a garbage collection system capable of collecting reference cycles. Python 3.0, released in 2008, was a major revision of the language that is not completely backward-compatible, and much Python 2 code does not run unmodified on Python 3.</p>
  <p>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."[30] No more security patches or other improvements will be released for it.[31][32] With Python 2's end-of-life, only Python 3.5.x[33] and later are supported.</p>
    <code>print('Hello, world!')</code>
    </section>
  <section class="main-section" id= "Values">
    <header>Values</header>
    <p>Since Python is a dynamically typed language, Python values, not variables, carry type. This has implications for many aspects of the way the language functions.

All variables in Python hold references to objects, and these references are passed to functions; a function cannot change the value of variable references in its calling function (but see below for exceptions). Some people (including Guido van Rossum himself) have called this parameter-passing scheme "Call by object reference." An object reference means a name, and the passed reference is an "alias", i.e. a copy of the reference to the same object, just as in C/C++. The object's value may be changed in the called function with the "alias"</p>
    <p>Among dynamically typed languages, Python is moderately type-checked. Implicit conversion is defined for numeric types (as well as booleans), so one may validly multiply a complex number by an integer (for instance) without explicit casting. However, there is no implicit conversion between, for example, numbers and strings; a string is an invalid argument to a mathematical function expecting a number.</p>

    <code>n = int(input('Type a number, and its factorial will be printed: '))</code>
  </section>
  
  <section class="main-section" id= "Collection_Types">
    <header>Collection Types</header>
    <p>One of the very useful aspects of Python is the concept of collection (or container) types. In general a collection is an object that contains other objects in a way that is easily referenced or indexed. Collections come in two basic forms: sequences and mappings.

The ordered sequential types are lists (dynamic arrays), tuples, and strings. All sequences are indexed positionally (0 through length − 1) and all but strings can contain any type of object, including multiple types in the same sequence. Both strings and tuples are immutable, making them perfect candidates for dictionary keys (see below). Lists, on the other hand, are mutable; elements can be inserted, deleted, modified, appended, or sorted in-place.</p>
    <p>Mappings, on the other hand, are unordered types implemented in the form of dictionaries which "map" a set of immutable keys to corresponding elements (much like a mathematical function). For example, one could define a dictionary having a string "toast" mapped to the integer 42 or vice versa. The keys in a dictionary must be of an immutable Python type, such as an integer or a string, because under the hood they are implemented via a hash function. This makes for much faster lookup times, but requires keys not change (and also results in a dictionary's lack of order).</p>
    <code>if n < 0:
    raise ValueError('You must enter a positive integer')</code>
    <code>fact = 1
i = 2
while i <= n:</code>
  </section>
  
  <section class="main-section" id= "Functional_Programming">
    <header>Functional Programming</header>
    <p>In Python, everything is an object, even classes. Classes, as objects, have a class, which is known as their metaclass. Python also supports multiple inheritance and mixins.
The language supports extensive introspection of types and classes. Types can be read and compared—types are instances of type. The attributes of an object can be extracted as a dictionary.</p>
    <p>Operators can be overloaded in Python by defining special member functions - for instance, defining __add__ on a class permits one to use the + operator on members of that class. The following are functional programming types:</p>
    <code>   fact *= i
    i += 1

print(fact)</code>
    <ul>
      <li>Comprehensions</li>
      <li>First-Class Functions</li>
      <li>Closures</li>
      <li>Generators</li>
      <li>Generator Expressions</li>
    </ul>
  </section>
  
</main>
</div>
              
            
!

CSS

              
                div.main-primary {
  display: grid;
  grid-template-columns: minmax(210px, auto) 1fr;
  grid-template-areas: "navbar mainContent";
  grid-gap: 20px;
    
}

code {
  background-color: lightgray;
  padding: 23px;
  display: block;
}
nav#navbar {
  grid-area: navbar;
  position: fixed;
}

nav#navbar a {
  display: block;
  border: 1px solid green;
  margin: 11px 0;
  padding: 6px;
  color: #000000;
  text-decoration: none;
}

main#main-doc{
  grid-area: mainContent;
}

header {
  font-weight: bold;
  font-size: 1.2em;
}


@media screen and (max-width: 725px) { 
 div.main-body 
  {   
grid-template-columns: 1fr;
grid-template-areas: "navbar" "primaryContent";
}
  nav#navbar{
    position: inherit;
  }
  }



              
            
!

JS

              
                
              
            
!
999px

Console