DEV Community

Cover image for Code-it Notes: Create Your Own! ๐Ÿ“
Dan Harding
Dan Harding

Posted on


Code-it Notes: Create Your Own! ๐Ÿ“

A few weeks ago, I prototyped an idea to help me better understand the JavaScript methods I always seemed to forget.

The idea was simple. Create Post-it note like summaries that could be refered to whenever I needed them. An explaination on one side and an example on the other. I love MDN and W3Schools, but putting something into your own words always seems better when trying to decipher how a piece of code works.

Feedback from the original post was reassuringly positive, but as I'd created the notes in Google Slides, designing new topics soon became time consuming. Post-it notes are meant to be quick, and this certainly wasn't.

Simple, concise, and effective. Put these on the web please.๐Ÿ™ They deserve their own site. ๐Ÿ’ฏ

Following a few encouraging comments, it felt worthwhile to spend some time thinking about how to recreate the notes in a more flexible format. Releasing the Google Slides deck would be the easiest way, but the same problems would still exist. I'd also experimented with Instagram (see below), but images containing text have poor accessibility and don't allow for further editing (although swiping between each side worked really well). Back to the drawing board.

The solution came thanks to the markdown editor's use of Liquid tags. By building a template in CodePen and embedding it here on, anybody would be able to fork the pen, remix and share their creation back to the community (or anywhere else for that matter). What's more, the #explainlikeimfive hashtag seemed a perfect fit for what I was trying to achieve. Take a coding concept, boil it down to its simplest form and give an example. That's it! ๐Ÿ‘Œ

An added bonus is that you get to tinker with a bit of code whilst making a Code-it. There's CSS Grid, clip paths, variables, media queries, transitions, basic JavaScript and more. Don't like it? Rip it up and edit it until you do.

So, if you're interested in creating your own Code-it note, here are the instructions:

How to Create Your Own Code-it Note

  1. Fork the pen.
  2. Decide on a topic for your Code-it. Remember, the smaller the better (e.g. a single JavaScript method, CSS property etc).
  3. Research the topic and edit your pen.
  4. Once you've finished, write a new post, tag it with #explainlikeimfive and embed your new pen.
  5. Take pride in improving your own knowledge whilst also creating a community resource for other people to benefit from!

The pen includes a link to the FontAwesome CDN, so feel free to use their library of free icons to illustrate your creations.

If you have any feedback, or would like to offer suggestions about how the template code could be improved, I'd love to hear it.

Top comments (11)

tanushreec profile image
Tanushree Chakravarty

Hi Dan,

This is an amazing idea!
I was just thinking of something on these lines yesterday to help me out with my studies and I happened to see your post today! ๐Ÿ˜

Great initiative and looking forward to more of these!

helenanders26 profile image
Helen Anderson

This is such a great idea, they look fantastic :)

danielharding profile image
Dan Harding • Edited

Thanks Helen, that's very kind of you to say. ๐Ÿ˜Š

rohovdmytro profile image
Rohov Dmytro

You should do an Instagram for developers to swipe through some cool stuff :)

kumwendajj profile image
Joel Kumwenda • Edited

Very nice, learned something important.

jrohatiner profile image

Excellent! Thx for a great resource!

dilley_amanda profile image

I'm just starting out too, and all the JS I was learning was starting to jumble together. Thanks for the great idea, this will help me with me starting to real-world code as well๐Ÿ‘๐Ÿ‘

danielharding profile image
Dan Harding • Edited

It's such a buzz to get a comment like this, because it's exactly the reason I decided to start this side project. Thank you! ๐Ÿ˜

desi profile image

I love love love these, I had just been wanting to make some of my own flashcards, but this is better!

danielharding profile image
Dan Harding

Thanks Desi! I hope you find them useful. ๐Ÿ™Œ

bigd1979666 profile image

Could someone point mee to where I can learn how to fork this pen?