CodePen Embed - Codepen Shortcut List

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h1><i class="fa fa-diamond animated infinite jello" aria-hidden="true"></i> Editor Commands</h1>
        <hr>
        <ul>
          <li><strong>Ctrl-F</strong> Find</li>
          <li><strong>Ctrl-G</strong> Find Next</li>
          <li><strong>Ctrl-<i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>-G</strong> Find Previous</li>
          <li><strong>Ctrl-<i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>-/</strong> Block comment</li>
          <li><strong>Ctrl-F</strong> Find</li>
          <li><strong>Ctrl-J</strong> Join This & Next Line</li>
          <li><strong>Ctrl-[</strong> indent code right</li>
          <li><strong>Ctrl-]</strong> indent code left</li>
          <li><strong>Ctrl-/</strong> line comment</li>
        </ul>
      </div>
      <div class="col-md-4">
        <h1><i class="fa fa-rocket animated infinite pulse" aria-hidden="true"></i> Pen  Actions</h1>
        <hr>
        <ul>
          <li><strong>Ctrl-P</strong> Create new pen</li>
          <li><strong>Ctrl-S</strong> Save</li>
          <li><strong>Ctrl-I</strong> Info panel (if owned)</li>
          <li><strong>Ctrl-<i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>-5</strong> Re-Run-code</li>
        </ul>
      </div>
      <div class="col-md-4">
        <h1><i class="fa fa-bolt animated infinite tada" aria-hidden="true"></i> Misc</h1>
        <hr>
        <ul>
          <li><strong>Ctrl-<i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>-8</strong> Clear All Analyze Errors</li>
          <li><strong>Ctrl-<i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>-9</strong> open-this-dialog</li>
          <li><strong>Ctrl-<i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>-7</strong> Re-Run-preview</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h1><i class="fa fa-futbol-o animated infinite wobble" aria-hidden="true"></i> HTML Specific</h1>
        <hr>
        <ul>
          <li><strong>Ctrl-D</strong> Select Outward Matching Pair</li>
          <li><strong>Ctrl-<i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>-A</strong> Wrap With..</li>
          <li><strong>Ctrl - <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>- .</strong> Close Closest Open Tag</li>
        </ul>

      </div>
      <div class="col-md-4">
        <h1><i class="fa fa-heart animated infinite flash" aria-hidden="true"></i> CSS Specific</h1>
        <hr>
        <ul>
          <li><strong>Ctrl-D</strong> Select Outward Matching Pair</li>
          <li><strong>Ctrl-<i class="fa fa-long-arrow-up" aria-hidden="true"></i></strong> Increment Number 1</li>
          <li><strong>Ctrl-<i class="fa fa-long-arrow-down" aria-hidden="true"></i></strong> Decrement Number 1</li>
        </ul>
      </div>
      <div class="col-md-4">
        <img src="https://blog.codepen.io/wp-content/uploads/2012/06/White-Small.png" class="img-responsive" alt="Responsive image">
        <p> Our original tab triggers are deprecated. You used to be able to type, for example, <strong>for [TAB KEY]</strong> in the JavaScript editor and it would expand into a for loop. They were a little buggy, a little opinionated, and a little deep
          in tech debt, so we ultimately canned them. Emmet tab triggers work though! They are only for HTML, but they are very cool. Try typing something like <pre><code>header.main-header>nav>ul.site-nav>li*6></code></pre></p>

        <p>a into the HTML editor then pressing TAB. We'd like to offer more customizable tab triggers one day, so feel free to send us your thoughts on that.</p>
      </div>
    </div>
  </div>
<div class="spacer"></div>
</body>

  body{
    background-color:#222;
    padding-top:40px;
    font-family: 'Quattrocento Sans', sans-serif;
  }

h1{
  color:#fff;
}

.fa.fa-diamond{
  color:#f27d0c;
}

.fa.fa-rocket{
  color:#f27d0c;
}

.fa.fa-futbol-o{
  color:#f27d0c;
}

.fa.fa-heart{
  color:#f27d0c;
}

.fa.fa-bolt{
  color:#f27d0c;
}


strong{
  color:#f27d0c;
  font-size:20px;
}

li{
  color:#fff;
  font-size:18px;
}

p{
  color:#fff;
}

.spacer{
  padding-top:30px;
}

This Pen is owned by Basil Beltran on CodePen. It is a fork of this Pen.

See more by @basilbeltran on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.