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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <nav id="navbar">
  <header>HTML Documentation</header>
    <ul>
      <li><a href="#What_is_HTML?" class="nav-link">What is HTML?</a></li>
      <li><a href="#Anatomy_of_an_HTML_element" class="nav-link">Anatomy of an HTML element</a></li>
      <li><a href="#Attributes" class="nav-link">Attributes</a></li>
      <li><a href="#Anatomy_of_an_HTML_document" class="nav-link">Anatomy of an HTML document</a></li>
      <li><a href="#HTML_comments" class="nav-link">HTML comments</a></li>
      
        <footer id="nav-footer">
    <p>The contents of this page have been acquired from <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started" target="_blank">MDN web docs</a>. This is just a sample of their documentation. To view the full documentation, including interactive examples and in-depth guides, visit their website.</p>
  </footer>
      
  </ul>
  

</nav>

<main id="main-doc">

    <section class="main-section" id="What_is_HTML?">
        <header>What is HTML?</header>
        <p>HTML (Hypertext Markup Language) is not a programming language; it is a markup language used to tell your browser how to structure the web pages you visit. It can be as complicated or as simple as the web developer wishes it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of the content to make it appear or act a certain way. The enclosing tags can make a bit of content into a hyperlink to link to another page on the web, italicize words, and so on.  For example, take the following line of content:</p>
        <code>
            <ol>
                <li>My cat is very grumpy</li>
            </ol>
        </code>
        <p>If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph  (<span class="highlight">&lt;p&gt;</span>) element:</p>
        <code>
            <ol>
                <li>&lt;p&gt; My cat is very grumpy &lt;/p&gt;</li>
            </ol>
        </code>
        <p class="note">Note: Tags in HTML are case-insensitive, i.e. they can be written in uppercase or lowercase. For example, a <span class="highlight">&lt;title&gt;</span> tag could be written as <span class="highlight">&lt;title&gt;</span>, <span class="highlight">&lt;TITLE&gt;</span>, <span class="highlight">&lt;Title&gt;</span>, <span class="highlight">&lt;TiTlE&gt;</span>, etc., and it will work fine. Best practice, however, is to write all tags in lowercase for consistency, readability, and other reasons.</p>
    </section>
  
    <section class="main-section" id="Anatomy_of_an_HTML_element">
        <header>Anatomy of an HTML element</header>
        <p>Let's explore our paragraph element a bit further.</p>
        <p>The main parts of our element are:</p>
        <ul>
            <li><strong>The opening tag</strong>: This consists of the name of the element (in this case, p), wrapped in opening and closing <strong>angle brackets</strong>. This states where the element begins or starts to take effect — in this case where the start of the paragraph is.</li>
            <li><strong>The closing tag</strong>: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the end of the paragraph is. Failing to include a closing tag is a common beginner error and can lead to strange results.</li>
            <li><strong>The content</strong>: This is the content of the element, which in this case is just text.</li>
            <li><strong>The element</strong>: The opening tag plus the closing tag plus the content equals the element.</li>
        </ul>
        <h2>Active learning: creating your first HTML element</h2>
        <p>Visit the <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started" target="_blank">original documentation</a> to try this interactive exercise.</p>
        <h2>Nesting elements</h2>
        <p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <span class="highlight">&lt;strong&gt;</span> element, which means that the word is to be strongly emphasized:</p>
        <code>
            <ol>
              <li>&lt;p&gt; My cat is <span class="codetag">&lt;strong&gt;</span>very<span class="codetag">&lt;/strong&gt;</span> grumpy &lt;/p&gt;</li>
            </ol>
        </code>
    </section>

    <section class="main-section" id="Attributes">
        <header>Attributes</header>
        <p>Elements can also have attributes. Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the <span class="highlight">class</span> attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.</p>
        <p>An attribute should have:</p>
        <ul>
            <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)</li>
            <li>The attribute name, followed by an equals sign.</li>
            <li>An attribute value, with opening and closing quote marks wrapped around it.</li>
        </ul>
        <h2>Boolean attributes</h2>
        <p>You'll sometimes see attributes written without values — this is perfectly allowed. These are called boolean attributes, and they can only have one value, which is generally the same as the attribute name. As an example, take the <span class="highlight">disabled</span> attribute, which you can assign to form input elements if you want them to be disabled (greyed out) so the user can't enter any data in them.</p>
        <code>
            <ol>
                <li>&lt;input <span class="codetag">type</span>="text" <span class="codetag">disabled</span>="disabled"&gt;</li>
            </ol>
        </code>
        <p>As shorthand, it is perfectly allowable to write this as follows (we've also included a non-disabled form input element for reference, to give you more of an idea what is going on):</p>
        <code>
            <ol>
                <li>&lt;input <span class="codetag">type</span>="text" <span class="codetag">disabled</span>&gt;</li>
                <li><br></li>
                <li>&lt;input <span class="codetag">type</span>="text"&gt;</li>
            </ol>
        </code>
  
    </section>

  <section class="main-section" id="Anatomy_of_an_HTML_document">
      <header>Anatomy of an HTML document</header>
    <p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p>
        <code>
        <ol>
          <li>&lt;!DOCTYPE html&gt;</li>
          <li>&lt;html&gt;</li>
          <li>&emsp;&emsp;&emsp;&lt;head&gt;</li>
          <li>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&lt;meta <span class="codetag">charset</span>="utf-8"&gt;</li>
          <li>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&lt;title&gt;My test page&lt;/title&gt;</li>
          <li>&emsp;&emsp;&emsp;&lt;/head&gt;</li>
          <li>&emsp;&emsp;&emsp;&lt;body&gt;</li>
          <li>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&lt;p&gt;This is my page&lt;/p&gt;</li>
          <li>&emsp;&emsp;&emsp;&lt;/body&gt;</li>
          <li>&lt;/html&gt;</li>
        </ol>
    </code>
  </section>

  <section class="main-section" id="HTML_comments">
      <header>HTML comments</header>
    <p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p>
    <p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <span class="highlight">&lt;!--</span> and <span class="highlight">--&gt;</span>, for example:</p>
        <code>
        <ol>
            <li>&lt;p&gt;I'm not inside a comment&lt;/p&gt;</li>
            <li><br></li>
            <li><span class="gray">&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</span></li>
        </ol>
    </code>
  </section>
  
</main>
<footer>
  
</footer>
              
            
!

CSS

              
                body, html {
  color: #231F20;
  font-family: 'Montserrat', sans-serif;
}

header, h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif;
}

