CSS Off

The Contest

  • Convert a .psd into HTML making use of web standards, in 24 hours or less. Think SimpleQuiz, except it's the final exam.

The Mission

  • To actively engage the web community in web standards with an emphasis on valid, semantic markup
  • To emphasize good web design as an integral part of the development process
  • To use the contest as an opportunity to teach

Other Stuff

Get the April 5, 2008 Files

Download the psd file now.

This contest lasts for 24 hours, starting from 1 minute past midnight of April 5 and lasting until April 6 same time, Central Time (as in Memphis, TN USA).

This time, the prize is $30 for the winner’s wallet or $100 for the winner’s choice of charity.

Details below.

Creepy Critters Thumbnail

Special Considerations for this Contest

In addition to the usual criteria (clean code, organization, validation), we’re looking for proper implementation of microformats (hCard and hCalendar). Also, we’re not going to hold IE6 to the same standards of rendering as other browsers. That means, for IE6, we expect the content to be readable and accessible, and that’s about it.

During the contest

  • If you have questions, we don’t have answers.
  • We won’t help you.
  • You can help each other if you want.
  • Have fun!

Submitting your entry

  • Send the entry to cssoff@gmail.com before the deadline
  • Include the word “critters” in the subject
  • In the body, include your name(s), any notes we should be aware of when judging, and in case you win, your contact information (if your originating email address isn’t good enough).
  • Attach a single zip file of your html/css/images/et cetera
  • Optional: Include winner information (see If You Win below).

We’re going by the date/time stamp on Gmail, and we’re strict — if it’s one second over the deadline, we’re not counting it.

After the contest

Even with our slate of judges, evaluating markup takes time. As soon as we’ve got an idea of how long it will take us to determine the winner, we’ll let you know.

If you win

If you win, we’ll notify you by email, and we’d like to feature you on our site, including:

  • short bio about you
  • where you’re from
  • what site you want to promote
  • a picture of yourself
  • what reward you’ve chosen ($30 cash vs. $100 charitable donation); if charitable donation, which charity.
  • yada yada yada

If you have the time, feel free to attach this information to your entry email, but this is not at all required.

