Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <nav id="navbar">
  <header>Python Documentation</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li>
      <a class="nav-link" href="#Design_philosophy">Design philosophy</a>
    </li>
    <li>
      <a class="nav-link" href="#Indentation">Indentation</a>
    </li>
    <li>
      <a class="nav-link" href="#Statements_and_controlflow">Statements and controlflow</a>
    </li>
    <li>
      <a class="nav-link" href="#Hello_world">Hello world</a>
    </li>
    <li>
      <a class="nav-link" href="#Methods">Methods</a>
    </li>
    <li>
      <a class="nav-link" href="#Typing">Typing</a>
    </li>
    <li>
      <a class="nav-link" href="#Libraries">Libraries</a>
    </li>
    <li>
      <a class="nav-link" href="#Development">Development</a>
    </li>
    <li>
      <a class="nav-link" href="#Development_environments">Development Environments</a>
    </li>
    <li>
      <a class="nav-link" href="#Popularity">Popularity</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 high level general-purpose programming language. It uses a multi-paradigm approach, meaning it supports procedural, object-oriented, and some functional programming constructs.
      </p>
      
      <p>
        It was created by Guido van Rossum as a successor to another language (called ABC) between 1985 and 1990, and is currently used on a large array of domains like web development, desktop applications, data science, DevOps, and automation/productivity.
      </p>
      
      <p>
        Python is developed under an OSI-approved open source license, making it freely usable and distributable, even for commercial use. Python's license is administered by the Python Software Foundation
      </p>
    </article>
  </section>
  <section class="main-section" id="Design_philosophy">
    <header>Design philosophy</header>
    <article>
      <p>
        The language's core philosophy is summarized in the document The Zen of Python (PEP 20), which includes aphorisms such as:
      </p>
      
      <ul>
        <li>Beautiful is better than ugly.</li>
        <li>Explicit is better than implicit.</li>
        <li>Simple is better than complex.</li>
        <li>Complex is better than complicated.</li>
        <li>Readability counts.</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Indentation">
    <header>Indentation</header>
    <article>
      <p>
        Python uses whitespace indentation, rather than curly brackets or keywords, to delimit blocks. An increase in indentation comes after certain statements; a decrease in indentation signifies the end of the current block. Thus, the program's visual structure accurately represents the program's semantic structure. This feature is sometimes termed the off-side rule, which some other languages share, but in most languages indentation does not have any semantic meaning. The recommended indent size is four spaces.
      </p>
    </article>
  </section>
  <section class="main-section" id="Statements_and_controlflow">
    <header>Statements and controlflow</header>
    <article>
      <p>
        Python's statements include (among others):
        <ul>
          <li>The assignment statement, using a single equals sign <code>=</code>.</li>
          <li>The <code>for</code> statement, which iterates over an iterable object, capturing each element to a local variable for use by the attached block.</li>
          <li>The <code>if</code> statement, which conditionally executes a block of code, along with <code>else</code> and <code>elif</code> (a contraction of else-if).</li>
          <li>The <code>while</code> statement, which executes a block of code as long as its condition is true.</li>
          <li>The <code>try</code> statement, which allows exceptions raised in its attached code block to be caught and handled by <code>except</code> clauses; it also ensures that clean-up code in a <code>finally</code> block will always be run regardless of how the block exits.</li>
          <li>The <code>raise</code> statement, used to raise a specified exception or re-raise a caught exception.</li>
          <li>The <code>class</code> statement, which executes a block of code and attaches its local namespace to a class, for use in object-oriented programming.</li>
          <li>The <code>def</code> statement, which defines a function or method.</li>
          <li>The <code>with</code> statement, which encloses a code block within a context manager (for example, acquiring a lock before the block of code is run and releasing the lock afterwards, or opening a file and then closing it), allowing resource-acquisition-is-initialization (RAII)-like behavior and replaces a common try/finally idiom.</li>
          <li>The <code>break</code> statement, exits from a loop.</li>
          <li>The <code>continue</code> statement, skips this iteration and continues with the next item.</li>
          <li>The <code>del</code> statement, removes a variable, which means the reference from the name to the value is deleted and trying to use that variable will cause an error. A deleted variable can be reassigned.</li>
          <li>The <code>pass</code> statement, which serves as a NOP. It is syntactically needed to create an empty code block.</li>
          <li>The <code>assert</code> statement, used during debugging to check for conditions that should apply.</li>
          <li>The <code>yield</code> statement, which returns a value from a generator function and <code>yield</code> is also an operator. This form is used to implement coroutines.</li>
          <li>The <code>return</code> statement, used to return a value from a function.</li>
          <li>The <code>import</code> statement, which is used to import modules whose functions or variables can be used in the current program.</li>
        </ul>
      </p>
    </article>
  </section>
 <section class="main-section" id="Hello_world">
  <header>Hello world</header>
  <article>
    <p>
      To get started with writing Python, open the terminal and write your first "Hello world" Python code:
    </p>
    <code id="hello">
      print('Hello, world!')
    </code> <br>
    or <br>
    <code id="hello">
      name = "Your name" <br>
      Hello_World = "Hello " + "Your name" <br>
      print(Hello_world)
    </code>
  </article>
 </section>
 <section class="main-section" id="Methods">
  <header>Methods</header>
  <article>
    <p>
      Methods on objects are functions attached to the object's class; the syntax <code>instance.method(argument)</code> is, for normal methods and functions, syntactic sugar for <code>Class.method(instance, argument)</code>. Python methods have an explicit <code>self</code> parameter to access instance data, in contrast to the implicit self (or <code>this</code>) in some other object-oriented programming languages (e.g., C++, Java, Objective-C, or Ruby). Apart from this, Python also provides methods, often called dunder methods (due to their names beginning and ending with double-underscores), to allow user-defined classes to modify how they are handled by native operations such as length, comparison, in arithmetic operations, type conversion, and many more.
    </p>
  </article>
 </section>
 <section class="main-section" id="Typing">
  <header>Typing</header>
  <article>
    <p>
    Python uses duck typing and has typed objects but untyped variable names. Type constraints are not checked at compile time; rather, operations on an object may fail, signifying that the given object is not of a suitable type. Despite being dynamically-typed, Python is strongly-typed, forbidding operations that are not well-defined (for example, adding a number to a string) rather than silently attempting to make sense of them.
    </p>
    
    <p>
