Web Designer’s Resources: Great Design Examples (with Code)

CodePen is an awesome resource for web designers and developers, a virtual playground where web workers from all over the globe post great examples of design and user interface experiments and offer up the code that drives their designs.

Code Pen

CSS is a language that can—and should be—a web designer’s best friend. If you’re learning CSS, or looking to expand your coding skills, check out CodePen. The examples of great web design—cool navigation effects, interesting animations, splash screens, etc.—on the site demonstrate the possibilities when a designer really has a handle on CSS. Being able to combine the skills of design and code can produce some amazing and gorgeous work. In so many ways, the samples here demonstrate that it is possible to wrangle both of these fields into place and to produce beautifully designed and coded websites.

Code Pen example 3

Code Pen example 2

Code Pen example1

Need more design inspiration? Check out the Web Designer’s Idea App for iPad, with hundreds of stellar websites selected by Patrick McNeil.

If you’re looking to transition your design career from print to web and need expert advice, instruction and inspiration, don’t miss the 2013 HOW Design Conference. This year, HOW offers a dedicated track of sessions designed to give you the essentials of web design and development, taught by top experts in the interactive design field.