Codepen.io is a cool place on the web where one can create quick snippets of HTML, CSS, and JavaScript (a Pen) that you can try out new ideas, demonstrate your coding abilities, as a teaching tool, and much more.

Picked Pens

The staff at CodePen looks at the latest Public Pens added to the system and picks ones that they take a liking to. Here is the link to the page showing their picks. 😎

Listed below are Pens that I’ve made that have gotten Picked. Note that at the time I am writing this, there is no visible way to see if a Pen was picked without scrolling through the Picks page until you find it! Hopefully some day CodePen will add some sort of visual cue!

CodePen Challenges

CodePen has these fun Challenges on a regular basis. Usually there is an over-all theme for the current month. And for every week they’ll have a specific challenge that fits into that theme. Basically, you have the week to make 1 or more Pens and submit them for the challenge. They’re not handing out awards or anything, they’re just providing some ways for us all to hone our coding skills and share the results with the community.

My CodePen Challenge “Entries”:

Here is a list of all the Pens that I submitted to various CodePen Challenges:

  • Canvas Texture – Uses HTML5 Canvas. Move your mouse over it to see a parallax effect!
  • Monopoly Board – All HTML & CSS (No JavaScript)
  • A SMOOTH Shave with a SHARP Razor
  • Drawing in ‘A’s – B &W – I like this one 😎. Watch computer draw the CodePen logo in tiny wiggling letter ‘A’s and in black and white!
  • 100 Little Dots… Ah Ah Ah! – CSS Animation of dots, as well as an abortive attempt at playing audio (I want to come back to that later)! It is kind of a play off of “The Count” on Sesame Street (I love to count)!
  • Jedi Library – Uses Star Wars API to get information to display on the “monitor” in the “Jedi Library.”
  • Fruit and Veg – Animate emojis of falling and spinning Fruit and Vegetables.
  • Star Field – Uses HTML5 Canvas. You fly through a star field.
  • Fizz Buzz Challenge – The Fizz Buzz problem is a common challenge given to interviewees at a programming job interview.
  • Dan Bricklin – Inventor of the Spreadsheet – A tribute. Plays a muted-embedded YouTube video of Dan Bricklin giving a talk at TED in the background.
  • Triangles – uses dynamically built SVG to render a bunch of animated triangles.
  • Useful 404 Page Example – I try to make a more practical 404 page example than you would usually see when you get this error on a web site.
  • Sign Up Panel – My quick take of a Sign Up panel UI design.
  • Stargate Command – Doing CSS Animation with SVG doing a “gate dial.”

My CodePen Challenge Featured Pens:

At the end of the (week-long) challenge period, the staff at CodePen pick a hand-full of Pens out of the ones that were submitted and share them on that challenge page. On each of the pages below, scroll down a bit so you will be able to see the featured Pens.

These are the Pens that I made that were featured:

Other Stuff I Have on CodePen:

  • My User Profile on CodePen
  • My Pen Showcase – the User Profile shows this view by default.
  • My Public Pens (contains completed Pens as well as a mish-mash of personal experiments… in various stages of done-ness😜)
  • My “Popular” Pens
  • Other People’s Pens that I Loved
  • Other Pens of mine that I want to call out:
    • Locally Generate a File and Download it – This functionality has a lot of potential. To download a file, you don’t have to get it from the server! You can dynamically generate it locally in your browser using JavaScript and download it to your computer!
  • Blog Posts I have here – (CodePen allows regular users to have their own blog posts) … not much going on here at the moment! πŸ™„ Ahem…

Pens Showing Neumorphism Design Patterns

Neumorphism is a design pattern that is trending now. I really like this look! Here are some Pens that I found that use it:

  • Coming Soon…