Cheat Sheets for Front-end Web Developers

July 7th, 2008 by Jacob Gube | 223 Comments | Stumble It! del.icio.us

Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office.

In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery).

So go ahead – print out your favorites and pepper your workspace with these wonderful references.

HTML/XHTML

3. HTML Character Entities Cheat Sheet

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

8. CSS Level 1 Quick Reference – PDF

9. CSS Level 2 Quick Reference – PDF

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

JavaScript

13. Addison-Wesley’s JavaScript Reference Card – PDF

14. JavaScript and Browser Objects Quick Reference

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

Miscellaneous

22. The Web Developer’s SEO Cheat Sheet

23. The WordPress Help Sheet

Hope you picked up a cool cheat sheet or two. If your favorites aren’t on the list, don’t forget to share it with us in the comments.

223 Comments

Abhinav Singh

July 7th, 2008

Excellent and useful. Looking forward to more from here :)

Meanwhile for interested web developers, I have a few blogs here http://abhinavsingh.com/blog

Steven Snell

July 7th, 2008

Nice collection Jacob. These could come in handy (I guess that’s the idea).

Eric

July 7th, 2008

Easily the most useful post I’ve read today. Thanks!

Matt

July 7th, 2008

Damn you’re good at putting together useful collections like this. I’ll definitely refer to this in the future. Thanks!

Vipul Limbachiya

July 8th, 2008

Thank you very much for sharing…. Its gr8 collection! Thanks again

Defcon

July 8th, 2008

Tnx alot dude!
i saved them all! :)

Hey Thanx for the awesome list of cheat sheets, Looking forward to use it more often to speed up my development.
Gr8 work. I am adding it to del.icio.us for future reference and sharing it with friends

NasirJumani

July 8th, 2008

#1 and #7 are really the godsend for me….Many thanks….stumbled! :~)

khaty

July 8th, 2008

a very useful post.. thanks! hope to see more. :-)

Kunal

July 8th, 2008

Great collection! Was looking for CSS cheat sheet! Thanks!

Vardaan

July 8th, 2008

Ultimate Resource !!!

..you missed one Prototype CheatSheet, here -
PDF -
http://www.snook.ca/files/prototype_1.5.0_snookca.pdf

PNG Image - http://www.snook.ca/files/prototype_1.5.0_snookca.png

Jacob Gube

July 8th, 2008

Hey everyone - thanks for the positive feedback! I’ve got a lot of these printed out and pasted all over my work area. I find it useful because when you’re surrounded with your work, you might see something that you haven’t seen before (such as an easier way to do a certain task).

Daniel

July 8th, 2008

Thanks, man.
This will help me a lot for pimping my blog.
Keep it up!

Kévin Dunglas

July 8th, 2008

Another interesting cheat sheet for web developers concerning security: XSS security Cheat Sheet : http://ha.ckers.org/xss.html

And another collection of cheat sheets (Rails, PHP, Javascript, CSS, Apache, …): http://www.addedbytes.com/cheat-sheets/

Abhisek

July 8th, 2008

Awesome. Very useful, indeed.

Alexandre

July 8th, 2008

Very useful resource, stumbled. But, it’s a lot of stuff. I would be freaked out if surrounded by this huge amount of paper. MFG, it’s a lot of things to learn.

Kim

July 8th, 2008

Thanks for this great collection!!

Ashish Patel

July 8th, 2008

i m workning in SAP. so, it is not useful to me at all. But i will send it to my friends. It may be useful to them.

Dan Collins

July 8th, 2008

Top collection, thank you very much!

Siavash

July 8th, 2008

Cool

Michael Castilla

July 8th, 2008

Thanks for including my WordPress Help Sheet! Great post :)

Heather

July 8th, 2008

Excellent resource! Thanks!

johnny rodriguez

July 8th, 2008

kewl, bookmarking them as we speak.

Jason Bartholme

July 8th, 2008

Great list. Two of the CSS cheatsheets are posted on my wall already.

Darryl B

July 8th, 2008

Love it! Thanks a lot for getting this put together.

handy

July 8th, 2008

Nice…. thanks.. :)

Jacob Gube

July 8th, 2008

Hey everyone,

If you have pictures of your workspace decorations (including a cheat sheet wall if you have one), post a picture and share it with us.

I’ll start it off with a picture of my cheat sheets:
http://i37.tinypic.com/11gnjbt.jpg

I have the MySQL, JavaScript, and mod_rewrite from ILoveJackDaniels (now called Added Bytes) by Dave Childs. I also have the PHP cheat sheet on another side.

Dave Child

July 8th, 2008

Thanks Jacob :)

My server is having trouble with the referred traffic from Digg. If you can’t get the cheat sheets from there, there’s a simple file mirror at http://www.zombie-shelter.co.uk/

Worthless

July 8th, 2008

Great reminder.

eod

July 8th, 2008

cool, thanks a lot

Anthony Damasco

July 8th, 2008

Amazing list, thanks

Myles

July 8th, 2008

Nice collection. Here are some helpful cheat sheets for flash/flex developers. http://actionscriptcheatsheet.com/

Timothy Long

July 8th, 2008

Solid list. Covers all the fundamentals.

Jon Steenbergen

July 8th, 2008

Thanks, I was looking for some good jQuery cheat sheets!

Jacob Gube

July 8th, 2008

