Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ 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

Auto Save

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

              
                <!--<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>-->

<nav id="navbar">
  <header>
    <h1>HTML Documentation</h1>
  </header>
  <ul>
    <li><a href="#Introduction" class="nav-link">Introduction</a></li>
    <li><a href="#How_HTML_Works" class="nav-link">How HTML Works</a></li>
    <li><a href="#Overview_of_Tags" class="nav-link">Overview of Tags</a></li>
    <li><a href="#Structural_Setup" class="nav-link">Structural Setup</a></li>
    <li><a href="#Basic_Styling" class="nav-link">Basic Styling</a></li>
    <li><a href="#Lists" class="nav-link">Lists</a></li>
    <li><a href="#Input_and_Forms" class="nav-link">Input and Forms</a></li>
    <li><a href="#Tables" class="nav-link">Tables</a></li>
    <li><a href="#Advanced_Tags" class="nav-link">Advanced Tags</a></li>
    <li><a href="#References" class="nav-link">References</a></li>

  </ul>
</nav>

<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <p>HTML (<b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the
      World Wide Web.</p>
    <p>HTML does not have much in the form of <em>logic-based functionality</em> (such as changing text based on the date or time of day), but instead functions as the basic building blocks that browsers need in order to format content on the Internet.</p>
    <p>Basic HTML looks like the following:</p>
    <code>&lt;p&gt;Hello World. This is a sentence.&lt;/p&gt;</code>
  </section>

  <section class="main-section" id="How_HTML_Works">
    <header>How HTML Works</header>
    <p>Internet Browsers, such as Chrome, Internet Explorer, Edge, Firefox, Netscape, Safari, Opera, and others, process HTML in very similiar manner. They use the formatting of <a href="#Overview_of_Tags">tags</a> to understand how to process elements and
      objects of a webpage into a viewable format.</p>
    <p>Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), maintainer of both the
      HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.</p>
    <ul>
      <li>Files that end in <code>.html</code> or <code>.htm</code> are basic HTML files. They can be rendered in the browser.</li>
      <li>Files that end in <code>.php</code>, <code>.asp</code>, or the like are <em>backend files</em> and may contain server-specific code in them, along with HTML.</li>
      <li>Files that end in <code>.css</code> (Cascading Stylesheets) or <code>.js</code> (Javascript) work with HTML, but are not required. They may contain some HTML, but it will be based on styling rules or logic-based functions.</li>
    </ul>
  </section>

  <section class="main-section" id="Overview_of_Tags">
    <header>Overview of Tags</header>
    <p>HTML's core functionality is based on the use of <em>tags</em>. Tags are the litle bits of formatting that the browser understands to properly display the content. Most <strong>elements</strong> (items in the document) will be wrapped in opening and
      closing tags, such as below:</p>
    <code>&lt;p&gt;Hello World. This is a sentence.&lt;/p&gt;</code>
    <p>In the above example, the <code>&lt;p&gt;</code> is the opening tag (starting the element), and the <code>&lt;/p&gt;</code> is the closing tag (ending the element). Some elements that do not require a closing tag can be <em>self-closing</em>, such
      as below:</p>
    <code>&lt;img src="logo.png" alt="Company Logo" /&gt;</code>
    <p>There are about <strong>89 different HTML tags</strong> in the current version (HTML5). As a programmer, one is not required to know all types and versions of tags, but at least the most commonly-used 30 should be sufficient for most projects.</p>
  </section>

  <section class="main-section" id="Structural_Setup">
    <header>Structural Setup</header>
    <p>In HTML, content is organized in Sections, and all webpages should have the following format: Head and Body. While many pages may have navigation bars, footers, content headers, and the like, all webpages should contain a Head and Body, which are
      wrapped in an <code>&lt;html&gt;</code> tag.</p>
    <code>&lt;html&gt;<br/>
