The Great CSS Off & Giveaway

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Alrighty folks, here’s the deal. I have a whole bunch of stuff I want to give away. Mostly books on web design and development. I’ve been deep in thought trying to figure out the best way to give them all away. I definitely didn’t want to spam Twitter. I also didn’t want to do a “just leave a comment” deal because I think that’s too easy and just leaves behind a sea of junk comments.

I’ve settled on a good idea I think: a CSS Off! I’m borrowing the name and idea from JD Graffam and Tony White who as far as I know did the original CSS OFF. They haven’t done it in nearly two years now though, so I think toe-stepping territory is clear. The idea is that you get a Photoshop (.psd) file and it’s your job to turn it into HTML and CSS. Those who do the best job, win. But… there is a bit more to it than that. Read on to get the whole scoop.

How This Is Going Down

At the bottom of this article, you can download the Photoshop (.psd) file. Obviously you can open this with Adobe Photoshop. But you don’t have to have Photoshop to compete in this contest. One alternative is using GIMP, which is like Photoshop but open source and free. If you Google around, you can find other programs that can open Photoshop files on your platform. We will also provide a flat JPG version. It will be more challenging to convert from a flat file, but doable.

Once you have it open, you do whatever you gotta do to turn the design into an HTML and CSS design. Chop it up, slice it, convert it, whatever you want to call it. You have the design, now make it into a real web page.

Two Ways to Enter, Two Ways to Win

You might be saying to yourself. AWWWWW — that’s too hard! The reason I WANT those books is so that I can LEARN how to build websites like that. Indeed you are right. A contest like this where the best work wins is a rich-getting-richer scenario. So how this is going to work is that the best four entries will be the winning developers. Then those four winners will each pick two other winners from the comments on this post. Which is the second way to enter this contest: you may leave a comment on this post with your name, real email address (so we can contact you if you win), and one paragraph describing one thing you love about web design. Let’s recap:

Two ways to win:

  • Experienced developers – Convert the design and submit your entry. You’ll get first pick of the prizes and you choose the other winners.
  • Beginner developers – Comment on this post. Write one paragraph describing one thing you love about web design.

The winning developers will have their names and websites published. They will be picking the winners based on whatever criteria they want. First to comment? Random? Funniest? Most sincere? It’s up to them. Please only enter the contest one way or the other.

There will be 12 winners. 4 winning developers, 8 winning commenters.

Details / Rules about Design Conversion

  • You only need to create the one page from the mockup. Sub pages are totally optional and no bonus credit given for creating them.
  • Everything present in the design mockup must be in your finished design, at a minimum. If you wish, you can expand upon what is there. Just remember you are being judged on anything that you do. Adding extras may be the thing that sets your design above and beyond, or it could sink it and you would have been better off leaving it out.
  • Rollover states are not provided for anything, use your creativity.
  • Designs do not have to look the same in every browser. However, the design should be perfectly usable in any browser, with no areas looking as if they were a mistake.
  • After judging is complete, all entries will be hosted online and available to browse.
  • Remember low file size is an attribute of quality design. We shouldn’t be downloading 2 MB ZIP files!
  • The mockup only uses Helvetica and Georgia which everyone should have. There is a little Helvetica Neue in the site title and article title, how you want to handle that is up to you.
  • The index.html file is required, and you should use CSS for the design. Any other technology you chose to employ is completely up to you.
  • You have one week, staring right now! Submissions will close on February 17th, 2010 at 12 noon CST.

Judging

Entries are judged up on quality, not time of entry, so feel free to hang on to your design until the end of the contest (but don’t be late!). Judging will be done by myself and Doug Neiner. We will be testing for the criteria outlined above, but also many other undisclosed/intangible factors (e.g. the cleanliness and craftsmanship of your code).

Your design needs to accomodate the latest versions of Firefox (3.6), Safari (4), Chrome (4), Opera (10), and IE (8). Because this is for skilled developers, and we intend this to be a challenge, we will also be testing IE 7 and IE 6. The design does not need to be exact for these older browsers. How you choose to degrade the design is at your discretion.

