Group Design Project: Rate Three Candy Bars In Order

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Last time we did a group design project, we did a list with functions and we got lots of interesting ideas. Then the other day I linked to a video of Ryan Singer, a tiny part of which inspired the idea of radio buttons with 2-way exclusivity. Then reader Erik Edhagen suggested I do more of those group design project things… so here we are!

Your Mission

Create an interface where a user is able to rate three candy bars (a Snickers, a Twix, and a Butterfinger) in the order of how much they like them (1st, 2nd, 3rd).

You don’t need to save the data. You don’t need to build an entire web page around it. Just the part where you do the rating.

Create your demo using Tinkerbin and post the link (and any notes/comments you might have) in the comments below. If you want to use a JS library in Tinkerbin you gotta link it up in the HTML section.

There are no other rules. Get creative.


I’ll pick three users who I think did a particularly good job and send them a CSS-Tricks T-Shirt.

Let’s say about a week. I’ll close the comments on this post on Tuesday, October 25th and pick the winners. Follow conversation will happen in some kind of roundup post.


Just to be clear, I have no particular need for this. I’m not trying to get “free work” out of you.

I think this is just a fun and useful exercise for practicing design. You learn while thinking through how you think it’s best to approach this. You learn while creating it. You learn while seeing other people’s approaches. You learn dissecting and discussing all the approaches.