&nbsp;&nbsp;&lt;head&gt;<br/>
&nbsp;&nbsp;&lt;/head&gt;<br/>
<br/>
&nbsp;&nbsp;&lt;body&gt;<br/>
&nbsp;&nbsp;&lt;/body&gt;<br/>
 &lt;/html&gt;</code>
    <p>The <code>&lt;head&gt;</code> tag contains all of the information that should be processed or loaded <em>before</em> the main content/page is loaded. This can mean such things as title, character set, CSS stylesheets, Javascript libraries, Meta content
      (such as descriptions, preview images, authors, etc), and the language that the content should be loaded in.</p>
    <code>&nbsp;&lt;head lang="en"&gt;<br/>
&nbsp;&nbsp;&lt;title&gt;Title of the Webpage&lt;/title&gt;<br/>
&nbsp;&nbsp;&lt;meta charset="utf-8"/&gt;<br/>
&nbsp;&nbsp;&lt;link href="/css/style.css" rel="stylesheet"/&gt;<br/>
&nbsp;&nbsp;&lt;script src="/js/loadFunction.js"&gt;&lt;/script&gt;<br/>
&nbsp;&nbsp;&lt;meta name="author" content="John H. Zoidberg"&gt;<br/>
&nbsp;&lt;/head&gt;</code>
    <p>The <code>&lt;body&gt;</code> tag contains everything that should be visible to the end user (you, or the general public), such as articles, images, videos, etc. Unless it is specifically noted, all items that are in the <code>&lt;body&gt;</code>      will be visible.</p>
    <code>&nbsp;&lt;body&gt;<br/>
