CodeNewbie Community

Chris Jarvis
Chris Jarvis

Posted on • Originally published at dev.to

Codepen Shortcuts

I learned on some useful Codepen shortcuts so decided to share them.

Auto Complete Tags.

In the codepen HTML section if you type a tag and then TAB it auto completes the tag. Type div then hit the TAB key and it autocompletes with open and closing tags. Your cursor will be between the tags.

<div></div>
Enter fullscreen mode Exit fullscreen mode

Multiples

If you want multiple copies of a tag use an asterisk '*', type your tag followed by an asterisk and the number of items you want. div*5 and TAB gives you five empty div tags. No spaces keep it as a single unit of text, then click TAB. It should show you a preview of the tags.

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
Enter fullscreen mode Exit fullscreen mode

Classes

To add a class use dot notation. div.post and TAB will give you an div tag with the class name of post. Works with most tags. Type tag.classname and TAB. You can do this with other tags like, article or section. Just using div tags for sake of consistency.

<div class="post"></div>
Enter fullscreen mode Exit fullscreen mode

All together

Yes you can combine these for efficiency.
div.news*10 gives you 10 divs with the news class.

  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
  <div class="news"></div>
Enter fullscreen mode Exit fullscreen mode

codepen

CodePen is the best place to build, test, and discover front-end code. CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

That's all for this time. I hope you learned something.

I wrote this in response to @nickytonline What did you learn this week? thread. Follow it to see what other DEV members are learning.
Should I do a series on TIL, Time I Learned something?

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
joeglombek profile image
Joe Glombek

Codepen uses Emmet - so you can do even more complicated shortcuts like:
nav>ul>li*5>a.item-${Item $} šŸ¤Æ

Handy cheat-sheet
Codepen blog