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

              
                <!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<html>
  <head>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <link rel="stylesheet" href="documentation page.css"></link>
    <link rel="preconnect" href="https://fonts.gstatic.com"></link>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"></link>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"></link>
    <title>Product documentation page</title></head>
    <body>
  <nav id="navbar">
    <header> Python documentation</header>
    <ul class="list-unstyled">
      <li><a class="nav-link" href="#Introduction"> Introduction </a> </li>
      <li><a class="nav-link" href="#Interpreter"> Interpreter </a></li>
      <li><a class="nav-link" href="#Variables">Variables</a> </li>
      <li><a class="nav-link" href="#Indentation"> Indentation </a></li>
      <li><a class="nav-link" href="#Statement_and_control_flow">Statement and control flow</a></li>
      <li><a class="nav-link" href="#Expressions">Expressions</a></li>
      <li><a class="nav-link" href="#Data_types">Data types</a></li>
      <li><a class="nav-link" href="#Programming_examples"> Programming examples </a></li>
      <li><a class="nav-link" href="#References">References</a> </li>
      </ul>
  </nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <p class="details">Python is an interpreted high-level general-purpose programming language. Python's design philosophy emphasizes code readability with its notable use of significant indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.
    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>
    <p class="details">Python is created the following philosophy</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>
  </section>

  <section class="main-section" id="Interpreter">
  <header>Interpreter
  </header>
  <p class="details">To run python programs, you will need a python interpreter installed and running. It can be downloaded from <a href="https://www.python.org/downloads/"> here</a>.
    Once installed open the python shell and run the following code to test it is working:
    </p>
    <div>
      <code>print("Hello World!")</code>
    </div>
    
    <p class="details">
    If the set up was completed succesfully this will return Hello World! within the shell.
    </p>
  </section>

  <section class="main-section" id="Variables">
    <header>Variables</header>
    <p class="details"> 
      Unlike in other programming languages which require variables to be declared. In python, there is no such requirement. Variables are created the moment they are assigned a value. 
    </p>
    <p class="details">To declare an integar:</p>
    <div>
      <code>x=10</code>
      <code>print(x)</code>
    </div>
  </section>

  <section class="main-section" id="Indentation">
    <header>Indentation</header>
    <p class="details">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 doesn't have any semantic meaning. The recommended indent size is four spaces</p>
  </section>
  
  <section class="main-section" id="Statement_and_control_flow">
    <header>Statement and control flow</header>
    <p class="details">Pythons statements include (among others):</p>
    <ul>
      <li>The assignment statement,using a single equals sign =</li>
      <li>The if statement, which conditionally executes a block of code, along with else and elif(a contraction of else-if)</li>
      <li>The for statement, which iterates over an iterable object, capturing each element to a local variable for use by the attached block.</li>
      <li>The while statement, which executes a block of code as long as its condition is true.</li>
      <li>The try statement, which allows exceptions raised in its attached code block to be caught and handled by except clauses; it also ensures that clean-up code in a finally block will always be run regardless of how the block exits.</li>
      <li>The raise statement, used to raise a specified exception or re-raise a caught exception.</li>
      <li>The class statement, which executes a block of code and attaches its local namespace to a class, for use in object-oriented programming.</li>
      <li>The def statement, which defines a function or method.</li>
      <li>The with statement, from Python 2.5 released in September 2006,  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 re-places a common try/finally idiom. </li>
      <li>The break statement,exits from a loop.</li>
      <li>the continue statement,skips this iteration and continues with the next item.</li>
      <li>The del 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 pass statement, which serves as a NOP. it is syntactically needed to create an empty code block.</li>
      <li>The assert statement, used during debugging to check for conditions that should apply.</li>
    </ul>
    <p class="details">
    The assignment statement (=) operates by binding a name as a reference to a separate, dynam-ically-allocated object. Variables may be subsequently rebound at any time to any object. In Py-thon, a variable name is a generic reference holder and doesn't have a fixed data type associated with it. However at a given time, a variable will refer to some object, which will have a type.
     This is referred to as dynamic typing and is contrasted with statically-typed programming languages, where each variable may only contain values of a certain type.
    </p>
  </section>

<section class="main-section" id="Expressions">
  <header>Expressions</header>
  <p class="details">Some Python expressions are similar to those found in languages such as C and Java, while some are not:</p>
  <ul>
    <li>Addition, subtraction, and multiplication are the same, but the behavior of division differs. There are two types of divisions in Python. They are floor division (or inte-ger division) // and floating-point/division. Python also uses the ** operator for exponentiation.</li>
    <li>From Python 3.5, the new @ infix operator was introduced. It is intended to be used by libraries such as NumPy for matrix multiplication.</li>
    <li>From Python 3.8, the syntax :=, called the 'walrus operator' was introduced. It as-signs values to variables as part of a larger expression.</li>
    <li>In Python, == compares by value, versus Java, which compares numerics by val-ue and objects by reference. (Value comparisons in Java on objects can be per-formed with the equals() method.) Python's is operator may be used to compare object identities (comparison by reference). In Python, comparisons may be chained, for example a <= b <= c.</li>
    <li>Python uses the words and, or, not for its boolean operators rather than the sym-bolic &&, ||, ! used in Java and C.</li>
    <li>Python has a type of expression termed a list comprehension as well as a more general expression termed a generator expression. </li>
    <li>Anonymous functions are implemented using lambda expressions; however, these are limited in that the body can only be one expression.</li>
    <li>Conditional expressions in Python are written as x if c else y (different in order of operands from the c ? x : y operator common to many other languages).</li>
  </ul>
