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>

<nav id="navbar">
  <header>
    <h1>Python Tutorial</h1>
  </header>
  <ul>
    <li><a href="#Introduction" class="nav-link">Introduction</a></li>
    <li><a href="#Getting_Started" class="nav-link">Getting Started</a></li>
    <li><a href="#Syntax" class="nav-link">Syntax</a></li>
    <li><a href="#Comments" class="nav-link">Comments</a></li>
    <li><a href="#Variables" class="nav-link">Variables</a></li>
    <li><a href="#Reference" class="nav-link">Reference</a></li>
  </ul>
</nav>

<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>
      <h2>Introduction</h2>
    </header>
    <article>
      <p>
        Python is a popular programming language. It was created by Guido
        van Rossum, and released in 1991.
        <span class="new_line">It is used for:</span>
      </p>
      <ul>
        <li>web development (server-side),</li>
        <li>software development,</li>
        <li>mathematics,</li>
        <li>system scripting.</li>
      </ul>
    </article>
    <article>
      <h3>What can Python do?</h3>
      <ul>
        <li>Python can be used on a server to create web applications.</li>
        <li>Python can be used alongside software to create workflows.</li>
        <li>
          Python can connect to database systems. It can also read and
          modify files.
        </li>
        <li>
          Python can be used to handle big data and perform complex
          mathematics.
        </li>
        <li>
          Python can be used for rapid prototyping, or for production-ready
          software development.
        </li>
      </ul>
    </article>
    <article>
      <h3>Why Python?</h3>
      <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="Getting_Started">
    <header>
      <h2>Getting Started</h2>
    </header>
    <article>
      <h3>Python install</h3>
      <p>
        Many PCs and Macs will have python already installed.<span class="new_line">To check if you have python installed on a Windows PC, search in
          the start bar for Python or run the following on the Command Line
          (cmd.exe):</span>
        <code class="console">C:\Users\Your Name>python --version</code>
        <span class="new_line">To check if you have python installed on a Linux or Mac, then on
          linux open the command line or on Mac open the Terminal and
          type:</span>
        <code class="console">python --version</code>
      </p>
    </article>
    <article>
      <h3>Python Quickstart</h3>
      <p>
        Python is an interpreted programming language, this means that as a
        developer you write Python (.py) files in a text editor and then put
        those files into the python interpreter to be executed.
        <span class="new_line">The way to run a python file is like this on the command
          line:</span>
        <code class="console">C:\Users\Your Name>python helloworld.py</code>
        <span class="new_line">Where "helloworld.py" is the name of your python file.</span>
        <span class="new_line">Let's write our first Python file, called helloworld.py, which
          can be done in any text editor.</span>
        <code class="editor"><span class="keyword">print</span>(<span class="str">"Hello, World!"</span>)</code>
        <span class="new_line">Simple as that. Save your file. Open your command line, navigate
          to the directory where you saved your file, and run:</span>
        <code class="console">C:\Users\Your Name>python helloworld.py</code>
        <span class="new_line">The output should read:</span>
        <code class="console">Hello, World!</code>
      </p>
    </article>
  </section>

  <section class="main-section" id="Syntax">
    <header>
      <h2>Syntax</h2>
    </header>
    <article>
      <h3>Execute Python Syntax</h3>
      <p>
        Python syntax can be executed by writing directly in the Command
        Line:
        <code class="console">>>> print("Hello, World!")<br />
          Hello, World!</code>
        <span class="new_line">
          Or by creating a python file on the server, using the .py file
          extension, and running it in the Command Line:
        </span>
        <code class="console">C:\Users\Your Name>python myfile.py</code>
      </p>
    </article>
    <article>
      <h3>Python Indentation</h3>
      <p>
        <span class="new_line">Indentation refers to the spaces at the beginning of a code
          line.</span>
        <span class="new_line">Where in other programming languages the indentation in code is
          for readability only, the indentation in Python is very
          important.</span>
        <span class="new_line">Python uses indentation to indicate a block of code.example</span>
        <code class="editor"><span class="keyword">if</span> <span class="num">5</span> >
          <span class="num">2</span>:<br />
          &nbsp; <span class="keyword">print</span>(<span class="str">"Five is greater than two!"</span>)</code>
        <span class="new_line">Python will give you an error if you skip the indentation:
          example</span>
        <code class="editor wrong"><span class="keyword">if</span> <span class="num">5</span> >
          <span class="num">2</span>:<br />
          <span class="keyword">print</span>(<span class="str">"Five is greater than two!"</span>)
        </code>
        <code class="console">
          &nbsp;File "demo_indentation_test.py", line 2<br />
          &nbsp;&nbsp;&nbsp; print("Five is greater than two!")<br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^
          <br />IndentationError: expected an indented block</code>
        <span class="new_line">You have to use the same number of spaces in the same block of
          code, otherwise Python will give you an error:</span>
      </p>
    </article>
  </section>

  <section class="main-section" id="Comments">
    <header>
      <h2>Comments</h2>
    </header>
    <p>
      Comments can be used to explain Python code.
      <span class="new_line">Comments can be used to make the code more readable.</span>
      <span class="new_line">
        Comments can be used to prevent execution when testing code.</span>
    </p>
    <article>
      <h3>Creating a Comment</h3>
      <p>
        Comments starts with a #, and Python will ignore them:Example
        <code class="editor"><span class="comment">#This is a comment</span><br />
          <span class="keyword">print</span>(<span class="str">"Hello, World!"</span>)</code>
      </p>
    </article>
    <article>
      <h3>Multi Line Comments</h3>
      <p>
        Python does not really have a syntax for multi line comments.
        <span class="new_line">
          To add a multiline comment you could insert a # for each
          line:Example</span>
        <code class="editor">
          <span class="comment">#This is a comment<br />
            #written in<br />
            #more than just one line</span><br />
          <span class="keyword">print</span>(<span class="str">"Hello, World!"</span>)
        </code>
        Or, not quite as intended, you can use a multiline string.<span class="new_line">
          Since Python will ignore string literals that are not assigned to
          a variable, you can add a multiline string (triple quotes) in your
          code, and place your comment inside it:</span>
        <code class="editor"><span class="str-comment">""" <br />This is a comment<br />
            written in <br />more than just one line """</span><br />
          <span class="keyword">print</span>(<span class="str">"Hello, World!"</span>)</code>
      </p>
    </article>
  </section>

  <section class="main-section" id="Variables">
    <header>
      <h2>Variables</h2>
    </header>
    <article>
      <h3>Creating Variables</h3>
      <p>
        Variables are containers for storing data values.
        <span class="new_line">Unlike other programming languages, Python has no command for
          declaring a variable.</span><span class="new_line">
          A variable is created the moment you first assign a value to
          it.Example</span>
        <code class="editor">x = <span class="num">5</span><br />
          y = <span class="str">"John"</span><br />
          <span class="keyword">print</span>(x)<br />
          <span class="keyword">print</span>(y)</code>
        <span class="new_line">Variables do not need to be declared with any particular type and
          can even change type after they have been set.</span>
        <span class="new_line">String variables can be declared either by using single or double
          quotes:</span>
        <code class="editor">x = <span class="str">"John"</span><br />
          <span class="comment"># is the same as</span><br />
          x = <span class="str">'John'</span>
        </code>
      </p>
    </article>
    <article>
      <h3>Variable Names</h3>
      <p>
        A variable can have a short name (like x and y) or a more
        descriptive name (age, carname, total_volume). 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):Example
        </li>
      </ul>
      <p>
        <code class="editor">
          <span class="comment">#Legal variable names:</span><br />
          myvar = <span class="str">"John"</span> <br />
          my_var = <span class="str">"John"</span><br />
          _my_var = <span class="str">"John"</span><br />
          myVar = <span class="str">"John"</span><br />
          MYVAR = <span class="str">"John"</span><br />
          myvar2 = <span class="str">"John"</span><br />
          <span class="comment">#Illegal variable names:</span><br />2myvar
          = <span class="str">"John"</span><br />
          my-var = <span class="str">"John"</span><br />
          my var = <span class="str">"John"</span>
        </code>
      </p>
    </article>
    <article>
      <h3>Assign Value to Multiple Variables</h3>
      <p>
        <span class="new_line">Python allows you to assign values to multiple variables in one
          line:Example</span>
        <code class="editor">x, y, z = <span class="str">"Orange", "Banana", "Cherry"</span><br />
          <span class="keyword">print</span>(x)<br />
          <span class="keyword">print</span>(y)<br />
          <span class="keyword">print</span>(z)</code>
        <span class="new_line">And you can assign the same value to multiple variables in one
          line:</span>
        <code class="editor">x = y = z = <span class="str">"Orange"</span><br />
          <span class="keyword">print</span>(x)<br />
          <span class="keyword">print</span>(y)<br />
          <span class="keyword">print</span>(z)</code>
      </p>
    </article>
    <article>
      <h3>Output Variables</h3>
      <p>
        <span class="new_line">The Python print statement is often used to output
          variables.</span>
        <span class="new_line">To combine both text and a variable, Python uses the +
          character:</span>
        <code class="editor">x = <span class="str">"awesome"</span><br />
          <span class="keyword">print</span>(<span class="str">"Python is "</span>
          + x)</code>
        <span class="new_line">You can also use the + character to add a variable to another
          variable:</span>
        <code class="editor">x = <span class="str">"Python is "</span><br />
          y = <span class="str">"awesome"</span><br />
          z = x + y<br />
          <span class="keyword">print</span>(z)</code>
        <span class="new_line">For numbers, the + character works as a mathematical
          operator:</span>
        <code class="editor">x = <span class="num">5</span><br />
          y = <span class="num">10</span><br />
          <span class="keyword">print</span>(x + y)</code>
        <span class="new_line">If you try to combine a string and a number, Python will give you
          an error:Example</span>
        <code class="editor">x = <span class="num">5</span><br />
          y = <span class="str">"John"</span><br />
          <span class="keyword">print</span>(x + y)</code>
      </p>
    </article>
    <article>
      <h3>Global Variables</h3>
      <p>
        Variables that are created outside of a function (as in all of the
        examples above) are known as global variables.
        <span class="new_line">Global variables can be used by everyone, both inside of
          functions and outside.</span>
        <code class="editor">x = <span class="str">"awesome"</span><br /><br />
          <span class="keyword">def</span> myfunc():<br />
          &nbsp;&nbsp; <span class="keyword">print</span>(<span class="str">"Python is "</span>
          + x)<br /><br />
          myfunc()</code>
        <span class="new_line">If you create a variable with the same name inside a function,
          this variable will be local, and can only be used inside the
          function. The global variable with the same name will remain as it
          was, global and with the original value.</span>
        <code class="editor">x = <span class="str">"awesome"</span><br /><br />
          <span class="keyword">def</span> myfunc(): <br />&nbsp;&nbsp;x =
          <span class="str">"fantastic"</span><br />
          &nbsp;&nbsp;<span class="keyword">print</span>(<span class="str">
            "Python is "</span>
          + x)<br /><br />
          myfunc()<br /><br />
          <span class="keyword">print</span>(<span class="str">"Python is "</span>
          + x)</code>
      </p>
    </article>
    <article>
      <h3>The global Keyword</h3>
      <p>
        Normally, when you create a variable inside a function, that
        variable is local, and can only be used inside that function.
        <span class="new_line">To create a global variable inside a function, you can use the
          global keyword.Example</span>
        <code class="editor"><span class="keyword">def</span> myfunc():<br />
          &nbsp;&nbsp;<span class="keyword">global</span> x<br />
          &nbsp;&nbsp;x = <span class="str">"fantastic"</span><br /><br />
          myfunc()<br /><br />
          <span class="keyword">print</span>(<span class="str">"Python is "</span>
          + x)
        </code>
        <span class="new_line">Also, use the global keyword if you want to change a global
          variable inside a function.Example</span>
        <code class="editor">
          x=<span class="str">"awesome"</span><br /><br />
          <span class="keyword">def</span> myfunc():<br />
          &nbsp;&nbsp;<span class="keyword">global</span> x<br />
          &nbsp;&nbsp;x = <span class="str">"fantastic"</span><br /><br />
          myfunc()<br /><br />
          <span class="keyword">print</span>(<span class="str">"Python is "</span>
          + x)
        </code>
      </p>
    </article>
  </section>

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

