HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
<nav id="navbar">
<header class="nav-header">Introduction to Python</header>
<ol>
<li><a class="nav-link" href="#Intro">Intro</a></li>
<li><a class="nav-link" href="#More_details">More details</a></li>
<li><a class="nav-link" href="#Detritus">Detritus</a></li>
<li><a class="nav-link" href="#The_Interpreter">The Interpreter</a></li>
<li><a class="nav-link" href="#Arguments">Arguments</a></li>
<li><a class="nav-link" href="#Interactive_Mode">Interactive Mode</a></li>
<li><a class="nav-link" href="#Source_Code_Encoding">Source Code Encoding</a></li>
</ol>
</nav>
<main id="main-doc">
<div class="top-gap"></div>
<h1>An Introduction to Python 3.8</h1>
<section class="main-section" id="Intro">
<header>
<h2>Intro</h2>
</header>
<p>
Python is an easy to learn, powerful programming language. It has efficient high-level data structures
and a simple but effective approach to object-oriented programming. Python’s elegant syntax and dynamic
typing, together with its interpreted nature, make it an ideal language for scripting and rapid
application development in many areas on most platforms.</p>
<p> The Python interpreter and the extensive standard library are freely available in source or binary form
for all major platforms from the Python Web site, <a
href="https://www.python.org/">https://www.python.org/</a>, and may be freely distributed. The same
site also contains distributions of and pointers to many free third party Python modules, programs and
tools, and additional documentation.</p>
<p>The Python interpreter is easily extended with new functions and data types implemented in C or C++ (or
other languages callable from C). Python is also suitable as an extension language for customizable
applications.</p>
<p>This tutorial introduces the reader informally to the basic concepts and features of the Python language
and system. It helps to have a Python interpreter handy for hands-on experience, but all examples are
self-contained, so the tutorial can be read off-line as well.</p>
<p>For a description of standard objects and modules, see The Python Standard Library. The Python Language
Reference gives a more formal definition of the language. To write extensions in C or C++, read
Extending and Embedding the Python Interpreter and Python/C API Reference Manual. There are also several
books covering Python in depth.</p>
<p>This tutorial does not attempt to be comprehensive and cover every single feature, or even every
commonly used feature. Instead, it introduces many of Python’s most noteworthy features, and will give
you a good idea of the language’s flavor and style. After reading it, you will be able to read and write
Python modules and programs, and you will be ready to learn more about the various Python library
modules described in The Python Standard Library.
</p>
</section>
<section class="main-section" id="More_details">
<header>
<h2>More details</h2>
</header>
<p>If you do much work on computers, eventually you find that there’s some task you’d like to automate. For
example, you may wish to perform a search-and-replace over a large number of text files, or rename and
rearrange a bunch of photo files in a complicated way. Perhaps you’d like to write a small custom
database, or a specialized GUI application, or a simple game.</p>
<p>If you’re a professional software developer, you may have to work with several C/C++/Java libraries but
find the usual write/compile/test/re-compile cycle is too slow. Perhaps you’re writing a test suite for
such a library and find writing the testing code a tedious task. Or maybe you’ve written a program that
could use an extension language, and you don’t want to design and implement a whole new language for
your application.</p>
<p>Python is just the language for you.</p>
<p>You could write a Unix shell script or Windows batch files for some of these tasks, but shell scripts are
best at moving around files and changing text data, not well-suited for GUI applications or games. You
could write a C/C++/Java program, but it can take a lot of development time to get even a first-draft
program. Python is simpler to use, available on Windows, Mac OS X, and Unix operating systems, and will
help you get the job done more quickly.</p>
<p>Python is simple to use, but it is a real programming language, offering much more structure and support
for large programs than shell scripts or batch files can offer. On the other hand, Python also offers
much more error checking than C, and, being a very-high-level language, it has high-level data types
built in, such as flexible arrays and dictionaries. Because of its more general data types Python is
applicable to a much larger problem domain than Awk or even Perl, yet many things are at least as easy
in Python as in those languages.</p>
<p>Python allows you to split your program into modules that can be reused in other Python programs. It
comes with a large collection of standard modules that you can use as the basis of your programs — or as
examples to start learning to program in Python. Some of these modules provide things like file I/O,
system calls, sockets, and even interfaces to graphical user interface toolkits like Tk.
</p>
</section>
<section class="main-section" id="Detritus">
<header>
<h2>Detritus</h2>
</header>
<p>Python is an interpreted language, which can save you considerable time during program development
because no compilation and linking is necessary. The interpreter can be used interactively, which makes
it easy to experiment with features of the language, to write throw-away programs, or to test functions
during bottom-up program development. It is also a handy desk calculator.</p>
<p>Python enables programs to be written compactly and readably. Programs written in Python are typically
much shorter than equivalent C, C++, or Java programs, for several reasons:
<ul>
<li>the high-level data types allow you to express complex operations in a single statement;</li>
<li>statement grouping is done by indentation instead of beginning and ending brackets;</li>
<li>no variable or argument declarations are necessary.</li>
</ul>
</p>
<p>Python is extensible: if you know how to program in C it is easy to add a new built-in function or
module to the interpreter, either to perform critical operations at maximum speed, or to link Python
programs to libraries that may only be available in binary form (such as a vendor-specific graphics
library). Once you are really hooked, you can link the Python interpreter into an application
written in C and use it as an extension or command language for that application.</p>
<p>By the way, just a couple more points about Python:
<ul>
<li>The language is named after the BBC show “Monty Python’s Flying Circus” and has nothing
to do with reptiles.</li>
<li>Making references to Monty Python skits in documentation is not only allowed,
it is encouraged!</li>
</ul>
</p>
<p>Now that you are all excited about Python, you’ll want to examine it in some more detail. Since the
best way to learn a language is to use it, the tutorial invites you to play with the Python
interpreter as you read.</p>
<p>In the next chapter, the mechanics of using the interpreter are explained. This is rather mundane
information, but essential for trying out the examples shown later.</p>
<p>The rest of the tutorial introduces various features of the Python language and system through
examples, beginning with simple expressions, statements and data types, through functions and
modules, and finally touching upon advanced concepts like exceptions and user-defined classes.</p>
<hr>
</section>
<section class="main-section" id="The_Interpreter">
<header>
<h2>The Interpreter</h2>
</header>
<p>The Python interpreter is usually installed as <code>/usr/local/bin/python3.8</code> on those machines
where it is
available; putting <code>/usr/local/bin</code> in your Unix shell’s search path makes it possible to
start it by
typing the command:
<pre>python3.8</pre>
to the shell. 1 Since the choice of the directory where the interpreter lives is an installation option,
other places are possible; check with your local Python guru or system administrator.
(E.g.,<code>/usr/local/python</code>
is a popular alternative location.)</p>
<p>On Windows machines where you have installed Python from the Microsoft Store, the <code>python3.8</code>
command will
be available. If you have the py.exe launcher installed, you can use the py command. See Excursus:
Setting environment variables for other ways to launch Python.</p>
<p>Typing an end-of-file character (Control-D on Unix, Control-Z on Windows) at the primary prompt causes
the interpreter to exit with a zero exit status. If that doesn’t work, you can exit the interpreter by
typing the following command:
<pre>quit()</pre>
</p>
<p>The interpreter’s line-editing features include interactive editing, history substitution and code
completion on systems that support the GNU Readline library. Perhaps the quickest check to see whether
command line editing is supported is typing Control-P to the first Python prompt you get. If it beeps,
you have command line editing; see Appendix Interactive Input Editing and History Substitution for an
introduction to the keys. If nothing appears to happen, or if <code>^P</code> is echoed, command line
editing isn’t
available; you’ll only be able to use backspace to remove characters from the current line.</p>
<p>The interpreter operates somewhat like the Unix shell: when called with standard input connected to a tty
device, it reads and executes commands interactively; when called with a file name argument or with a
file as standard input, it reads and executes a script from that file.</p>
<p>A second way of starting the interpreter is <code>python -c command [arg] ...</code>, which executes the
statement(s)
in <i>command</i>, analogous to the shell’s -c option. Since Python statements often contain spaces or
other
characters that are special to the shell, it is usually advised to quote <i>command</i> in its entirety
with
single quotes.</p>
<p>Some Python modules are also useful as scripts. These can be invoked using
<code>python -m module [arg] ...</code>,
which executes the source file for <i>module</i> as if you had spelled out its full name on the command
line.
</p>
<p>When a script file is used, it is sometimes useful to be able to run the script and enter interactive
mode afterwards. This can be done by passing <code>-i</code> before the script.</p>
<p>All command line options are described in Command line and environment.</p>
</section>
<section class="main-section" id="Arguments">
<header>
<h2>Arguments</h2>
</header>
<p>
When known to the interpreter, the script name and additional arguments thereafter are turned into a
list of strings and assigned to the <code>argv</code> variable in the <code>sys</code> module. You can
access this list by executing <code>import sys</code>. The length of the list is at least one; when no
script and no arguments are given, <code>sys.argv[0]</code> is an empty string. When the script name is
given as <code>'-'</code> (meaning standard input), <code>sys.argv[0]</code> is set to <code>'-'</code>.
When -c <i>command</i> is used, <code>sys.argv[0]</code> is set to <code>'-c'</code>. When -m
<i>module</i> is used,
<code>sys.argv[0]</code> is set to the full name of the located module. Options found after -c
<i>command</i>
or -m <i>module</i> are not consumed by the Python interpreter’s option processing but left in
<code>sys.argv</code> for the command or module to handle.
</p>
</section>
<section class="main-section" id="Interactive_Mode">
<header>
<h2>Interactive Mode</h2>
</header>
<p>
When commands are read from a tty, the interpreter is said to be in <i>interactive mode</i>. In this
mode it
prompts for the next command with the <i>primary prompt</i>, usually three greater-than signs
(<code>>>></code>); for continuation lines it prompts with the <i>secondary prompt</i>, by default three dots (<code>...</code>). The interpreter prints a welcome message stating its version number and a copyright
notice before printing the first prompt:
</p>
<pre>
$ python3.8
Python 3.8 (default, Sep 16 2015, 09:25:04)
[GCC 4.8.2] on linux
Type "help", "copyright", "credits" or
"license" for more information.
>>></pre>
<p>Continuation lines are needed when entering a multi-line construct. As an example, take a look at this
<code>if</code>
statement:
</p>
<pre>
>>> the_world_is_flat = True
>>> if the_world_is_flat:
... print("Be careful not to fall off!")
...
Be careful not to fall off!</pre>
<p>For more on interactive mode, see Interactive Mode.
</p>
</section>
<section class="main-section" id="Source_Code_Encoding">
<header>
<h2>Source Code Encoding</h2>
</header>
<p>
By default, Python source files are treated as encoded in UTF-8. In that encoding, characters of most
languages in the world can be used simultaneously in string literals, identifiers and comments —
although the standard library only uses ASCII characters for identifiers, a convention that any portable
code should follow. To display all these characters properly, your editor must recognize that the file
is UTF-8, and it must use a font that supports all the characters in the file.
</p>
<p>
To declare an encoding other than the default one, a special comment line should be added as the first
line of the file. The syntax is as follows:
<pre>
# -*- coding: encoding -*-</pre>
where encoding is one of the valid codecs supported by Python.
</p>
<p>
For example, to declare that Windows-1252 encoding is to be used, the first line of your source code
file should be:
<pre>
# -*- coding: cp1252 -*-</pre>
One exception to the first line rule is when the source code starts with a UNIX “shebang” line. In this
case, the encoding declaration should be added as the second line of the file. For example:
<pre>
#!/usr/bin/env python3
# -*- coding: cp1252 -*-</pre>
</p>
</section>
</main>
<div class="botgap"></div>
<footer>Content borrowed and slightly adapted from the wonderful <a href="https://www.python.org/">Python.org</a>
website © Python Software Foundation, by the author: Doug Wallace, FCC/Github/CodePen:
@broadsword-mo.
</footer>
</body>
* {
box-sizing: border-box;
}
html {
color: rgb(30, 30, 30);
font-family: Arial, Helvetica, sans-serif;
font-size: calc(12.5px + 0.7vw);
}
body {
background-color: cornsilk;
margin: 0;
}
#navbar {
position: fixed;
top: 0;
left: 0;
width: 25%;
max-width: 12rem;
height: 100%;
overflow-y: auto;
background-color: #d9e2e9;
box-shadow: inset -1px 0 10px rgb(151, 151, 151);
}
.nav-header {
font-size: 1.4rem;
text-align: center;
color: #ffdd53;
padding: 10px 10px;
margin-bottom: 1em;
background-color: #3a76a7;
border-bottom-right-radius: 0.5rem;
box-shadow: 0 4px 10px rgb(151, 151, 151);
}
ol {
list-style-type: none;
padding: 0;
margin: 0;
margin-top: 0.5em;
}
ol:last-child {
margin-bottom: 4em;
}
.nav-link {
display: block;
text-decoration: none;
text-align: center;
border-top: 1px solid rgb(240, 240, 240);
border-bottom: 1px solid rgb(126, 126, 126);
border-radius: 4px;
box-shadow: 0 5px 10px -5px rgb(0, 0, 0);
padding: 1em 0.5em;
margin: 0.5em 1em;
cursor: pointer;
transition: all 0.4s ease;
}
.nav-link:hover {
color: #ffdd53;
background-color: #3a76a7;
border-bottom: 1px solid transparent;
transform: scale(1.15);
}
main {
width: 65%;
margin: auto 12vmin auto 27vmax;
*margin-left: 27vmax;
text-align: justify;
}
h1 {
text-align: center;
font-family: candara, sans-serif;
}
h2 {
font-family: monospace, sans-serif;
text-decoration: underline;
font-weight: 500;
padding-top: 1.5em;
}
code {
background-color: #d3dce2;
font-size: 0.85rem;
}
pre {
font-size: 0.8rem;
margin: 1em;
padding: 0.5em 1em;
background-color: tan;
border: 1px solid brown;
border-radius: 3px;
}
.botgap {
height: 20rem;
}
footer {
text-align: center;
background-color: tan;
width: 65%;
margin-left: 28%;
padding: 2em;
}
@media screen and (max-width: 600px) {
#navbar {
position: absolute;
top: 0;
height: auto;
min-height: 20rem;
min-width: 100%;
border-bottom: 3px solid rgb(126, 126, 126);
}
.nav-header {
width: 100%;
margin-bottom: 0.5em;
}
ol {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ol:last-child {
margin-bottom: 0.5em;
}
.nav-link {
min-width: 7rem;
padding: 1.2em;
margin: 0.3em;
}
h1 {
margin-top: 24rem;
}
main {
width: 90%;
margin: auto;
}
footer {
width: 100%;
margin: auto;
}
}
Also see: Tab Triggers