</section>

<section class="main-section" id="Data_types">
  <header > Data types</header>
  <h5 class="sub-heading">Integar</h5>
  <p class="details">In Python 3, there is effectively no limit to how long an integer value can be. Of course, it is constrained by the amount of memory your system has, as are all things, but beyond that an integer can be as long as you need it to be.</p>
  <h5 class="sub-heading">Floating-Point Numbers</h5>
  <p class="details">The float type in Python designates a floating-point number. float values are specified with a decimal point. Optionally, the character e or E followed by a positive or negative integer may be appended to specify scientific notation:</p>
  <div>
    <code>type(4.2)</code>
    <code> &lt;class 'float'&gt; </code>
  </div>
  <h5 class="sub-heading">Complex Number</h5>
  <p class="details">Complex numbers are specifed as &lt;real part&gt; + &lt;Imaginary part&gt;. for example:</p>
  <div> 
    <code>2+3j</code>
    <code>(2+3j)</code>
    <code>>>>type(2+3j)</code>
    <code>&lt;class 'complex'&gt;</code>
    </div>
  
  <h5 class="sub-heading">Strings</h5>
  <p class="details">Strings are sequences of character data. The string type in Python is called str.</p>
  <p class="details">String literals may be delimited using either single or double quotes. All the characters between the opening delimiter and matching closing delimiter are part of the string:</p>
  <div>
    <code>>>>print("I am a string.")</code>
    <code>I am a string.</code>
    <code>>>>type("I am string.")</code>
    <code>&lt;class 'str'&gt;</code>
  </div>
  <h5 class="sub-heading">Boolean</h5>
  <p class="details">Python 3 provides a Boolean data type. Objects of Boolean type may have one of two values, true or false:</p>
  <div>
    <code>>>>type(true)</code>
    <code>&lt;class 'bool'&gt;</code>
    <code>>>>type(false)</code>
    <code>&lt;class 'bool'&gt;</code>
  </div>
</section>

<section class="main-section" id="Programming_examples">
    <header> Programming examples</header>
    <p class ="details"> Hello world program:</p>
    <div>
    <code> print('hello,world!') </code>
    </div>
    <p class="details"> Program to calculate the factorial of a positive integar </p>
    <div>
    <code>
    n = int(input('Type a number, and its factorial will be printed: '))</code>
    <code>if n < 0: </code>
      <code class="tab">raise ValueError('You must enter a non negative integer')</code>
    <code>factorial = 1</code>
    <code>for i in range(2, n + 1):</code>
     <code class="tab">factorial *= i</code>
    <code>print(factorial)</code>
  </div>
</section>

<section class="main-section" id="References">
  <header>References</header>
  
  <p class="details"><a href="https://en.wikipedia.org/wiki/Python_(programming_language)">https://en.wikipedia.org/wiki/Python_(programming_language)</a></p> 
  <p class="details"><a href="https://realpython.com">https://realpython.com</a></p>
</section>
</main>
</body>
</html>
              
            
!

CSS

              
                

html,body {
  font-family: 'Roboto', sans-serif;
      
      background: blanchedalmond !important; /* Important is added override priority of bootstrap*/
  } 

  #navbar {
    position: fixed;
    width: 300px;
    height: 100%;
    border-color: #00131c;
    border-right: 4px solid #0a4b78;
  }
  nav > header {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
  }

  #navbar ul {
    height: 88%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  
  nav > ul > li {
    list-style-type: none;
    text-align: center;
    padding:5px;
    border-top: 3px solid #0a4b78;
  }
  
  nav > ul > li > a {
    color:black;
  }
  
  #main-doc{
    position: absolute;
    margin-left: 310px;
    padding: 20px;
    margin-bottom: 110px; 
    
    
  }
  
  .details {
    padding: 10px;
    
  }
  .main-section > header {
     font-size: 25px;
    font-weight: bold;
  }
  .sub-heading{
    font-weight: bold;
    padding: 10px;
  }
  section > ul > li {
    margin-left: 15px;
  }

  code{
    display: block;
    flex-wrap: wrap;
    background-color:rgb(16, 67, 90, 0.15);
    border-radius: 2%;
    width: auto;
    padding-left: 10px;
  }

  .tab {
    padding-left: 20px;
  }

  @media only screen and (max-width: 815px) {
    /* For mobile phones: */
    #navbar ul {
      border: 1px solid;
      height: 207px;
      
    }

    nav > ul > li {
      list-style-type: none;
      text-align: center;
      padding:5px;
      border-top: 1px solid #0a4b78;
      
      }
  
    #navbar {
      background-color: blanchedalmond;
      position: absolute;
      top: 0;
      padding: 0;
      margin: 0;
      width: 100%;
      max-height: 275px;
      border: none;
      z-index: 1;
      
      
    }
  
    #main-doc {
      position: relative;
      margin-left: 0px;
      margin-top: 300px;
    }
  }
  
  @media only screen and (max-width: 400px) {
    #main-doc {
      margin-left: -10px;
    }
  
    code {
      
      width: 100%;
      padding: 5px;
      min-width: 233px;
      width: 100%;
      word-wrap: break-word;
      
    }
  }
  
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console