&nbsp;&nbsp;&lt;h1&gt;Introduction&lt;/h1&gt;<br/>
&nbsp;&nbsp;&lt;p&gt;Hello World&lt;/p&gt;<br/>
&nbsp;&nbsp;&lt;img src="/img/my_photo.jpg" alt="Me"/&gt;<br/>
&nbsp;&lt;/body&gt;</code>
    <p>The information in the <code>&lt;body&gt;</code> can be organized into <em>Section</em> using advanced semantic tags, which will be discussed in <a href="#Advanced_Tags">Advanced Tags</a>.</p>

  </section>

  <section class="main-section" id="Basic_Styling">
    <header>Basic Styling</header>
    <p>While HTML can be stylized with colors and animations in CSS, HTML does provide its own form of basic styling, such as <b>bold</b>, <i>italics</i>, and <u>underline</u>.</p>
    <p>Bold: <code>&lt;b&gt;This is Bold&lt;/b&gt;</code></p>
    <p>Italic: <code>&lt;i&gt;This is Italicized&lt;/i&gt;</code></p>
    <p>Underline: <code>&lt;u&gt;This is Underlined&lt;/u&gt;</code></p>
    <p>There are a few notes to keep in mind:</p>
    <ul>
      <li>While <code>&lt;b&gt;</code> may make content bolded, it does not work for Screen Readers. If something should be stated with importance, it should be wrapped in a <code>&lt;strong&gt;</code> tag, making sure the Screen Reader enunciates it correctly.</li>
      <li>The same goes for <code>&lt;i&gt;</code> tag; Screen Readers cannot process this correctly, so items that need to be italicized should be wrapped in a <code>&lt;em&gt;</code> (<strong>em</strong>phasized) tag.</li>
      <li>Both <code>&lt;b&gt;</code>/<code>&lt;strong&gt;</code> and <code>&lt;i&gt;</code>/<code>&lt;em&gt;</code> produce the same thing visually, it is important to note the difference between what should be spoken with importance and what shouldn't.</li>
    </ul>
  </section>

  <section class="main-section" id="Lists">
    <header>Lists</header>
    <p>Lists are possible with HTML in two basic formats: Ordered and Unordered (or "Bulleted"). Ordered lists are as stated: lists with numbers (or letters, based on formatting); Unordered lists are marked with bullets, based on the level of list.</p>
    <p><em><strong>IMPORTANT:</strong> "Ordered" only refers to the numbers of the items in the list, not automatically sorting the list. If the list contains "F, T, M", it will be listed as "F, T, M".</em></p>
    <p>All items inside an Ordered or Unordered list must be inside a <code>&lt;li&gt;</code> (list item) tag, which can contain lists in themselves.</p>
    <div class="overflow">
      <div class="w-50 float-left">
        <p>Code:</p>
        <code>&lt;ol&gt;<br/>
        &nbsp;&nbsp;&lt;li&gt;Ford&lt;/li&gt;<br/>
        &nbsp;&nbsp;&lt;li&gt;Telsa&lt;/li&gt;<br/>
        &nbsp;&nbsp;&lt;li&gt;Mazda&lt;/li&gt;<br/>
        &lt;ol&gt;</code>
      </div>
      <div class="w-50 float-left">
        <p>Produces:</p>
        <ol>
          <li>Ford</li>
          <li>Telsa</li>
          <li>Mazda</li>
        </ol>
      </div>
    </div>
    <p>Meanwhile, the Unordered list produces the same thing, but with bullets instead.</p>
    <div class="overflow">
      <div class="w-50 float-left">
        Code:
        <code>&lt;ul&gt;<br/>
        &nbsp;&nbsp;&lt;li&gt;Ford&lt;/li&gt;<br/>
        &nbsp;&nbsp;&lt;li&gt;Telsa&lt;/li&gt;<br/>
        &nbsp;&nbsp;&lt;li&gt;Mazda&lt;/li&gt;<br/>
        &lt;ul&gt;</code>
      </div>
      <div class="w-50 float-left">
        Produces:
        <ul>
          <li>Ford</li>
          <li>Telsa</li>
          <li>Mazda</li>
        </ul>
      </div>
    </div>
    <p><em>There are Data lists with <code>&lt;dl&gt;</code>, but those are rarely used.</em></p>
  </section>

  <section class="main-section" id="Input_and_Forms">
    <header>Input and Forms</header>
    <p>The method for handing input and forms with HTML is a bit different; this is the first portion that allows for something other than just a display of information. Information (like logins, orders, email signups, etc) is submitted via HTML forms, but
      then is processed on the server via backend systems (like PHP or ASP). However, basic forms can still be created in HTML.</p>
    <p>There are multiple versions of inputs that can be put into forms, but regardless, the form must be wrapped in a <code>&lt;form&gt;</code> tag. The properties (items inside the tag/element) that are recommended (but not required) are <code>method</code>      (how the information will be passed to the server) and <code>action</code> (where the information will be sent). (More information on this later.)</p>
    <p>Let's take a look at a sample form setup:</p>
    <div class="overflow">
      <div class="w-50 float-left">
        <p>Code:</p>
        &lt;form method="post" action="submitForm.php"&gt;<br/> &nbsp;&nbsp;&lt;label&gt;Name:&lt;/label&gt; &lt;input type="text" name="name" id="name"/&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&lt;label&gt;Email:&lt;/label&gt; &lt;input type="email" name="email"
        id="email"/&gt;&lt;br/&gt;
        <br/> &nbsp;&nbsp;&lt;label&gt;Phone:&lt;/label&gt; &lt;input type="text" name="phone" id="phone"/&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&lt;label&gt;Age:&lt;/label&gt; &lt;input type="number" name="age" id="age" max="125" min="0"/&gt;&lt;br/&gt;
        <br/> &nbsp;&nbsp;&lt;label&gt;Gender:&lt;/label&gt;
        <br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;select id="gender" name="gender"&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="m"&gt;Male&lt;/option&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="f"&gt;Female&lt;/option&gt;<br/>        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value="na"&gt;Non-Binary&lt;/option&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;/select&gt;&lt;br/&gt;
        <br/> &nbsp;&nbsp;&lt;label&gt;Favorite Color:&lt;/label&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input type="radio" name="color" value="red" /&gt; Red&lt;/label&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input type="radio"
        name="color" value="blue" /&gt; Blue&lt;/label&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input type="radio" name="color" value="green" /&gt; Green&lt;/label&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input
        type="radio" name="color" value="yellow" /&gt; Yellow&lt;/label&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&lt;label&gt;Favorite Animal:&lt;/label&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input type="checkbox" name="animal" value="cat" /&gt; Cat&lt;/label&gt;&lt;br/&gt;<br/>        &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input type="checkbox" name="animal" value="dog" /&gt; Dog&lt;/label&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input type="checkbox" name="animal" value="bird" /&gt; Bird&lt;/label&gt;&lt;br/&gt;<br/>        &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;&lt;input type="checkbox" name="animal" value="fish" /&gt; Fish&lt;/label&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&lt;label&gt;Comments:&lt;/label&gt;
        <br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea id="comments" name="comments"&gt;&lt;/textarea&gt;&lt;br/&gt;<br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="submit" value="Send Form"/&gt;<br/> &lt;/form&gt;
      </div>
      <div class="w-50 float-left">
        <p>Produces:</p>
        <form method="post" action="submitForm.php">
          <label>Name:</label> <input type="text" name="name" id="name" /><br/>
          <label>Email:</label> <input type="email" name="email" id="email" /><br/>
          <label>Phone:</label> <input type="text" name="phone" id="phone" /><br/>
          <label>Age:</label> <input type="number" name="age" id="age" max="125" min="0" /><br/>
          <label>Gender:</label>
          <select id="gender" name="gender">
        <option value="m">Male</option>
        <option value="f">Female</option>
        <option value="na">Non-Binary</option>
    </select><br/>
          <label>Favorite Color:</label>
          <label><input type="radio" name="color" value="red" /> Red</label><br/>
          <label><input type="radio" name="color" value="blue" /> Blue</label><br/>
          <label><input type="radio" name="color" value="green" /> Green</label><br/>
          <label><input type="radio" name="color" value="yellow" /> Yellow</label><br/>
          <label>Favorite Animal:</label>
          <label><input type="checkbox" name="animal" value="cat" /> Cat</label><br/>
          <label><input type="checkbox" name="animal" value="dog" /> Dog</label><br/>
          <label><input type="checkbox" name="animal" value="bird" /> Bird</label><br/>
          <label><input type="checkbox" name="animal" value="fish" /> Fish</label><br/>
          <label>Comments:</label>
          <textarea id="comments" name="comments"></textarea><br/>
          <input type="submit" value="Send Form" />
        </form>
      </div>
    </div>
    <p>All <code>form</code>s must have a <em>Submit</em> button in order to submit the information.</p>
    <p>There are many other form elements that can be used, such as "color", "date", and "file uploads", but those will not be discussed here.</p>
  </section>

  <section class="main-section" id="Tables">
    <header>Tables</header>
    <p>Data in HTML documents can be formatted in Tables. It is not recommended to design HTML pages with tables, but only to use tables to display data as necessary.</p>
    <p>All tables are wrapped with a <code>&lt;table&gt;</code> tag. Inside that, we have rows with <code>&lt;tr&gt;</code> (<b>t</b>able <b>r</b>ows). <em>Inside</em> that, we have <code>&lt;td&gt;</code> (<b>t</b>able <b>d</b>ata, also known as <em>cells</em>).
      <b>T</b>able <b>h</b>eaders (<code>&lt;th&gt;</code>) can be used to identify columns.</p>
    <p>The data in tables must be writte in HTML in a <em>vertical</em> format, which is processed in a <em>horizontal</em> format, so each row, then each table data cell is written and processed. Confusing? No worries, let's take a look:</p>

    <code>&lt;table&gt;<br/>