CSS

              
                html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  margin: 0;
}

h2 {
  font-size: 2rem;
  font-weight: 400;
}

p,
ul {
  color: #333;
}

h3 {
  padding-left: 1rem;
  font-size: 1.3rem;
  font-weight: 400;
}

p {
  padding-left: 2rem;
}

ul {
  padding-left: 4rem;
}

.num {
  color: orangered;
}

.keyword {
  color: blue;
}

.str {
  color: #aa0000;
}

/* Navbar */
#navbar {
  background: rgba(0, 0, 0, 0.9);
  height: 100%;
  width: 300px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
}

#navbar h1 {
  font-size: 2.2rem;
  padding-left: 2rem;
  color: rgb(200, 0, 0);
  font-weight: 400;
}

#navbar ul {
  padding-left: 2rem;
}

#navbar ul li {
  list-style: none;
}

#navbar .nav-link {
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 1rem 0;
  font-size: 1.2rem;
  font-weight: 100;
}

#navbar .nav-link:hover {
  animation-name: pad-left;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
}

@keyframes pad-left {
  100% {
    color: rgb(200, 0, 0);
    border-bottom: 1px solid rgb(133, 70, 70);
    padding-left: 0.5rem;
  }
}

/* Main */
#main-doc {
  padding-right: 3rem;
  margin-left: 350px;
  box-sizing: border-box;
}

.main-section {
  margin-bottom: 4rem;
}

#Introduction p {
  padding-left: 1rem;
}

code.editor,
code.console {
  display: block;
  background: #f4f4f4;
  padding: 1.2rem 1.1rem;
  margin: 1rem 0;
  margin-left: 1rem;
  border-radius: 5px;
  font-size: 1.1rem;
  line-height: 1.9;
}

code.console {
  background: rgb(0, 0, 0);
  color: rgb(79, 191, 64);
}

code.wrong {
  background: rgba(255, 0, 0, 0.1);
}

code .comment {
  color: green;
}

code .str-comment {
  color: #aa0000;
}

@media (max-width: 841px) {
  #body {
    overflow: scroll;
  }

  /* Navbar */
  #navbar {
    position: static;
    width: 100%;
    height: 350px;
  }
  #navbar h1 {
    text-align: center;
    display: fixed;
  }

  /* Main */
  #main-doc {
    margin: 0 1rem;
  }
  code.editor,
  code.console {
    min-width: 380px;
  }
}

@media (max-width: 551px) {
  #main-doc {
    margin: 0 0.5rem;
  }
  code.editor,
  code.console {
    margin-left: 0;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console