Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

We have already kicked off Season Three of the CodePen Pattern Rodeo. Just for fun, we run one challenge a week for four weeks. The challenges are typically little design patterns that you get to play around with and build something unique. We actually hear from people all the time they like being provided ideas of things to build.

Last week the challenge was a chili recipe design. You can browse all the entries by viewing the tag for that week.

First Place goes to Codrin Pavel with his semantically accurate entry (56 hearts at judging time). It’s incredibly beautifully done, with clever typography, subtle design details, and an overall feeling of tightness. A worthy winner!

See the Pen Rodeo S03, Round 1 – Chili Recipe by Codrin Pavel (@zerospree) on CodePen.

Runner Up goes to Jan Rubio for his AngularJS powered entry (52 hearts at judging time). Jan’s entry has lovely design as well with lots of well-chosen icons and functionality. My favorite part is the ingredients-adjuster which changes the amounts based on how many people will be eating. I demand all online recipes implement that!

See the Pen Chili Recipe by Jan Rubio (@janrubio) on CodePen.

There are loads of interesting entries to check out, from Tex-Mex intenstity, to the flat design chill, from the accessibilty extras, to the animated adventure.

Week Two has kicked off and the challenge is to tackle the humble <hr> element. Can a boring ol’ thematic paragraph break be interesting? functional? beautiful?