<nav id="navbar">
  <header>
    Python Documentation
  </header>
  <ul>
    <li>
      <a class="nav-link" href="#Beginning%20with%20Python">Beginning with Python</a>
    </li>
    <li>
      <a class="nav-link" href="#Installation">Installation</a>
    </li>
    <li>
      <a class="nav-link" href="#Syntax">Syntax</a>
    </li>
    <li>
      <a class="nav-link" href="#Type_variables_and_operators">Type variables and operators</a>
    </li>
    <li>
      <a class="nav-link" href="#Strings_and%20_Functions">Strings and Functions</a>
    </li>
    <li>
      <a class="nav-link" href="#Lists">Lists</a>
    </li>
    <li>
      <a class="nav-link" href="#Control_statements_and_Loops">Control Statements and Loops</a>
    </li>
    <li>
      <a class="nav-link" href="#References">References</a>
    </li>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Beginning with Python">
    <header>
      Beginning with Python
    </header>
    <article>
      <p>Now you might be suddenly bogged with the question, why Python? According to Institute of Electrical and Electronics Engineers (IEEE) 2016 ranking Python ranked third after C and Java. As per Indeed.com's data of 2016, the Python job market search ranked fifth. Clearly, all the data points to the ever rising demand in the job market for Python. Its a cool language if you want to learn just for fun or if you want to build your career around Python, you will adore the language. At school level, many schools have started including Python programming for kids. With new technologies taking the market by surprise Python has been playing a dominant role. Whether it is cloud platform, mobile app development, BigData, IoT with Raspberry Pi, or the new Blockchain technology, Python is being seen as a niche language platform to develop and deliver a scalable and robust applications.</p>
      <p>Some key features of the language are:</p>
      <ul>
        <li>Python programs can run on any platform, you can carry code created in Windows machine and run it on Mac or Linux Python has inbuilt large library with prebuilt and portable functionality, also known as the standard library.</li>
        <li>Python is an expressive language It is free and open source Python code is about one third of the size of equivalent C++ and Java code.</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Installation">
    <header>
      Installation
    </header>
    <article>
      <p>Installation on Windows platform:</p>
      <ul>
        <li>Once you click on setup installer, you will get a small window on your desktop screen as shown here; click on Next</li>
        <li>Provide a suitable installation folder to install Python. If you don't provide the installation folder, then the installer will automatically create an installation folder for you, as shown in the following screenshot. Click on Next</li>
        <li>After completion of step 2, you will get a window to customize Python as shown in the preceding screenshot. Notice that the Add python.exe to Path option has been marked x. Select this option to add it to system path variable (which will be explained later in the chapter), and click on Next</li>
        <li>Finally, click on Finish to complete the installation.</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Syntax">
    <header>
      Syntax
    </header>
    <article>
      <p>Python Syntax is the set of rules that defines how a Python program will be written and interpreted (by both the runtime system and by human readers.</p>
      <h3>Hello World</h3>
      <article>
        To get started writing Python, open the Python interpreter and write your first "Hello world" Python code: <code>print("Hello World")</code> Hit Enter and watch the magic happen.
      </article>
    </article>
  </section>
  <section class="main-section" id="Type_Variables_and_ operators">
    <header>
      Type Variables and operators
    </header>
    <article>
      <ul>
        <li>You can use any letter, the special characters "_" and every number provided you do not start with it.</li>
        <li>White spaces and signs with special meanings in Python, as "+" and "-" are not allowed.</li>
        <li>Remember that variable names are case sensitive. Python is dynamically typed, which means that you don't have to declare what type each variable is.</li>
        <li>In Python, variables are a storage placeholder for texts and numbers.</li>
        <li>It must have a name so that you are able to find it again. The variable is always assigned with the equal sign, followed by the value of the variable.</li>
        <li>There are some reserved words for Python and can not be used as variable name. The value of the variable can be changed later on.</li>
        <li>Python supports the following types of operators: Arithmetic operators. Comparison operators Assignment operators Bitwise operators Logical operators Membership operators Identity operators</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Strings_and_Functions">
    <header>
      Strings and Functions
    </header>
    <article>
      <p>A Python string is a sequence, which consists of zero or more characters. The string is an immutable data structure, which means they cannot be changed. For example, if you define string str1 = "Satyamev jayate", then str1 will always remain "Satyamev jayate". You cannot edit the value of the str1 variable. Although you can reassign str1, let's discuss this with examples:</p>
    </article><code>&gt;&gt;&gt; str1 = "satyamev jayate" &gt;&gt;&gt; str1 'satyamev jayate' &gt;&gt;&gt; id(str1) 47173288</code>
    <p>A function is a block of code which only runs when it is called. You can pass data, known as parameters, into a function. A function can return data as a result. In Python a function is defined using the def keyword: <code>def my_function(): print("Hello from a function")</code></p>
    <p>To call a function, use the function name followed by parenthesis: <code>def my_function(): print("Hello from a function") my_function()</code></p>
  </section>
  <section class="main-section" id="Lists">
    <header>
      Lists
    </header>
    <article>
      <p>A list is also a built-in data structure available in Python. It can contain heterogeneous values such as integers, floats, strings, tuples, lists, and dictionaries.</p>
      <p>Creating a list with values <code>Avengers = ['hulk', 'iron-man', 'Captain', 'Thor']</code></p>
    </article>
  </section>
  <section class="main-section" id="Control_Statements_and Loops">
    <header>
      Control Statements and Loops
    </header>
    <article>
      <p>A program’s control flow is the order in which the program’s code executes. The control flow of a Python program is regulated by conditional statements, loops, and function calls.</p>
      <h3>The If Statement</h3>
      <article>
        Often, you need to execute some statements only if some condition holds, or choose statements to execute depending on several mutually exclusive conditions. The Python compound statement if, which uses if, elif, and else clauses, lets you conditionally execute blocks of statements. Here’s the if statement: <code>number = 23 guess = int(input('Enter an integer : ')) if guess == number: print('Congratulations!') elif guess &lt; number: print('A little higher') else: print('A little lower')</code> The elif and else clauses are optional. Note that unlike some languages, Python does not have a switch statement, so you must use if, elif, and else for all conditional processing.
      </article>
      <h3>The While Statement</h3>
      <article>
        The while statement in Python supports repeated execution of a statement or block of statements that is controlled by a conditional expression. Here’s the while statement: <code>i = 1 while i &lt; 6: print(i) i += 1</code> The loop body should contain code that eventually makes the loop condition false, or the loop will never end unless an exception is raised or the loop body executes a break statement. A loop that is in a function’s body also ends if a return statement executes in the loop body, as the whole function ends in this case.
      </article>
      <h3>The For Loop</h3>
      <article>
        The for statement in Python supports repeated execution of a statement or block of statements that is controlled by an iterable expression. Here’s the for statement: <code>fruits = ["apple", "banana", "cherry"] for x in fruits: print(x)</code>
      </article>
      <h4>Iterators</h4>
      <article>
        An <i>iterator</i> is any object i such that you can call i .next( ) without any arguments. i .next( ) returns the next item of iterator i, or, when iterator i has no more items, raises a StopIteration exception. <code>for x in c: statement(s)</code>
      </article>
    </article>
  </section>
  <section class="main-section" id="Reference">
    <header>
      Reference
    </header>
    <article>
      <p>Documentation for this page is taken from :</p>
      <ul>
        <li>
          <a href="https://www.python.org/">Python</a>
        </li>
        <li>
          <a href="https://www.w3schools.com/python">w3schools</a>
        </li>
        <li>
          <a href="https://www.oreilly.com/library/view/python-in-a/0596001886/ch04s09.html">O'Reilly</a>
        </li>
        <li>
          <a href="https://www.pythonforbeginners.com/">Python For Beginners</a>
        </li>
      </ul>
    </article>
  </section>
</main>

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: rgba(0, 22, 22, 0.4);
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  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: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

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

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

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

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

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #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: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}