@Dave Childs: First, thanks for putting these wonderful cheat sheets together (even the WoW cheat sheet which my non-developer friends found awesome as well!). Second, if you want, we can offload some of the cheat sheets onto my server as an alternate download link. Just let me know.

Indra

July 8th, 2008

This is real handy! Thanks for these sheets :)

Jdzzle

July 8th, 2008

i’m actually not very impressed. you have multiple sections for xhtml but still there’s no mention of the xhtml essentials. no mention of the difference between div and span, (block vs inline) and how important it is to set the width and height. i can find what i need faster if i google it. the javascript reference only seems to touch the tip of the iceberg too.

Valentino

July 8th, 2008

Great sheets. With this and the Firebug add-on for firefox, I’m set.
https://addons.mozilla.org/en-US/firefox/addon/1843

Loren

July 8th, 2008

Beware that these are not for learning, they are for *reference only* if you (generally) already know what you are doing.

I mention this because the first one I looked at, #13, has several errors (some of which may only be obvious if you are familiar with JS already). Can’t speak for the rest.

Rochester Web Design

July 8th, 2008

Great list, need one for mysql in there, or just SQL in general.

chris

July 8th, 2008

Wonderful list! I wish I had these back in college.

ben

July 8th, 2008

this rocks
thanks

Mithun Sreedharan

July 8th, 2008

Much thanks for sharing!

Srinivas

July 9th, 2008

This is really usefull…

Dirq

July 9th, 2008

Awesome! These will be a great help!

De

July 9th, 2008

Excellent info…many thanks.

What about PHP? Do you have a good site like this for PHP?

What about Powerscript?

Jimmy G

July 9th, 2008

Thanks for showing the GoSquared Help Sheet first, and the GoSquared + WPCandy Help Sheet too.

You might also want to check out our CSS Help Sheet (and even add it to the list if you want)

http://www.gosquared.com/liquidicity/archives/33

Thanks for a great post, really valuable.

Welcome to Paradise

July 9th, 2008

I liked the cheat sheets for html, xhtml, css, the rgb hex color chart, seo and wordpress help sheets as well.

Did I mention all or most of them … :)

Thanks for these.

Dejan Cancarevic

July 9th, 2008

very nice collection, thank you!

ray

July 9th, 2008

came in right in time - thanx :-)

ray

Carlos Eduardo

July 9th, 2008

Great list.

Very very usefull links for Front End Developers…

Thank you for posting it :)

CloudedVision

July 9th, 2008

Great stuff! Grabbed the JQuery cheat sheet.

Danhbaweb20.com

July 10th, 2008

Great post. Thanks so much !

Skys0

July 10th, 2008

Extremely useful, Thanks !

Steve Marr

July 10th, 2008

The Advanced Wordpress Help Sheet

http://wpcandy.com/articles/tutorials/the-advanced-wordpress-help-sheet.html

timbury

July 10th, 2008

Excellent collection! Thanks!

Erik Pettersson

July 10th, 2008

Amazing list of Cheat Sheets, total resource!

war-o

July 11th, 2008

I hate PDFs. Though it’s a good list.

Gurpreet Singh Modi

July 11th, 2008

Absolutely amazing! A very helpful resource collection!!!

Gaurav

July 11th, 2008

Very good keep it up. Thanks a lot.

Sidy

July 11th, 2008

Thanks. Very useful…!!!

Kashif

July 11th, 2008

Excellent work

Joey

July 12th, 2008

Very nice collection you have there. Thanks for sharing man!

Joey - http://www.leetwebmasters.com

Jason

July 12th, 2008

Great collection for different resources.

XHTML Character collections: http://tools.khrido.com/webtools/extended-html-characters-list.aspx

Maggie Wolfe Riley

July 15th, 2008

I was going to tell you about all the great cheatsheets on ilovejackdaniels.com, but when I went there, it redirected to addedbytes, where most of the cheatsheets in this article are from. Well, addedbytes is a much better domain name, no matter how much you love JD - ha!!

http://www.addedbytes.com/blog/what-happened-to-ilovejackdaniels-dot-com/

Igor

July 15th, 2008

Thank you very much, Jacob. It’s really very useful! :)

Tijmen

July 16th, 2008

Great list, very usefull :)

biran

July 16th, 2008

.Net people check out this post on Jquery style .net validators.

http://www.delphicsage.com/home/blog.aspx?d=201&title=jQuery_Style_ASP.NET_Form_Validators

patrickd

July 18th, 2008

thanks for the stuffs!
very useful..
keep it coming..

Adam

July 23rd, 2008

Really helpful. A great time saver.

PluT0

July 24th, 2008

quite well useful, any know where is the place to download the complete cheatsheet in one rar or zip file for all above.

ahbas

July 27th, 2008

cool collection..

WebFusion

August 2nd, 2008

Great list man, really useful and complete.
Thanks for sharing.

orecoryday

August 2nd, 2008

Thanks !

paresh

August 3rd, 2008

great, thanks for sharing.

Velvet Blues

August 4th, 2008

Thanks. These are very useful… It would be cool to download them all at once.

Affordable Web Design

August 4th, 2008

Cheat sheets…mmm so tasty. Thanks for posting these quick references! I always seem to forget the simpler ones - doh!

Abhinav Singh

August 8th, 2008

Here is yet another post from me for the front end developers, on how to speed up the loading of their websites and hence enhancing their user’s experience:

http://abhinavsingh.com/blog/2008/08/how-to-make-faster-websites-and-enhance-your-site-user-experience-part-1/