Tips & Tricks: Cheat Sheets For Web People

14 Jul 2010

I have a set of blogs that I read every day, some are really technical, and I learn lots, and others are more inspirational, they show me the cool stuff that we as web designers and web developers can build.

I’ll admit that one of the blogs I read has the educational value of something you’d pick up at a grocery store check out, the pictures are really pretty, and it’s good inspiration, but I’d never actually walk out of the store with it. Well today, they posted an article that changed my mind. Almost! One of today’s posts was a collection of cheat sheets for web designers and developers, and I wanted to share my favorites.

HTML4 and HTML5 Cheat Sheets

woork_html5HTML5 Visual Cheat Sheet from

I think came in as my favorite and prettiest cheat sheet. It prints on an 11x17 piece of paper, and is a great reference for all of the HTML4 and HTML5 tags that you’ll ever need to reference. It nicely includes the attributes that you can set, what version of the HTML spec they’re from and lots more useful information.

veignhtml5HTML5 Reference Guide from

The Veign folks go into a lot more detail on their cheat sheet, or more accurately, cheat sheets because this guy is 4 pages long. One of the things I like about this one was that it goes in to much further depth about the attributes, supported HTML versions (indicating elements that aren’t supported in HTML5 with a highlight), and a very brief description of the element.

charcheatHTML Character Entity Reference from

I’ve often found myself forgetting what the special character sequence is to get a particular character to show up, or I’ll be looking for a character to use in my breadcrumb navigation – this cheat sheet solves that and lists all of the characters and their sequence to get exactly what you want!

canvascheatCanvas Cheat Sheet from

Canvas is one of those things that’s super new to a lot of folks, so having a handy cheat sheet is really useful! It’s not going to be super-useful for beginners since it’s basically just the API reference, but once you have a pretty good handle on Canvas, this will be a great desk reference until it gets cemented in your brain.

CSS2 and CSS3 Cheat Sheets

css2veignCSS2 Reference from

Those folks over at Veign are pretty good at putting together a reference sheet, maybe not as pretty as some of the other ones, but just as functional and makes my life easier, so I’m not complaining! Their CSS2 reference is great and provides all the detail you’ll need if you need to look something up quickly!

css3veignCSS3 Reference from

The CSS3 reference isn’t quite as awesome as the HTML5 reference, because they don’t tell you what properties are CSS3 vs CSS2, so if you’re having to code for multiple browsers like most folks, you may accidentally add something and then scratch your head as to why it’s not working in an older browser.

Other Useful Cheat Sheets

jscheatJavaScript Cheat Sheet from

For whatever reason, JavaScript and I don’t get along, I think it’s because I like strongly typed languages that tell me if I’ve done something wrong before it gets there. If you’re building websites and not using a tool that doesn’t have intellisense, then having a cheat sheet like this would be super valuable. All the APIs you’ll need, right at your fingertips!

seocheatSEO Cheat Sheet from

A week or so ago, I posted my tips and tricks for ensuring your site was best optimized to make it into search engines efficiently. Here’s another great easy to follow cheat sheet that will help you make the best of the time and resources that you have on getting your site optimized. It’s a great resource to look over and share with co-workers or friends when they ask why you’re doing something!


There you go, those are the quick reference guides that are now printed and sitting on my bulletin board beside my desk at work! Hopefully you’ll find a good nugget or two in there as well! If you’ve got other good references or cheat sheets, be sure to share them with me!