{"id":5520,"date":"2010-02-10T07:05:47","date_gmt":"2010-02-10T14:05:47","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5520"},"modified":"2010-02-17T11:07:24","modified_gmt":"2010-02-17T18:07:24","slug":"the-great-css-off-giveaway","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-great-css-off-giveaway\/","title":{"rendered":"The Great CSS Off &#038; Giveaway"},"content":{"rendered":"<p>Alrighty folks, here&#8217;s the deal. I have a whole bunch of stuff I want to give away. Mostly books on web design and development. I&#8217;ve been deep in thought trying to figure out the best way to give them all away. I definitely didn&#8217;t want to spam Twitter. I also didn&#8217;t want to do a &#8220;just leave a comment&#8221; deal because I think that&#8217;s too easy and just leaves behind a sea of junk comments. <\/p>\n<p>I&#8217;ve settled on a good idea I think: a <strong>CSS Off!<\/strong> I&#8217;m borrowing the name and idea from JD Graffam and Tony White who as far as I know did the original <a href=\"http:\/\/cssoff.com\/\" rel=\"noopener\">CSS OFF<\/a>. They haven&#8217;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&#8217;s your job to turn it into HTML and CSS. Those who do the best job, win. But&#8230; there is a bit more to it than that. Read on to get the whole scoop.<\/p>\n<p><!--more--><\/p>\n<h3>How This Is Going Down<\/h3>\n<p>At the bottom of this article, you can download the Photoshop (.psd) file. Obviously you can open this with Adobe Photoshop. But you don&#8217;t have to have Photoshop to compete in this contest. One alternative is using <a href=\"http:\/\/www.gimp.org\/\" rel=\"noopener\">GIMP<\/a>, 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.<\/p>\n<p>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.<\/p>\n<h3>Two Ways to Enter, Two Ways to Win<\/h3>\n<p>You might be saying to yourself. AWWWWW &#8212; that&#8217;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 <strong>one paragraph<\/strong> describing one thing you love about web design. Let&#8217;s recap:<\/p>\n<p><strong>Two ways to win:<\/strong><\/p>\n<ul>\n<li><strong>Experienced developers &#8211; Convert the design and submit your entry.<\/strong>  You&#8217;ll get first pick of the prizes and you choose the other winners.<\/li>\n<li><strong>Beginner developers &#8211; Comment on this post.<\/strong> Write one paragraph describing one thing you love about web design.<\/li>\n<\/ul>\n<p>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&#8217;s up to them. Please only enter the contest one way or the other.<\/p>\n<p>There will be <strong>12 winners<\/strong>. 4 winning developers, 8 winning commenters. <\/p>\n<h3>Details \/ Rules about Design Conversion<\/h3>\n<ul>\n<li>You only need to create the one page from the mockup. Sub pages are totally optional and no bonus credit given for creating them.<\/li>\n<li>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.<\/li>\n<li>Rollover states are not provided for anything, use your creativity.<\/li>\n<li>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.<\/li>\n<li>After judging is complete, all entries will be hosted online and available to browse.<\/li>\n<li>Remember low file size is an attribute of quality design. We shouldn&#8217;t be downloading 2 MB ZIP files!<\/li>\n<li>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.<\/li>\n<li>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.<\/li>\n<li>You have one week<strong>, staring right now!<\/strong> Submissions will close on February 17th, 2010 at 12 noon CST.<\/li>\n<\/ul>\n<h3>Judging<\/h3>\n<p>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&#8217;t be late!). Judging will be done by myself and <a href=\"http:\/\/dougneiner.com\" rel=\"noopener\">Doug Neiner<\/a>. 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).<\/p>\n<p>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. <\/p>\n<h3>Entry Submission<\/h3>\n<p>You may submit your entries at the <a href=\"https:\/\/css-tricks.com\/css-off-entry\/\">CSS Off Submission Entry Form<\/a>. All entries must be in by February 17th, 2010 at 12:00 noon CST.  Requirements:<\/p>\n<ul>\n<li>Submit one .ZIP or .RAR file.<\/li>\n<li>Use your real name and real email address (will not be published, we just need to contact you if you win)<\/li>\n<li>The submitted file extracts into a folder named &#8220;CSS Off Entry &#8211; YOUR NAME&#8221;<\/li>\n<li>This folder can contain whatever you need to do accomplish the design, but it must contain an index.html file.<\/li>\n<li>We should be able to open that index.html file in a browser locally and see your completed design.<\/li>\n<\/ul>\n<h3>Winning<\/h3>\n<p>We&#8217;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&#8217;ll try and keep it under a month. As soon as they are chosen, we&#8217;ll email the winning developers so they can pick their two winners. Then prizes will be chosen in this order:<\/p>\n<p>1st place developer<br \/>\n &#8211; Their chosen commenter #1<br \/>\n &#8211; Their chosen commenter #2<br \/>\n2nd place developer<br \/>\n &#8211; Their chosen commenter #1<br \/>\n &#8211; Their chosen commenter #2<br \/>\netc.<\/p>\n<p>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&#8217;ll need to move on to the next choice otherwise it will take far too long. After all winners are chosen I&#8217;ll ship all the prizes at once.<\/p>\n<h3>The Prizes<\/h3>\n<p><strong>12 winners, 24 prizes.<\/strong> The top winning &#8220;team&#8221; 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. <strong>Please know<\/strong> that most of these products are used. They are things I&#8217;ve used or books that I&#8217;ve read. Some of them have a little ragged corners on the cover, stuff like that. They have served me well, so I&#8217;m passing them along to others that could use them.<\/p>\n<p>The most important prize, like the contestants of Iron Chef, you win <strong>pride<\/strong>, in knowing that you rock at converting web designs. We&#8217;ll be publishing the four developer winners, their winning entry, and a link to their real websites.<\/p>\n<p>Also, for each mockup conversion entry that meets the base criteria, I&#8217;m going to donate $3 to a Haiti benefit program of my choice. So even if you enter and don&#8217;t win, some good will come of it.<\/p>\n<table id=\"prizes\" cellpadding=\"5\">\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-smashingbook.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/shop.smashingmagazine.com\/smashing-book-intl.html\" rel=\"noopener\">Smashing Book<\/a><\/h4>\n<p><em>by Many Authors!<\/em><\/p>\n<blockquote><p>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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-cssmastery.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/1430223979?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1430223979\" rel=\"noopener\">CSS Mastery<\/a><\/h4>\n<p><em>by Andy Budd<\/em><\/p>\n<blockquote><p>The Internet abounds with information on CSS based design. However it&#8217;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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-flexible.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.flexiblewebbook.com\/\" rel=\"noopener\">Flexible Web Design<\/a><\/h4>\n<p><em>by Zoe Gillenwater<\/em><\/p>\n<blockquote><p>Liquid or fluid layouts change width based on the user\u2019s unique device viewing size. Elastic layouts change width based on the user\u2019s 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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-eyetv.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.elgato.com\/elgato\/na\/mainmenu\/products\/hybrid09\/product1.en.html\" rel=\"noopener\">EyeTV Hybrid<\/a><\/h4>\n<blockquote><p>EyeTV Hybrid turns your Mac into the world\u2019s 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.<\/p><\/blockquote>\n<p>I used it, worked great, just don&#8217;t use it anymore.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-teachdrupal.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/0672331268?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0672331268\" rel=\"noopener\">Sams Teach Yourself Drupal in 24 Hours<\/a><\/h4>\n<p><em>by Jesse Feiler<\/em><\/p>\n<blockquote><p>Sams Teach Yourself Drupal in 24 Hours helps you get up to speed with Drupal quickly. Whether you&#8217;re starting from scratch or working to fill in some gaps in your Drupal knowledge, you&#8217;ll find descriptions, examples, and Try It Yourself numbered steps to walk you through working with Drupal.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-learningjquery.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/1847196705?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1847196705\" rel=\"noopener\">Learning jQuery<\/a><\/h4>\n<p><em>by Jonathan Chaffer and Karl Swedberg<\/em><\/p>\n<blockquote><p>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!<\/p><\/blockquote>\n<p>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.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-microformats.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/0321660773?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0321660773\" rel=\"noopener\">Microformats Made Simple<\/a><\/h4>\n<p><em>by Emily Lewis<\/em><\/p>\n<blockquote><p>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 &#8211; content authors, designers and developers &#8211; 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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-scaling.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/theartofscalability.com\/\" rel=\"noopener\">The Art of Scalability<\/a><\/h4>\n<p><em>by Marty Abbott and Michael Fisher<br \/>\n<\/em><\/p>\n<blockquote><p>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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-teachhtml.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/0672328410?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0672328410\" rel=\"noopener\">Sams Teach Yourself HTML and CSS in 24 Hours<\/a><\/h4>\n<p><em>by Dick Oliver<\/em><\/p>\n<blockquote><p>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&#8217;ll be able to study revisions that refine examples, as well as provide an enhanced integration with your web pages. You&#8217;ll also gain a comprehensive understanding with new examples that match the current state of HTML.<\/p><\/blockquote>\n<p>This is the 7th edition of this book, so they must be doing something right!\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-ideabook.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/1600610641?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1600610641\" rel=\"noopener\">The Web Designer&#8217;s Idea Book<\/a><\/h4>\n<p><em>by Patrick McNeil<\/em><\/p>\n<blockquote><p>The Web Designer&#8217;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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-awdwr.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"#\">Agile Web Development with Rails<\/a><\/h4>\n<p><em>by Dave Thomas, David Hansson and more<\/em><\/p>\n<blockquote><p>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. <\/p><\/blockquote>\n<p><em>Fair warning:<\/em> this is literally the first edition to this book, which is now in it&#8217;s third edition. I can&#8217;t vouche for how relevant this still is.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-formdesign.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.sitepoint.com\/books\/forms1\/\" rel=\"noopener\">Fancy Form Design<\/a><\/h4>\n<p><em>by Derek Featherstone, Tim Connell, and Jina Bolton<\/em><\/p>\n<blockquote><p>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 &#8211; from layout and composition through to best-practice CSS and HTML &#8211; topped off with a touch of JavaScript sparkle!<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-fundjoomla.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/0137017812?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0137017812\" rel=\"noopener\">Fundamentals of Joomla!<\/a><\/h4>\n<p><em>by Barrie M. North<\/em><\/p>\n<blockquote><p>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\u2019ll master Joomla! through 13 comprehensive video lessons, and you\u2019ll have your first Joomla! site running faster than you ever expected!<\/p><\/blockquote>\n<p>This is a book + DVD training combo (9+ hours of video)\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-phpmysqlapache.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/067232976X?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=067232976X\" rel=\"noopener\">Sams Teach Yourself PHP, MySQL and Apache<\/a><\/h4>\n<p><em>by Julie C. Meloni<\/em><\/p>\n<blockquote><p>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.<\/p><\/blockquote>\n<p>Book and Video combo!\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-victorian.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/0425171698?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0425171698\" rel=\"noopener\">The Victorian Internet<\/a><\/h4>\n<p><em>by Tom Standage<\/em><\/p>\n<blockquote><p>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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-adsense.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/1933596708?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1933596708\" rel=\"noopener\">The AdSense Code<\/a><\/h4>\n<p><em>by Joel Comm<\/em><\/p>\n<blockquote><p>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 &#8211; 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.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-jqueryinaction.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/1933988355?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1933988355\" rel=\"noopener\">jQuery in Action<\/a><\/h4>\n<p><em>by Bear Bibeault and Yehuda Katz<\/em><\/p>\n<blockquote><p>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&#8217;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. <\/p><\/blockquote>\n<p>This is currently the most recent edition of the book, but a 2nd edition will be replacing it soon.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-dwws.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.zeldman.com\/dwws\/\" rel=\"noopener\">Designing with Web Standards<\/a><\/h4>\n<p><em>by Jeffrey Zeldman<\/em><br \/>\nThis 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&#8217;s outdated, but still a cornerstone to any tech book collection.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-reverberates.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/0811819345?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0811819345\" rel=\"noopener\">Everything Reverberates<\/a><\/h4>\n<p>Put together by the AIGA. Each page is a quote related to design.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-joomlatemplate.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/1847191444?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1847191444\" rel=\"noopener\">Joomla Template Design<\/a><\/h4>\n<p><em>by Tessa Blakeley Silver<\/em><\/p>\n<blockquote><p>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 &#8220;complete&#8221; website, the template works hand in hand with the content stored in the Joomla! databases.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-polycom.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.polycom.com\/products\/voice\/desktop_solutions\/soundpoint\/desk_phones\/soundpoint_ip550.html\" rel=\"noopener\">Polycom\u00ae SoundPoint\u00ae IP 550<\/a><\/h4>\n<p>Please don&#8217;t even ask me what this thing does. I don&#8217;t get it. The story of me even having it is weird. But hey, maybe it&#8217;ll be prefect for one of you. Otherwise, sell it on eBay or something.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-applekeyboard.jpg?resize=250%2C172\" width=\"250\" height=\"172\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"#\">Apple Bluetooth Keyboard<\/a><\/h4>\n<p>This is a somewhat old school one before they went all super-thinny. Personally, I like the larger button version anyway. I think it&#8217;s better for RSI as well. It was when I was using the new thinny keyboards when my RSI was <strong>super<\/strong> bad and it went away when I went back to a &#8220;you actually have to push down the button&#8221; keyboard.\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-wacom.jpg?resize=250%2C186\" width=\"250\" height=\"186\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"#\">Wacom Bamboo Fun Tablet<\/a><\/h4>\n<blockquote><p>Bamboo Fun lets you get hands-on with your creative projects, combining the benefits of Multi-Touch with the comfort and precision of Wacom&#8217;s ergonomically-designed pen. With Multi-Touch, you can navigate, scroll, and work with simple hand gestures. With the tablet&#8217;s large touch area, you have more room to navigate than you do with other touch devices like computer trackpads and mobile phones.<\/p><\/blockquote>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/prize-javascriptfundamentals.jpg?resize=250%2C256\" width=\"250\" height=\"256\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/>\n<\/td>\n<td>\n<h4><a href=\"http:\/\/www.amazon.com\/gp\/product\/0137018258?ie=UTF8&#038;tag=css-tricks-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0137018258\" rel=\"noopener\">JavaScript Fundamentals I &#038; II<\/a><\/h4>\n<p><em>by Paul J. Deitel<\/em><\/p>\n<blockquote><p>Using Deitel &#038; Co.\u2019s signature \u201cLive Code\u201d approach, renowned instructor Paul Deitel teaches the right way: from complete working programs, not  trivial snippets. Deitel\u2019s 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\u2019 JavaScript for Programmers: with 100+ fully tested programs and 150+ great tips for building robust client-side web apps, it\u2019s the only JavaScript book you\u2019ll ever need!<\/p><\/blockquote>\n<p>Combo book &#038; video lessons!\n<\/td>\n<\/tr>\n<\/table>\n<h3>Alright, let&#8217;s do this!<\/h3>\n<p>Here is the PSD File:<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/CSS-Off.zip\" class=\"button\">Download PSD<\/a><\/p>\n<p>For the curious, it looks like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/cssoffpreview.jpg?resize=570%2C466\" width=\"570\" height=\"466\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p><strong>Final reminders:<\/strong> Entries are due February 17th by noon CST and you may <a href=\"https:\/\/css-tricks.com\/css-off-entry\/\">submit them here<\/a>. People entrying via comments may begin now and comments will be shut off at that date as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alrighty folks, here&#8217;s the deal. I have a whole bunch of stuff I want to give away. Mostly books on web design and development. I&#8217;ve been deep in thought trying to figure out the best way to give them all away. I definitely didn&#8217;t want to spam Twitter. I also didn&#8217;t want to do a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":332556,"url":"https:\/\/css-tricks.com\/on-auto-generated-atomic-css\/","url_meta":{"origin":5520,"position":0},"title":"On Auto-Generated Atomic CSS","date":"January 15, 2021","format":false,"excerpt":"Robin Weser's \"The Shorthand-Longhand Problem in Atomic CSS\" in an interesting journey through a tricky problem. The point is that when you take on the job of converting something HTML and CSS-like into actual HTML and CSS, there are edge cases that you'll have to program yourself out of, if\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/atomic-css-pieces.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330285,"url":"https:\/\/css-tricks.com\/not-much\/","url_meta":{"origin":5520,"position":1},"title":"Not Much","date":"December 14, 2020","format":false,"excerpt":"What\u2019s one thing I learned about building websites this year? Not all that much. This year, unlike most previous years, I didn\u2019t explore a lot of new technologies. For obvious reasons, it\u2019s been a difficult year to be as engaged in the hot new topics and to spend time playing\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-14-at-12.36.04-PM.png?fit=1200%2C513&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300259,"url":"https:\/\/css-tricks.com\/blue-beanie-day-2019\/","url_meta":{"origin":5520,"position":2},"title":"Blue Beanie Day 2019","date":"December 13, 2019","format":false,"excerpt":"November 30th, the official \"Blue Beanie Day,\" has come and gone. I'm not sure I ever grokked the exact spirit of it, but I've written about what it means to me. Last year: Web standards, as an overall idea, has entirely taken hold and won the day. That's worth celebrating,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/developer-sitting-blue-beanie.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301625,"url":"https:\/\/css-tricks.com\/in-defence-of-serverless-the-term\/","url_meta":{"origin":5520,"position":3},"title":"In Defence of \u201cServerless\u201d \u2014the term","date":"January 14, 2020","format":false,"excerpt":"Ben Ellerby: For now Serverless, to me at least, manages to do a hard job, defining the borders of a very fluid and complex space of possible solutions in which we can build next-generation architectures. It would help if there was not a framework of the same name, it would\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/defense-of-serverless.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325627,"url":"https:\/\/css-tricks.com\/mediastack\/","url_meta":{"origin":5520,"position":4},"title":"mediastack","date":"November 19, 2020","format":false,"excerpt":"Have you ever had the idea for a website or new app that involved showing news content? You don't have to create content yourself to have the right to build an innovative news reading experience. I remember when Flipboard came out. They didn't (and still don't) actually produce content \u2014\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-12-at-8.32.48-AM.png?fit=1200%2C730&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334516,"url":"https:\/\/css-tricks.com\/you-want\/","url_meta":{"origin":5520,"position":5},"title":"You want&#8230;","date":"February 17, 2021","format":false,"excerpt":"I've been enjoying these little \"You want...\" style posts. Post titles like that are a little more... forceful for my normal taste, but I like the spirit of sharing a best practice that perhaps isn't well-known-enough. Killian started it with \"You want overflow: auto, not overflow: scroll.\"I followed up with\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5520"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5520"}],"version-history":[{"count":40,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5520\/revisions"}],"predecessor-version":[{"id":5656,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5520\/revisions\/5656"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=5520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}