Python allows programmers to define their own types using classes, which are most often used for object-oriented programming. New instances of classes are constructed by calling the class (for example, <code>SpamClass()</code> or <code>EggsClass()</code>), and the classes are instances of the metaclass <code>type</code> (itself an instance of itself), allowing metaprogramming and reflection.
    </p>
    
    <p>
Before version 3.0, Python had two kinds of classes: old-style and new-style. The syntax of both styles is the same, the difference being whether the class <code>object</code> is inherited from, directly or indirectly (all new-style classes inherit from <code>object</code> and are instances of <code>type</code>). In versions of Python 2 from Python 2.2 onwards, both kinds of classes can be used. Old-style classes were eliminated in Python 3.0.
    </p>
    
    <p>
The long-term plan is to support gradual typing and from Python 3.5, the syntax of the language allows specifying static types but they are not checked in the default implementation, CPython. An experimental optional static type checker named mypy supports compile-time type checking.
    </p>
  </article>
 </section>
 <section class="main-section" id="Libraries">
  <header>Libraries</header>
  <article>
    <p>
      Python's large standard library, commonly cited as one of its greatest strengths, provides tools suited to many tasks. For Internet-facing applications, many standard formats and protocols such as MIME and HTTP are supported. It includes modules for creating graphical user interfaces, connecting to relational databases, generating pseudorandom numbers, arithmetic with arbitrary-precision decimals, manipulating regular expressions, and unit testing.
    </p>
    
    <p>
Some parts of the standard library are covered by specifications (for example, the Web Server Gateway Interface (WSGI) implementation <code>wsgiref</code> follows PEP 333), but most modules are not. They are specified by their code, internal documentation, and test suites. However, because most of the standard library is cross-platform Python code, only a few modules need altering or rewriting for variant implementations.
    </p>
    
    <p>
As of September 2021, the Python Package Index (PyPI), the official repository for third-party Python software, contains over 329,000 packages with a wide range of functionality, including:
    <ul>
      <li>Automation</li>
      <li>Data analytics</li>
      <li>Databases</li>
      <li>Documentation</li>
      <li>Graphical user interfaces</li>
      <li>Image processing</li>
      <li>Machine learning</li>
      <li>Mobile apps</li>
      <li>Multimedia</li>
      <li>Computer networking</li>
      <li>Scientific computing</li>
      <li>System administration</li>
      <li>Test frameworks</li>
      <li>Text processing</li>
      <li>Web frameworks</li>
      <li>Web scraping</li>
    </ul>
    </p>
  </article>
 </section>
 <section class="main-section" id="Development">
  <header>Development</header>
  <article>
    <p>
      Python's development is conducted largely through the Python Enhancement Proposal (PEP) process, the primary mechanism for proposing major new features, collecting community input on issues and documenting Python design decisions. Python coding style is covered in PEP 8. Outstanding PEPs are reviewed and commented on by the Python community and the steering council.
    </p>
    
    <p>