&nbsp;&nbsp;&lt;tr&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Name&lt;/th&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Age&lt;/th&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;th&gt;Color&lt;/th&gt;<br/>
&nbsp;&nbsp;&lt;/tr&gt;<br/>
&nbsp;&nbsp;&lt;tr&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Tom&lt;/td&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;45&lt;/td&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Blue&lt;/td&gt;<br/>
&nbsp;&nbsp;&lt;/tr&gt;<br/>
&nbsp;&nbsp;&lt;tr&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Susan&lt;/td&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;26&lt;/td&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Red&lt;/td&gt;<br/>
&nbsp;&nbsp;&lt;/tr&gt;<br/>
&nbsp;&nbsp;&lt;tr&gt;<br/>
&nbsp;&nbsp;&lt;td&gt;Robert&lt;/td&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;105&lt;/td&gt;<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Plaid&lt;/td&gt;<br/>
&nbsp;&nbsp;&lt;/tr&gt;<br/>
&lt;/table&gt;</code>
    <p>This produces the following:</p>
    <fieldset>
      <table border="1">
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Color</th>
        </tr>
        <tr>
          <td>Tom</td>
          <td>45</td>
          <td>Blue</td>
        </tr>
        <tr>
          <td>Susan</td>
          <td>26</td>
          <td>Red</td>
        </tr>
        <tr>
          <td>Robert</td>
          <td>105</td>
          <td>Plaid</td>
        </tr>
      </table>
    </fieldset>
    <p><em><small>The attribute of <code>border</code> has been added to this example to emphasize the cells.</small></em></p>
    </div>
    </div>
    <p>This make take some practice to get correct, especially when <code>colspan</code> and <code>rowspan</code> are in the mix.</p>
  </section>

  <section class="main-section" id="Advanced_Tags">
    <header>Advanced Tags</header>
    <p>In the recent years, HTML has evolved to include modern convinences, such as audio, video, responsive images, and media queries (a CSS technique for reformatting the page information on different sized screens). Prior to HTML5, including something
      like a video was very complicated, and required many lines of code to get correct. Now, just the inclusion of a <code>&lt;video&gt;</code> tag is most of the work.</p>
    <p>Let's take a look at the two most common used advanced tags: video and audio.</p>
    <div class="overflow">
      <div class="w-50 float-left"><code>
        &lt;video width="400" controls&gt;<br/> &nbsp;&nbsp;&lt;source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"&gt;<br/> &nbsp;&nbsp;&lt;source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"&gt;<br/> &nbsp;&nbsp;Your
        browser does not support HTML5 video.<br/> &lt;/video&gt;</code>
      </div>
      <div class="w-50 float-left">
        <video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
      </div>
    </div>
    <p><em><small>There are two formats included, based on what the browser can load. MP4 is the most common and popular, and OGG can be used as a backup.</small></em></p>
    <p>Now let's take a look at an example of <code>audio</code>:</p>
    <div class="overflow">
      <div class="w-50 float-left"><code>
        &lt;audio controls&gt;<br/> &nbsp;&nbsp;&lt;source src="https://www.w3schools.com/Html/horse.ogg" type="audio/ogg"&gt;<br/> &nbsp;&nbsp;&lt;source src="https://www.w3schools.com/Html/horse.mp3" type="audio/mpeg"&gt;<br/> &nbsp;&nbsp; &nbsp;&nbsp;Your
        browser does not support the audio element.<br/> &lt;/audio&gt;</code>
      </div>
      <div class="w-50 float-left">
        <audio controls>
  <source src="https://www.w3schools.com/Html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/Html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
      </div>
    </div>
    <p><em><small>There are two formats included, based on what the browser can load. MP3 is the most common and popular, and OGG can be used as a backup.</small></em></p>
  </section>

  <section class="main-section" id="References">
    <header>References</header>
    <p>More information about HTML can be found at the following links:</p>
    
    <ul>
      <li><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML [Wikipedia]</a></li>
      <li><a href="https://www.w3schools.com/html/" target="_blank">W3Schools</a></li>
      <li><a href="https://freecodecamp.com" target="_blank">FreeCodeCamp</a></li>
    </ul>
  </section> 

</main>
              
            
!

CSS

              
                div.overflow
  overflow: auto


#navbar
  position: fixed
  width: 20%
  min-width: 250px
  float: left
  h1
    font-size: 175%
    padding-left: 50px
    line-height: 3em
    margin-top: 20px
  ul
    margin: 0
    padding: 0
    list-style: none
    li
      line-height: 35px
      border-top: 1px #666 solid
      padding-left: 50px
      a
        color: #000
        display: block
        height: 100%
        &:hover
          text-decoration: none
  
#main-doc
  border-left: 5px #ccc solid
  width: 80%
  float: right
  padding: 20px
  section 
    code
      padding: 10px
      margin: 10px
      color: #000
      display: block
    ul, li, p
      code
        margin: auto 2px
        padding: 5px
        display: inline-block
    header
      font-size: 2em
    p, code, ul, ol
      padding: 10px
    p
      margin-bottom: 0
      padding-top: 5px
    ul, ol
      padding-left: 60px

@media screen and (max-width: 900)
  body
    background-color: #fc0
              
            
!

JS

              
                
              
            
!
999px

Console