Entry Submission

You may submit your entries at the CSS Off Submission Entry Form. All entries must be in by February 17th, 2010 at 12:00 noon CST. Requirements:

  • Submit one .ZIP or .RAR file.
  • Use your real name and real email address (will not be published, we just need to contact you if you win)
  • The submitted file extracts into a folder named “CSS Off Entry – YOUR NAME”
  • This folder can contain whatever you need to do accomplish the design, but it must contain an index.html file.
  • We should be able to open that index.html file in a browser locally and see your completed design.

Winning

We’ll probably need at least a couple of weeks to go through the entries, so no particular promises in terms of when the winners will be announced, but we’ll try and keep it under a month. As soon as they are chosen, we’ll email the winning developers so they can pick their two winners. Then prizes will be chosen in this order:

1st place developer
– Their chosen commenter #1
– Their chosen commenter #2
2nd place developer
– Their chosen commenter #1
– Their chosen commenter #2
etc.

Winners will chose which prize they want, it will be crossed off the list, and then the next person chooses. People will need to chose within 24 hours or we’ll need to move on to the next choice otherwise it will take far too long. After all winners are chosen I’ll ship all the prizes at once.

The Prizes

12 winners, 24 prizes. The top winning “team” picks their choices and we work our way down, crossing off things as we go. Everybody gets to pick two things. Last person in the list gets the last two things available. Please know that most of these products are used. They are things I’ve used or books that I’ve read. Some of them have a little ragged corners on the cover, stuff like that. They have served me well, so I’m passing them along to others that could use them.

The most important prize, like the contestants of Iron Chef, you win pride, in knowing that you rock at converting web designs. We’ll be publishing the four developer winners, their winning entry, and a link to their real websites.

Also, for each mockup conversion entry that meets the base criteria, I’m going to donate $3 to a Haiti benefit program of my choice. So even if you enter and don’t win, some good will come of it.

Smashing Book

by Many Authors!

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.

CSS Mastery

by Andy Budd

The Internet abounds with information on CSS based design. However it’s spread across a large and disparate group of sites and can be very difficult to find. The purpose of this book is to pull all this information together in one place, thus creating a definitive guide to modern CSS based techniques. The book can be read cover to cover, with each chapter building on the previous one. However it can equally be used as a reference book, dipping into each chapter or technique to help solve specific problems.

Flexible Web Design

by Zoe Gillenwater

Liquid or fluid layouts change width based on the user’s unique device viewing size. Elastic layouts change width based on the user’s unique text size. Both types of flexible design offer clear benefits to users, who can view sites at sizes that work for their needs, but they can pose challenges to web designers who are used to perfect pixel control. Still, when planned and constructed correctly, flexible layouts can be visually appealing and reasonably easy to build. And the concepts and techniques of flexible web design can benefit fixed-width CSS designs too, as designers learn how to design for the inherent flexibility of the web, instead of the rigid qualities of print media or grid-based layouts.

EyeTV Hybrid

EyeTV Hybrid turns your Mac into the world’s most affordable combination flat-screen HDTV and DVR. Compact and versatile, EyeTV Hybrid is a Mac TV tuner stick that receives crystal clear HDTV with an antenna, Clear QAM unencrypted digital cable, and basic analog cable TV, and FM radio.

I used it, worked great, just don’t use it anymore.

Sams Teach Yourself Drupal in 24 Hours

by Jesse Feiler

Sams Teach Yourself Drupal in 24 Hours helps you get up to speed with Drupal quickly. Whether you’re starting from scratch or working to fill in some gaps in your Drupal knowledge, you’ll find descriptions, examples, and Try It Yourself numbered steps to walk you through working with Drupal.

Learning jQuery

by Jonathan Chaffer and Karl Swedberg

Creators of the popular jQuery learning resource, LearningjQuery.com, share their knowledge, experience, and enthusiasm about the jQuery JavaScript library to make your web applications shine!