header {
  font-size: 2.5em;
  color: #29B1FF;
}

section {
  margin-bottom: 30px;
  padding-right: 20px;
}

#navbar {
  min-width: 250px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  padding-left: 20px;
  border-right: 2px solid black;
  background-color: white;
}

#navbar header {
  overflow: hidden;
  height: 75px;
  text-align: center;
  padding: 10px 10px 30px 10px;
  font-size: 1.5em;
  color: #231F20;
}

#navbar ul {
  padding-left: 0px;
}

#navbar li {
  list-style: none;
  font-size: 1.1em;
  margin-bottom: 20px;
  position: relative;
  padding: 8px;
}

#nav-footer {
  font-size: 0.8em;
  padding: 8px;
}
  
#main-doc {
  position: absolute;
  left: 350px;
}

a {
  text-decoration: none;
  color: #FF9277;
  font-weight: 500;
}

ol {
  list-style-type: none;
}

ol > li {
  counter-increment: customlistcounter;
}

ol > li:before {
  content: counter(customlistcounter) " ";
  color: #29B1FF;
  float: left;
  width: 2.5em;
}

ol:first-child {
  counter-reset: customlistcounter;
}

.highlight {
  position: relative;
  background-color: #FDFFEA;
}

code {
  font-size: 1.1em;
  display: block;
  padding: 5px 0px;
  background-color: #EAFBFF;
  margin-left: 3%;
  border-left: 8px solid #29B1FF;
}

.note {
  display: block;
  padding: 10px 20px;
  margin: 20px 0px 20px 3%;
  border-left: 8px solid #FF9277;
}

h2 {
  margin-left: 3%;
  font-size: 1.3em;
  font-weight: 800;
  background-color: #29B1FF;
  color: white;
  padding: 5px;
}

.codetag {
  color: #29B1FF;
}

.gray {
  color: #a3a3a3;
}

/* Smaller Screens & Phones */
@media screen and (max-width: 768px) {
  
  body {
    overflow-x: hidden;
  }
  
  #navbar {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 250px;
    border-bottom: 2px solid black;
  }
  
  #navbar ul {
    height: 150px;
    width: 97%;
    overflow-y: scroll;
  }
  
  #navbar li {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  
  #navbar header {
    height: 40px;
  }
  
  #main-doc {
    display: block;
    left: 0px;
    top: 300px;
    padding: 20px;
    padding-right: 10px;
  }
  
}
              
            
!

JS

              
                
              
            
!
999px

Console