Let’s do this thing, front end developer slash designer slash CodePen superfriends!
Like the past two seasons, we will run one challenge a week for four weeks. Each week has a specific challenge. Those specifics will be announced on Friday each week. Then the next Friday (around Noon Central Time in the US) the winners are of that challenge are announced and the new week’s challenge is presented.
Voting
You win by having the most hearts on your Pen.
To make this work and be a fun community event, you shouldn’t be too stingy with the hearts! View all the solutions and heart the ones you like. You can see all the entries by viewing the tag for the week. For example, week two.
What You Win
There are two winners each week.
Winner: The Pen with the most number of hearts each week wins a free PRO account for a year and we’ll mail them a free CodePen swag bag, including a T-Shirt, pen (literally), and stickers.
Runner up: The second place winner will get a swag bag. No truckloads of cash, sorry! This is mostly just for fun and a way for us to provide ideas on things to build. There may occasionally be special prizes associated with a given week. If you’d like to sponsor a week, get in touch.
Week One: Chili Recipe
Finished – March 7-14, 2014
The Challenge: design a great looking (and useful, and fun!) chili recipe web page. You need only the elements in Chris’ ugly example:
- Title
- Description
- Ingredients
- Directions
- Photo(s)
Feel free to change the text, but make it essentially like the example.
Tag: rodeo-009
The Winners
First Place goes to Codrin Pavel with his semantically accurate entry (56 hearts at judging time).
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).
See the Pen Chili Recipe by Jan Rubio (@janrubio) on CodePen.
Congrats!
Week Two: The Humble <hr>
Finished – March 14-21, 2014
The <hr> element is a “horizontal rule” and it exists specifically to represent a paragraph-level thematic break. Imagine a couple paragraphs of text that are related and then a couple more that are onto a new topic, but not enough to warrant, say, a new header or a new <section>. A horizontal rule is often the perfect visual break needed in that situation.
The default styling for an <hr> is a little sad. Instead of just being a straight line, it’s 2px tall (caused by 1px border on all sides) and kinda faux-chiseled looking due to inset border-style.
Surely we can improve upon that! Do you subtle and refined? Intense and garish? Stylized and fancy? Sophisticated and strong? You do you! Feel free to use whatever kind of colors and typography you want, but keep the demo to a single header and a single column of text with a few <hr>s in there.
Tag: rodeo-010
The Winners
First Place goes to Travis with his progress bar on hover entry (33 hearts at judging time).
becomes progress bar on hover by Travis (
@trhino) on CodePen.
Runner Up goes to Bilal Ayub for his craft and beauty entry (27 hearts at judging time).
See the Pen A bit of elegance by Bilal Ayub (@hackthevoid) on CodePen.
Congrats!
Week Three: Sovog the Robot
Finished – March 21 – 28
Get it?! Like Sogov, S.v.g, SVG… Anyway, Sovog is built from inline <svg>. Doesn’t ol’ Sovog look bored? Maybe he needs some new scenery. Maybe he needs to move around a little bit. Maybe he needs a buddy. Maybe he needs to become incorporated as the mascot into another page. Maybe he needs a new outfit. Maybe he is a she?! The challenge was to do something fun and interesting with Sovog.
Tag: rodeo-011
The Winners
First Place goes to Matthew Copeland with his Daft Punk – Get Lucky entry (64 hearts at judging time).
See the Pen Get Lucky by matthewcopeland (@matthewcopeland) on CodePen.
Runner Up goes to Marco Barría for his 404 – Configuration Problem entry (61 hearts at judging time).
See the Pen Sovog 404 page by Marco Barría (@fixcl) on CodePen.
Congrats!
Week Four: The Fantastic Movie Script
Finished – March 28 – April 4
Movie scripts have funny typography, don’t they? They were originally written on typewriters, so it’s understandable the typographic choices were limited, but today in digital format they still retain the look. Look at this gross thing. Just a giant <pre> block with some bolded words.
Certainly you can do better, right? How about some semantics in there? Can the typography be classed up a bit? Perhaps we could add some usability by differentiating the characters and scenery notes? Maybe you want to go interpretive and bring the scenes to life? The challenge: do something interesting with the first 5 scenes of Fantastic Mr. Fox, as shown in the example Pen above (feel free to fork it).
We’d encourage you to improve the typography. Typekit has a free plan you could use to play around with web typography here on CodePen. After our Boomerang update, Typekit (and any other font service) works great here on CodePen, so we’re excited to see more playing around with fonts.
As a juicy bonus, Adobe will give both the first place and runner up winners a free year of Creative Cloud, meaning access to all the most current and best design software there is, including a Portfolio plan on Typekit so you can bring custom web typography to your other sites. Winners also get the normal CodePen prizes.
Tag: rodeo-012 – Make sure you give your entries that exact tag.
The Winners
There was a tie for first!
One goes to Colin O. Below with his illustrated sliding speech bubbles entry (27 hearts at judging time).
See the Pen Fantastic Mr. Fox by Colin O. Below (@colivelow) on CodePen.
The other goes to Amelia Wattenberger for her scene-progress reveal entry (also 27 hearts at time of judging).
See the Pen The Fantastic Mr Fox by Amelia Wattenberger (@wattenberger) on CodePen.
Congrats!
Rules
- You can submit (by tagging) as many Pens as you like as long as they fit that weeks theme.
- The creation date of the Pen should be past the start date of the weekly challenge. In other words, make something new don’t recycle something old.
- If you win and you already have a PRO account, we’ll add a year to it at no cost.
- If you figure out some weird way to cheat, you won’t win.
- We won’t promote any Pens involved with the Rodeo until that challenge is over, as to not give anyone an unfair advantage.
- Remember this is just for fun, if you don’t like it, don’t participate.
Have fun!