This was the book that started it all for me. Note that this is NOT the most recent version of this book, but the code and concepts in the book are still relevant.

Microformats Made Simple

by Emily Lewis

Microformats are HTML-based design patterns that help add meaning (semantics) to Web content. They are widely used by some of the most important sites on the Web including Google, Yahoo!, Facebook, and Twitter. The people behind these sites – content authors, designers and developers – understand the power and flexibility of microformats and are taking advantage of their capabilities. Any site can benefit from more effective content and improved user experience by employing microformats correctly.

The Art of Scalability

by Marty Abbott and Michael Fisher

The Art of Scalability teaches technology executives, engineers and architects how to solve technology scalability problems through changes in their architecture, processes and organization structure. The book provides a set of models and approaches that help back office, web services and other platforms scale. Rather than focusing on the optimization and tuning of existing systems, the book offers models developed by the authors to help companies rethink their technology architecture.

Sams Teach Yourself HTML and CSS in 24 Hours

by Dick Oliver

Learn from the newest, updated edition of the highly acclaimed introduction to HTML, Sams Teach Yourself HTML and CSS In 24 Hours. The seventh edition includes updates to introduce Cascading Style Sheets (CSS) in concert with HTML to produce quality web pages. You’ll be able to study revisions that refine examples, as well as provide an enhanced integration with your web pages. You’ll also gain a comprehensive understanding with new examples that match the current state of HTML.

This is the 7th edition of this book, so they must be doing something right!

The Web Designer’s Idea Book

by Patrick McNeil

The Web Designer’s Idea Book includes more than 700 websites arranged thematically, so you can find inspiration for layout, color, style and more. Author Patrick McNeil has cataloged more than 20,000 sites on his website, and showcased in this book are the very best examples.

Agile Web Development with Rails

by Dave Thomas, David Hansson and more

The definitive, Jolt-award winning guide to learning and using Rails is now in its Second Edition. Rails is a new approach to web-based application development that enables developers to create full-featured, sophisticated web-based applications using less code and less effort. Now programmers can get the job done right and still leave work on time.

Fair warning: this is literally the first edition to this book, which is now in it’s third edition. I can’t vouche for how relevant this still is.

Fancy Form Design

by Derek Featherstone, Tim Connell, and Jina Bolton

No longer do you need to shudder at the thought of integrating a stylish form on your site. Fancy Form Design is a complete, step-by-step guide to creating beautiful web forms that are aesthetically pleasing, highly functional, and compatible across all major browsers. All aspects of stunning form creation are covered in this book – from layout and composition through to best-practice CSS and HTML – topped off with a touch of JavaScript sparkle!

Fundamentals of Joomla!

by Barrie M. North

Joomla! is a powerful solution for webmasters and developers working with all types of sites. In this one-of-a-kind video package, top Joomla consultant and Prentice Hall author Barrie M. North shows you exactly how to use Joomla! to build sophisticated websites that are incredibly easy to edit and update. You’ll master Joomla! through 13 comprehensive video lessons, and you’ll have your first Joomla! site running faster than you ever expected!

This is a book + DVD training combo (9+ hours of video)

Sams Teach Yourself PHP, MySQL and Apache

by Julie C. Meloni

In just a short time, you can learn how to use PHP, MySQL, and Apache together to create dynamic, interactive websites and applications using the three leading open-source web development technologies. Using a straightforward, step-by-step approach, each lesson in this book builds on the previous ones, enabling you to learn the essentials of PHP scripting, MySQL databases, and the Apache web server from the ground up. Regardless of whether you run Linux, Windows, or Mac OS X, the enclosed CD includes a complete starter kit that lets you install all the software you need to set up a stable environment for learning, testing, and production.

Book and Video combo!

The Victorian Internet

by Tom Standage

