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

              
                
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Python</title>
  </head>
  <body>
    <main id="main-doc">
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
      <nav id="navbar">
        <header>
        <h1> Python</h1>
        </header>
        <a href="#What_is_Python?" class="nav-link">What is Python?</a><br>
        <a href="#Why_is_Python_worth_learning?" class="nav-link">Why is Python worth learning?</a><br>
        <a href="#How_to_see_if_you_have_Python_installed_on_your_computer_and_start_your_first_Python_document" class="nav-link">How to see if you have Python installed on your computer and start your first Python document</a><br>
        <a href="#Python_syntax,_variables,_comments,_and_data_types." class="nav-link">Python syntax, variables, comments, and data types.</a><br>
        <a href="#Python_numbers,_strings,_and_booleans." class="nav-link">Python numbers, strings, and booleans.</a><br>
        <a href="#References/Sources" class="nav-link">References/Sources</a>
</nav>
<img src="https://www.python.org/static/community_logos/python-logo-master-v3-TM.png" alt="The Python logo">
    <section class="main-section" id="What_is_Python?">
    <header>
  <h1> What is Python?</h1>
    </header>
      <p>Python is a programming language. It was created by Guido van Rossum in 1991.</P>
    </section>
    <section class="main-section" id="Why_is_Python_worth_learning?">
      <header >
        <h1>Why is Python worth learning?</h1>
      </header>
      <p> Python can be used for many different things, including mathematical calculations. Python works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc). It's syntax is similiar to that of the English language.
        </P>
    </section>
    <section class="main-section" id="How_to_see_if_you_have_Python_installed_on_your_computer_and_start_your_first_Python_document">
      <header >
        <h1>How to see if you have Python installed on your computer and start your first Python document</h1>
      </header>
      <p>To see if you already have Python installed on your computer, type <code>C:\Users\Your Name>python --version </code>into Command Prompt.</p>
      <p>You can also type Python into the Windows start bar.</p>
      <p>If you don't have Python, go to Python.org to install it for free. The latest major version is Python 3.</p>
      <p>To create your first Python document type <code>C:\Users\Your Name>python helloworld.py</code> into the Python command line. The last part"helloworld.py" is the name of the file. If you want to, you can change it to something else. Just make sure you have .py after that to indicate that it is a Python file.</p>
      <p>Then type <code> print("Hello, World!")</code> into the line.</p>
      <p>Then navigate back to Command Prompt and type<code> C:\Users\Your Name>python helloworld.py </code>to evaluate your first Python file. The output should read Hello, World!</p>
    </section>
    <section class="main-section" id="Python_syntax,_variables,_comments,_and_data_types.">
      <header >
      <h1>Python syntax, variables, comments, and data types.</h1>
      </header>
      <p>Python requires indentation (indentation refers to spaces in a document) to start a new block of code. If you don't have at least one space--the necessary indentation--then the Python editor will return an "Error" message. You must also use the same number of spaces.</p>
  <h2>Comments</h2> <p>To create a comment, you start with the hashtag symbol(#). If you want to create a multi-line comment, make sure to end with a hashtag as well.</p>
  <h2>Variables</h2>  <p>Let's say you wanted to create a variable x with the value of 12. You would enter x=12 into Python. To display the variable enter print(x) and hit enter. This will return a 12.</p>
  <h2>Rules to Naming Variables</h2>  <p>There are some rules to naming variables. You can only use alphanumeric characters and underscores when naming a variable, but the variable cannot start with a number. Variable names are case-sensitive.</p>
<h2>Naming Multiple Variables</h2> <p>Say you want to name three variables at once. You can do so by entering <code>x, y, z = "Orange", "Banana", "Cherry" </code> into the command line. Just separate the variables with commas, then put an equals sign, then separate the output with commas. You can also set them all equal to each other by using an equal sign instead of a comma.</p>
<h2>Python Data Types</h2> There are 14 data types in Python. Here they are.
<ul>
  <li>Text type <ul>
    <li>Str--string</li>
  </li>
  <li>Numeric types <ul>
    <li>Float</li>
    <li>Int</li>
    <li>Complex</li>
  </ul> </li>
  <li>Sequence Types <ul>
    <li>List</li>
    <li>Tuple</li>
    <li>Range</li></ul></li>
  <li>Mapping Type <ul>
    <li>Dict</li>
  </ul> </li>
  <li>Set Types <ul>
    <li>Set</li>
    <li>Frozenset</li>
  </ul> </li>
  <li>Boolean Type <ul>
    <li>Bool</li>
  </ul> </li>
  <li>Binary Types <ul>
    <li>Bytes</li>
    <li>ByteArray</li>
    <li>Memoryview</li>
  </ul> </li>
</ul>
</section>
    <section class="main-section" id="Python_numbers,_strings,_and_booleans.">
<header>
<h1>Python numbers, strings, and booleans.</h1>

</header>
<h2>Python Numbers</h2>  <p>There are three types of numbers as described above. The first one is int, short for integer. This outputs a whole number (positive or negative) with no decimals of unlimited length</p>
<p>The second one is float. A float number is a number with one or more decimals. Note:You can represent large numbers with E to indicate "10 to the power of (whatever follows E)". For example 6.25E2 would mean 6.25 times 10^2, or 625.</p>
<p>Complex is the last type. A complex number has both an imaginary and a real part. This is represented by, for example 2+5i. 2 is the real part and 5 is the imaginary part.</p>
<h2>Python Strings</h2> <p>A string, represented by str, is any amount of text. A string is encapsulated in single or double quotes. However, if the string takes up more than one line, you must use triple quotes.</p>
<p>There are various functions that can alter strings, such as upper(), lower(), len(), and slicing that you can learn about at https://www.w3schools.com/Python/python_strings.asp</p>
<h2>Python Booleans</h2> <p>A boolean is a value that is either true or false. If you enter a data type into bool(), it will return true unless the data type is empty or you enter False.</p>
    </section>
    <section id="References/Sources" class="main-section">
      <header>
      <h1> References/Sources</h1>
      </header>
      <p>www.w3schools.com Python Tutorial is a great resource for learning Python.</p>
    </section>

    </main>
  </body>
</html>

              
            
!

CSS

              
                .main-section{font-family: "Helvetica Neue", "HelveticaNeue-Light", Helvetica, Arial, "Lucida Grande", sans-serif;
text-align:justify}
#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  border-right: solid;
  height:100%;
  border-color: rgba(0, 22, 22, 0.4);
}
#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}
@media (max-width: 350px) {
    .main-section {
minmum-size:100px;
              
            
!

JS

              
                
              
            
!
999px

Console