Commentary

  1. I will try this time… count me in!

    If im running late.. I can allways use a little help from http://mail.google.com/mail/help/customtime/
    :)

    { posted by Pablo Impallari on 5 April at 12:10 am }

  2. The font files would have been nice…

    { posted by Derek on 5 April at 1:20 am }

  3. Fun fun! Here we go!

    { posted by Chris Coyier on 5 April at 1:50 am }

  4. Too bad I’ve got a busy week regarding school coming, else I’d give it a try.

    I do have to say it’s a beautiful design.

    { posted by Vincent on 5 April at 3:03 am }

  5. If I didn’t have to go to sleep in a few I would finish this thing tonight. Well, almost finished but want it to be polished for submission so I’ll get it done in the morning. Good luck everyone.

    { posted by Derek on 5 April at 4:23 am }

  6. Does anybody own the font Helvetica Rounded Bold Condensed? I’m itching to fix the spelling mistake in “Satisfaction Guaranteed” but I don’t have the font!

    { posted by Alia on 5 April at 6:47 am }

  7. Just about done here. Have to do some clean-up and fixes afterwards though.

    { posted by Owen Smith on 5 April at 10:29 am }

  8. Alia,

    http://www.lannedandgaming.com/satisfaction.png

    It’s not quite the font, but it’s fixed and might save you some work.

    Good Luck!

    { posted by Owen Smith on 5 April at 10:35 am }

  9. Done in 4 hours !

    { posted by Neovov on 5 April at 11:30 am }

  10. Me too….

    { posted by Pablo Impallari on 5 April at 11:31 am }

  11. Posting and trading fonts is illegal.

    { posted by GS on 5 April at 11:36 am }

  12. How is it fair that they provide us with a spelling mistake, and yet we aren’t given the means (the font) of fixing it? I am considering not using image replacement for that part, but I am worried that I would be disqualified for it.

    I wish my luck to all other competitors as well….

    { posted by Timothy Armstrong on 5 April at 11:44 am }

  13. Ok, I’m done.
    Now I’m waiting for results.

    { posted by Michał Mech on 5 April at 12:20 pm }

  14. Going to give it a shot, hope so!

    { posted by Austin on 5 April at 1:45 pm }

  15. Sent mine in, there’s some things i didn’t finish up, and I kinda forgot about checking if the hCard and hCalender, but oh well.

    Good luck to the rest of you!

    { posted by Owen Smith on 5 April at 1:49 pm }

  16. Guys, in order to deal with the spelling error, I just ended up futzing with the U and the A in photoshop. Switched ‘em. It isn’t pixel-perfect, but it’s pretty darn close.

    { posted by Alia on 5 April at 2:01 pm }

  17. Took me around 4 hours. I think I spent more time in Photoshop than Notepad++.

    I didn’t bother with the broken fonts. I’m just doing this for fun and to see how other people approach marking up the same content.

    { posted by John McGonegal on 5 April at 2:09 pm }

  18. I just emailded my entry.
    Enjoyed a lot while doing it.
    Nice to see a lot of people joining in.

    Forget my little english, i am from Argentina

    { posted by Pablo Impallari on 5 April at 3:38 pm }

  19. submitted mine at 2:44PM EST. Looking forward to seeing how everyone else did.

    { posted by Nathan Chase on 5 April at 6:42 pm }

  20. Just a request for the next psd…. please don’t leave the guide lines in because there are people like me who don’t really like/use them and would rather do the whole design by sight

    Thanks and good luck to the other entries

    { posted by Chris Vincent on 5 April at 7:23 pm }

  21. Just sent mine. I didn’t worry about the misspelling either. This is great, looks like a lot of people are participating this time.

    { posted by Trevor Davis on 5 April at 8:06 pm }

  22. I just submitted mine. It’s about 3:00 am Paris Time :)
    Good luck everybody !

    { posted by Sébastien on 5 April at 8:11 pm }

  23. Chris, why don’t you just view->show->guides and turn them off.

    { posted by Derek on 5 April at 8:18 pm }

  24. I just submitted my work. There were some good challenges, but thought it was fair. Good luck guys and gals.

    { posted by Derek on 5 April at 8:31 pm }

  25. @Derek
    Sure, it’s easy enough to remove them, but it’s not really fun to open up the psd for the first time and see a bunch of bright coloured lines instead of focusing on the design

    { posted by Chris Vincent on 5 April at 9:14 pm }

  26. My entry is in. I spent around 17 hours on it, mostly refining small details such as spelling errors.

    Hat’s off to Brad, though, his design is gorgeous. I love the little bugs. I wish I could draw like that…

    Anyway, it has been a great contest. I will post a link to an online version of my site after the contest is over, like I always do, and I hope many of you will do the same. The judging takes weeks, so it is nice to have some instant gratification. :)

    { posted by Joseph Kotvas on 5 April at 10:19 pm }

  27. I’ll post mine tomorrow! But now it’s time for sleep…

    { posted by Alia on 5 April at 11:59 pm }

  28. Best of luck to all - here’s my submitted entry online -> http://www.nathanchase.com/critters/

    { posted by Nathan Chase on 6 April at 12:01 am }

  29. Here is my entry http://cssoff.usefulzero.com/

    { posted by John McGonegal on 6 April at 12:10 am }

  30. This is a great contest! Made me think a bit about how to approach projects.

    Will the judges scores be posted?

    { posted by Paul Stokes on 6 April at 12:14 am }

  31. Ha! Love the moving roach John - nice little addition.

    { posted by Nathan Chase on 6 April at 12:17 am }

  32. Here is mine…

    http://sandbox.valendesigns.com/critters/

    This was fun. I’m gonna participate again for sure. The Map was a slight challenge trying to come up with a way to make that work without too large of an image. Overall went smooth though.

    { posted by Derek on 6 April at 12:57 am }

  33. Here’s mine… not sure how it’s going to judge to the rest but i made my shot anyways

    www.chris-vincent.com/cssoff/critters

    { posted by Chris Vincent on 6 April at 1:08 am }

  34. http://www.lannedandgaming.com/blog

    It’s by no means the best one out there, and definitely doesn’t employ the best way to do some things. I got lazy with the map and just did a huge image. I hadn’t considered that the map could possibly be content (dynamic anyone?); however, if that were the case than the image would have to be the map only, and the roaches and other design a separate image.

    In the end I realize there’s plenty I missed, didn’t do, or could’ve done better.

    { posted by Owen Smith on 6 April at 1:11 am }

  35. www.lannedandgaming.com/cssoff

    Uhm.. my bad?

    { posted by Owen Smith on 6 April at 1:17 am }

  36. There is mine : www.thekorp.com/creepy-critters/
    Good luck everybody !

    { posted by Neovov on 6 April at 7:33 am }

  37. Well I guess since everyone else is posting theirs, http://trevordavis.net/critters/

    { posted by Trevor Davis on 6 April at 9:00 am }

  38. […] As fate would have it, I happened to be browsing my feeds late Friday night and saw the post pop up that the files were ready. I figured I’d at least download the PSD and check it out. Of […]

    { posted by CSS Off Entry - CSS-Tricks on 6 April at 9:14 am }

  39. Don’t want do be the last showing off:
    http://samisdat.org/files/cssoff/

    It was raining yesterday in Germany, so the perfect afternoon to do some senseless stuff…

    While the .psd by Brad Colbow is really well done, it was just fun to do the markup

    { posted by Bastian on 6 April at 10:44 am }

  40. This was a fun exercise. Here’s mine: http://crewinghouse.com/cssoff

    I couldn’t get png transparency to work in IE6, and I didn’t have time to learn about hCard and hCalendar. (but now I have)

    I look forward to the next one.

    { posted by David K on 6 April at 1:57 pm }

  41. Here’s mine:

    http://jose.kotvas.efata.org/cssoff/critters/

    { posted by Joseph Kotvas on 6 April at 2:11 pm }

  42. Here is mine:
    http://www.pabloimpallari.com.ar/clientes/critters/

    Why nobody used a dl for the pests section?

    { posted by Pablo Impallari on 6 April at 11:41 pm }

  43. Okay, I’m rested now… :-)

    www.aliglia.com/cssoff

    This was so much fun! Great job, everyone!

    { posted by Alia on 7 April at 10:31 am }

  44. And here is mine:
    http://hem.bredband.net/b246651/creepycritters/

    Next time I’ll begin earlier. It needs some more polish.. :/

    { posted by Peter Nilsson on 7 April at 5:11 pm }

  45. I have opened the source psd and I have found an only one level.
    I have opened the source with fireworks and have found all the levels but with different dispositions and colors… hidden levels etc.
    For the next one context it is possible to have the file psd on more levels?
    I have not participated for the aforesaid reason…
    Best regards
    Floyd
    P.S. I apologize for my English is not perfect

    { posted by Floyd on 10 April at 5:48 am }

  46. […] meant to post this a little while ago, but I participated in a CSS Off about 2 weeks […]

    { posted by Trevor Davis | Blog | Creepy Critters CSS Off on 16 April at 1:04 pm }

  47. It looks like a very interesting contest. But the skeptical side of me is wondering if you are taking the best completed page and selling it to a client.

    { posted by P Kayne on 28 April at 9:38 pm }

  48. Sorry for the last comment, I took leave of my senses for a bit

    { posted by P Kayne on 28 April at 9:43 pm }

Leave a Reply