Imagine an almost instantaneous communication system that would allow people and governments all over the world to send and receive messages about politics, war, illness, and family events. The government has tried and failed to control it, and its revolutionary nature is trumpeted loudly by its backers. The Internet? Nope, the humble telegraph fit this bill way back in the 1800s. The parallels between the now-ubiquitous Internet and the telegraph are amazing, offering insight into the ways new technologies can change the very fabric of society within a single generation.

The AdSense Code

by Joel Comm

Hidden on the Internet, scattered among billions of Web pages, are the clues to an incredible secret. For those who know the secret, the result is untold wealth. Each month, a small group of people – an elite club who have uncovered the mysteries of The AdSense Code- put their knowledge to use and receive checks for tens of thousands of dollars from Google. And untold numbers of additional site owners are regularly generating supplemental income via AdSense while they play, sleep and eat. The AdSense Code is concise and very focused on the objective of revealing the proven online strategies to creating passive income with Google AdSense.

jQuery in Action

by Bear Bibeault and Yehuda Katz

A good web development framework anticipates what you need to do and makes those tasks easier and more efficient; jQuery practically reads your mind. Developers of every stripe-hobbyists and professionals alike-fall in love with jQuery the minute they’ve reduced 20 lines of clunky JavaScript into three lines of elegant, readable code. This new, concise JavaScript library radically simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

This is currently the most recent edition of the book, but a 2nd edition will be replacing it soon.

Designing with Web Standards

by Jeffrey Zeldman
This is the book that started it all and kind of defined our industry. There is a third edition out now (this is the 2nd edition), so it’s outdated, but still a cornerstone to any tech book collection.

Everything Reverberates

Put together by the AIGA. Each page is a quote related to design.

Joomla Template Design

by Tessa Blakeley Silver

Joomla! is a free, award-winning content management system written in PHP that allows users to easily publish their content on the World Wide Web and intranets. It is used all over the world for everything from simple websites to complex corporate applications. Joomla! is easy to install, simple to manage, and reliable. The Joomla! template is a series of files within the Joomla! CMS that control the presentation of the content. The template is the basic foundation design for viewing your Joomla! website. To produce the effect of a “complete” website, the template works hand in hand with the content stored in the Joomla! databases.

Polycom® SoundPoint® IP 550

Please don’t even ask me what this thing does. I don’t get it. The story of me even having it is weird. But hey, maybe it’ll be prefect for one of you. Otherwise, sell it on eBay or something.

Apple Bluetooth Keyboard

This is a somewhat old school one before they went all super-thinny. Personally, I like the larger button version anyway. I think it’s better for RSI as well. It was when I was using the new thinny keyboards when my RSI was super bad and it went away when I went back to a “you actually have to push down the button” keyboard.

Wacom Bamboo Fun Tablet

Bamboo Fun lets you get hands-on with your creative projects, combining the benefits of Multi-Touch with the comfort and precision of Wacom’s ergonomically-designed pen. With Multi-Touch, you can navigate, scroll, and work with simple hand gestures. With the tablet’s large touch area, you have more room to navigate than you do with other touch devices like computer trackpads and mobile phones.

JavaScript Fundamentals I & II

by Paul J. Deitel

Using Deitel & Co.’s signature “Live Code” approach, renowned instructor Paul Deitel teaches the right way: from complete working programs, not trivial snippets. Deitel’s video lessons focus on exactly what you need to know, helping you master new skills fast, and put them to work immediately. Just watch and learn how to use control statements, functions, arrays, objects, events, CSS, DOM, and more. Then, master scripting with XML and RSS, and start building the Ajax rich Internet apps that are taking the Web by storm! For even more powerful solutions, turn to the Deitels’ JavaScript for Programmers: with 100+ fully tested programs and 150+ great tips for building robust client-side web apps, it’s the only JavaScript book you’ll ever need!

Combo book & video lessons!

Alright, let’s do this!

Here is the PSD File:

Download PSD

For the curious, it looks like this:

Final reminders: Entries are due February 17th by noon CST and you may submit them here. People entrying via comments may begin now and comments will be shut off at that date as well.