Awesome guide Andy. Nice of you to take the time to whip it out.
On a side note — and please don’t take me the wrong way — I mean this with all respect to those involved with Codepen, but I sincerely think the site design would benefit from major refinements — it feels bloated and chincy. Codepen could be an absolute winner, but I feel the design is holding it back.
Otherwise, keep up the great work everyone. Should be interesting to see the progression of this project.
A few things that could use some fine tuning include:
**Search results page** Perhaps the results can display the pen previews as seen in the picks, etc.
**Toggle Code View** Provided an option for window arrangement in code view. https://tinker.io has a nice example
**Refine aesthetics** Typography, Gradients, Color Scheme, Unnecessary decoration…the site splash and login pages especially come to mind, but other small details could use some love too. Have a look at http://cssdeck.com
> The maximum non-animated file size you can upload is 10MB. If the image is over 1MB, however, it will be automatically compressed to 1MB for better viewing on the web. The maximum animated file size (GIF and PNG) is 2MB.