Front end people, let’s get this party started! Just like last season we will run one challenge a week for four weeks. Each week has a specific challenge. Those specifics are announced at the beginning of each week. At the end of the week, the winners are of that challenge are announced and the new week’s challenge is presented.
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: May 16-23, 2013 Typeset a Poem
Make an interesting and beautiful design from the poem Hug O’War from the Shel Silverstein book Where the Sidewalk Ends.
I will not play at tug o’ war. I’d rather play at hug o’ war, Where everyone hugs Instead of tugs, Where everyone giggles And rolls on the rug, Where everyone kisses, And everyone grins, And everyone cuddles, And everyone wins.
You may only use typography and color. You may use any of the normal web fonts or custom web fonts via Google Fonts. Here is a simple example of that. No images.
Tag: rodeo-005 (see all)
Winner: #JoãoVictor-JV Runner up: Katy DeCorah
Week Two: May 23-30, 2013 A Pink <canvas>
The official color for breast cancer awareness is pink: #EA80B0. Let’s make that a hard constraint this week. Start with a totally black <canvas> and create a design using only pink. A fancy drawing, a mind bending animation, a social awareness masterpiece, do what you will. Just do it all on a canvas and with pink and black. Here’s a dumb little example to get you started, if you need it. Need to learn? MDN has some nice docs.
Tag: rodeo-006 (see all)
Winner: Bali Balo
Runner up: CrocoDillon
Week Three: May 30 – June 6, 2013 A Shopping Cart
Oh, the lowly shopping cart. An integral part of any online store, yet they are often handled quite stiffly and without grace. Let’s make the shopping cart the challenge in this week’s Pattern Rodeo!
Here are the minimum requirements:
- Thumbnail Image of Product
- Product Name
- Price of Product
- Quantity
- Way to alter quantity
- Total Price of Chosen Quantity
- Way to remove item(s)
As well as:
- Subtotal (price of all items together)
- Sales Tax (assume 5%)
- Shipping (assume some flat fee)
- Total (all together, total to be charged)
No particular requirements other than these.
Here’s a Pen covering those minimums in the blandest possible way. No need to design the entire checkout. Sure would be nice if it worked on screens large and small. Seeing some interaction and functionality mocked out would be nice too.
Tag: rodeo-007 (see all)
Winner: Sacha Schmid
Runner up: Olivia Cheng
Week Four: June 6 – 13, 2013 A Form of Fantasy
Styling forms can be cringe inducing for web designers. And for good reason, there is a ton of HTML involved. Lots of elements with lots of attributes and lots of wrapping elements to make things work and be semantic. The elements themselves have weird and unique display properties that differ cross-browser. Gettings things right is hard enough, let alone making it look great in the process. Add in cross-device and screen size design and it’s quite the undertaking. But designing forms can be very rewarding as well. Do a good job and it can become a great framework for your future forms to use. Do a good job and conversion on that form can go up. Do a good job and feel good that you’ve tackled a hard job and won. Form design will be the the final challenge this this season’s Pattern Rodeo.
Start with form on this Pen (a customized version of a Wufoo form) and go nuts, making it as beautiful and useable as you can. You can change the HTML, CSS, and add JavaScript as you please, just make sure the questions and choices are just as they are in the original form.
Tag: rodeo-008 (see all)
Winner: Allan Pope
Runner up: Three way tie! awesomephant, Pankaj Parashar, Timothy Miller
Voting
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.
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!