Enhancement of the language corresponds with development of the CPython reference implementation. The mailing list python-dev is the primary forum for the language's development. Specific issues are discussed in the Roundup bug tracker hosted at bugs.python.org. Development originally took place on a self-hosted source-code repository running Mercurial, until Python moved to GitHub in January 2017.
    </p>
    
    <p>
CPython's public releases come in three types, distinguished by which part of the version number is incremented:
      <ul>
        <li>Backward-incompatible versions, where code is expected to break and needs to be manually ported. The first part of the version number is incremented. These releases happen infrequently—version 3.0 was released 8 years after 2.0.</li>
        <li>Major or "feature" releases are largely compatible with the previous version but introduce new features. The second part of the version number is incremented. Starting with Python 3.9, these releases are expected to happen annually. Each major version is supported by bugfixes for several years after its release.</li>
        <li>Bugfix releases, which introduce no new features, occur about every 3 months and are made when a sufficient number of bugs have been fixed upstream since the last release. Security vulnerabilities are also patched in these releases. The third and final part of the version number is incremented.</li>
      </ul>
    </p>
  
    <p>
    Many alpha, beta, and release-candidates are also released as previews and for testing before final releases. Although there is a rough schedule for each release, they are often delayed if the code is not ready. Python's development team monitors the state of the code by running the large unit test suite during development.
  </p>
  
  <p>
The major academic conference on Python is PyCon. There are also special Python mentoring programmes, such as Pyladies.
  </p>
  
  <p>
    Python 3.10 deprecated <code>wstr</code> (to be removed in Python 3.12; meaning Python extensions need to be modified by then), and added pattern matching to the language.
    </p>
  </article>
 </section>
 <section class="main-section" id="Development_environments">
  <header>Development environments</header>
  <article>
    <p>
      Most Python implementations (including CPython) include a read–eval–print loop (REPL), permitting them to function as a command line interpreter for which the user enters statements sequentially and receives results immediately.
    </p>
    
    <p>
Python comes with a Integrated development environment (IDE) called IDLE, which is more beginner based.
    </p>
    
    <p>
Other shells, including IDLE and IPython, add further abilities such as improved auto-completion, session state retention and syntax highlighting.
    </p>
    
    <p>
As well as standard desktop integrated development environments, there are Web browser-based IDEs; SageMath (intended for developing science and math-related Python programs); PythonAnywhere, a browser-based IDE and hosting environment; and Canopy IDE, a commercial Python IDE emphasizing scientific computing.
    </p>
  </article>
 </section>
 <section class="main-section" id="Popularity">
  <header>Popularity</header>
  <article>
    <p>
      Since 2003, Python has consistently ranked in the top ten most popular programming languages in the TIOBE Programming Community Index where, as of October 2021, it is the most popular language (ahead of Java, and C). It was selected Programming Language of the Year (for "the highest rise in ratings in a year") in 2007, 2010, 2018, and 2020 (the only language to do so four times).
    </p>
    
    <p>
An empirical study found that scripting languages, such as Python, are more productive than conventional languages, such as C and Java, for programming problems involving string manipulation and search in a dictionary, and determined that memory consumption was often "better than Java and not much worse than C or C++".
    </p>
    
    <p>
Large organizations that use Python include Wikipedia, Google, Yahoo!, CERN, NASA, Facebook, Amazon, Instagram, Spotify and some smaller entities like ILM and ITA. The social news networking site Reddit was written mostly in Python.
    </p>
  </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://en.wikipedia.org/wiki/Python_(programming_language)" 
           target="_blank">Wikipedia</a>
      </li>
    </ul>
   </article>
 </section>
</main>
              
            
!

CSS

              
                html,
body {
  min-width: 290px;
  color:#4d4e53;
  background-color: #ffffff;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: grey;
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.7em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 16px 30px;
  text-decoration: none;
  color: #4d4e53;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  text-align: left;
  whitespace: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
}

#hello {
  display: block;
}

@media only screen and (max-width: 815px) {
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }
  
  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }
  
  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 280px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }
  
  #hello {
    margin-left: -20px;
    width: 100%;
    padding: 15px 45px 5px 10px;
    min-width: 270px;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console