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>

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>

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>

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>

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

Chris Jarvis | Fullstack Developer | Documentation

@jarvisscript

"CSS Color Gradients" by @JarvisScript #DEVCommunity dev.to/jarvisscript/c…
A few things you can do with CSS Gradients.

13:29 PM - 25 Apr 2022