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 is an HTML comment. It's just here for PEOPLE to read. The computer ignores it.  -->

<body>
  <h1>Important Concepts</h1>
  
  <!-- I chose to put each lesson into it's own div. By putting a box around each lesson, the structure of the code reflects the structure of the lessons -->
  <div>
    <h2>Lesson 1: The Basics of the Web and HTML</h2>
    
    <!-- I also put each new concept inside of a div. This is concept 1 -->
    <div>
      <p>
        <b>How the Web Works</b>
      </p>
      <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-ud721/l-3508959201/e-48329854/m-48480496">This video</a>
        does a good job of explaining more.
      </p>
    </div>
    <!-- And this is where concept 1 ends. Note how the indentation level now matches up with where lesson 1 began.-->
    
    <!-- Now concept 2 begins... -->
    <div>
      <p>
        <b>HTML</b>
      </p>
      <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-ud721/l-3508959201/m-48724340">This video</a>
        gives a good overview.
      </p>
    </div>
    <div>
      <p>
        <b>Tags and Elements</b>
      </p>
      <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-ud721/l-3508959201/m-48723444">This video</a>
        explains the distinction well.
      </p>
    </div>
    <div>
      <p>
        <b>Why Computers are Stupid</b>
      </p>
      <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.
      </p>
    </div>
    <div>
      <p>
        <b>Inline vs Block Elements</b>
      </p>
      <p>
        HTML elements are either <b>inline</b> or <b>block</b>.
        Block elements form an "invisible box" around the
        content inside of them.
      </p>
    </div>
  </div>
  <!-- Notice that the indentation level is back to where it was when the <div> for Lesson 1 began. And now the div for lesson two begins... -->
  <div>
    <h2>Lesson 2: Creating a Structured Document with HTML</h2>
    <div>
      <p>
        <b>Developer Tools (in the Browser)</b>
      </p>
      <p>
        HTML elements are either <b>inline</b> or <b>block</b>.
        Block elements form an "invisible box" around the
        content inside of them.
      </p>
    </div>
    <div>
      <p>
        <b>The "tree-like structure" of HTML</b>
      </p>
      <p>
        The "tree-like structure" comes from the fact that HTML
        elements can have other elements inside of them. You can
        draw this relationship like a family tree. My mother had
        multiple children. So did her mother, and so on...
        <br>
        In a browser, this structure shows up as a series of
        nested boxes. There are boxes inside of boxes inside of
        boxes, and so on...
      </p>
    </div>
    <div>
      <p>
        <b>The relationship between indented HTML and boxes</b>
      </p>
      <p>
        When you read an HTML document as <em>text</em>, you see a wave
        of changing indentations going up and down the left side
        of the document. The more indented an element is, the more
        deeply nested it's corresponding "box" is.
      </p>
    </div>
    <div>
      <p>
        <b>Text Editors (for programming)</b>
      </p>
      <p>
        When writing code, programmers use special text editors (like
        Sublime Text for example). These editors make the programmer's
        life easier. For example, some text editors will automatically
        generate a closing HTML tag when you write an opening tag.
      </p>
    </div>
  </div>
</body>


            
          
!
999px
Close

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.

Go PRO

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

Console