We've always had Zen Coding on CodePen, which allows for some HTML authoring convenience. Like type div[TAB] and get <div></div> with the cursor right inside. Or type ul>li*5[TAB] and that will expand into an ordered list with five list items inside.

Zen Coding is an old project though and has since evolved into Emmet, which adds a bunch of new stuff including CSS abbreviations.

Here's some things to try to get you feet wet.

In the HTML area, try this (remember to hit TAB after):

nav>ul>li*5>a.item-${Item $}

The * indicates a multiplier, so you'll give five list items there. The dollar sign is an integer that increments by one for each item. So you'll get:

In the CSS area, you can be pretty "fuzzy" (their word) about how you type in abbreviations and you'll get the closest match. Here's some examples:

w25             ->  width: 25px;
w80p            ->  width: 80%;
oh              ->  overflow: hidden;
p10em!          ->  padding: 10em !important;
db              ->  display: block;
fr              ->  float: right;
flri            ->  float: right;

There is tons more, explore their documentation to see all you get.

We also support some of our own custom tab triggers for stubbing out content and other commonly authored bits.