cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


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.

              <!-- This line is an HTML comment. -->
<!-- Comments help PEOPLE read code. They are ignored by the computer. You should use comments to leave notes for yourself (and anyone else who might read your code later). -->

<!-- The <head> element contains information that won't be displayed on the page. -->
  <!-- The <title> element normally sets the name of the browser tab (but in this example codepen's title overrides the title I set) -->
  <title>Andy's Notes</title>

<!-- The <h1> tag stands for "heading 1". Heading tags go all the way up to <h6>. Lower numbered headings indicate content that is more important. -->
<h1>Important Concepts</h1>

<b>How the Web Works</b>
<p>The web is a bunch of computers that communicate
  with each other. When a person goes to a web
  page like www.google.com, their computer sends
  a <em>HTTP Request</em> to a <em>server</em>. The
  server finds the appropriate HTML document and sends
  it back to the user's computer where a <em>web browser</em>
  interprets the page and displays it on the user's screen.
  <a href="https://www.udacity.com/course/viewer#!/c-nd000/l-3873828673/e-48329854/m-48480496">This video</a>
  does a good job of explaining.

<p>HTML stands for <em>Hypertext Markup Language.</em> HTML documents form the majority of the
  content on the web. HTML documents contain <em>text content</em> which describes "what you see"
  and <em>markup</em> which describes "how it looks".
  <a href="https://www.udacity.com/course/viewer#!/c-nd000/l-3873828673/m-48724340"> This
  video</a> gives a good overview.

<b>Tags and Elements</b>
<p>HTML documents are made of HTML <b>elements</b>. When
  writing HTML, we tell browsers the type of each element by using HTML <b>tags</b>.
  <a href="https://www.udacity.com/course/viewer#!/c-nd000/l-3873828673/m-48723444">This video</a>
  explains the distinction well.

<b>Why Computers are Stupid</b>
<p>Computers are stupid because they interpret instructions
  literally. This makes them very unforgiving since a
  small mistake by a programmer can cause huge problems
  in a program.

<b>Inline vs Block Elements</b>
<p>HTML elements are either <b>inline</b> or <b>block</b>. Block
  elements form an "invisible box" around the content inside of


Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................