Cheat Sheets for Front-end Web Developers

Jul 7 2008 by Jacob Gube | 151 Comments

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.


1. HTML Help Sheet

HTML Help Sheet Screenshot

2. HTML Cheat Sheet

HTML Cheat Sheet - Screen shot.

3. HTML Character Entities Cheat Sheet

HTML Character Entities Cheat Sheet - Screen shot.

4. XHTML Cheat Sheet v. 1.03 – PDF

XHTML Cheat Sheet v. 1.03 - screen shot.


5. CSS Cheat Sheet (V2)

CSS Cheat Sheet (V2) - screen shot.

6. CSS Cheat Sheet

CSS Cheat Sheet - screen shot.

7. CSS Shorthand Cheat Sheet

CSS Shorthand Cheat Sheet - screen shot.

8. CSS Level 1 Quick Reference – PDF

CSS Level 1 Quick Reference - screen shot.

9. CSS Level 2 Quick Reference – PDF

CSS Level 2 Quick Reference - screen shot.

10. CSS2.1 Quick Reference Card – PDF

CSS2.1 Quick Reference Card - screen shot.

11. CSS2 Reference Guide – PDF

CSS2 Reference Guide - screen shot.


12. JavaScript Cheat Sheet

JavaScript Cheat Sheet - screen shot.

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

Addison-Wesley's JavaScript Reference Card - screen shot.

14. JavaScript and Browser Objects Quick Reference

JavaScript and Browser Objects Quick Reference - screen shot.

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

The most common DOM methods at a glance - Screen shot.

16. JavaScript Quick Reference Card/Cheatsheet

avaScript Quick Reference Card/Cheatsheet - Screen shot.

17. mootools 1.2 cheat sheet

mootools 1.2 cheat sheet - screen shot.

18. jQuery Cheatsheet

jQuery Cheatsheet - screen shot.

19. jQuery 1.2 Cheat Sheet

jQuery 1.2 Cheat Sheet - screen shot.

20. jQuery Visual Map – PNG

jQuery Visual Map - screen shot.


21. RGB Hex Colour Chart

RGB Hex Colour Chart - screen shot.

22. The Web Developer’s SEO Cheat Sheet

The Web Developer's SEO Cheat Sheet - screen shot

23. The WordPress Help Sheet

The WordPress Help Sheet - screen shot.

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.


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

Steven Snell

July 7th, 2008

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


July 7th, 2008

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


July 7th, 2008

Awesome, very useful!


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


July 8th, 2008

Tnx alot dude!
i saved them all! :)

Swapnil Sarwe

July 8th, 2008

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 for future reference and sharing it with friends


July 8th, 2008

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


July 8th, 2008

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


July 8th, 2008

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


July 8th, 2008

Ultimate Resource !!! missed one Prototype CheatSheet, here –

PNG Image –

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).


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 :

And another collection of cheat sheets (Rails, PHP, Javascript, CSS, Apache, …):



July 8th, 2008

Awesome. Very useful, indeed.


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.


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!


July 8th, 2008


Michael Castilla

July 8th, 2008

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


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.


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:

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


July 8th, 2008

Great reminder.


July 8th, 2008

cool, thanks a lot

Anthony Damasco

July 8th, 2008

Amazing list, thanks


July 8th, 2008

Nice collection. Here are some helpful cheat sheets for flash/flex developers.

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.


July 8th, 2008

This is real handy! Thanks for these sheets :)


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.


July 8th, 2008

Great sheets. With this and the Firebug add-on for firefox, I’m set.


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.


July 8th, 2008

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


July 8th, 2008

this rocks

Mithun Sreedharan

July 8th, 2008

Much thanks for sharing!


July 9th, 2008

This is really usefull…


July 9th, 2008

Awesome! These will be a great help!


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)

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!


July 9th, 2008

came in right in time – thanx :-)


Carlos Eduardo

July 9th, 2008

Great list.

Very very usefull links for Front End Developers…

Thank you for posting it :)


July 9th, 2008

Great stuff! Grabbed the JQuery cheat sheet.

July 10th, 2008

Great post. Thanks so much !


July 10th, 2008

Extremely useful, Thanks !


July 10th, 2008

Excellent collection! Thanks!

Erik Pettersson

July 10th, 2008

Amazing list of Cheat Sheets, total resource!


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!!!


July 11th, 2008

Very good keep it up. Thanks a lot.


July 11th, 2008

Thanks. Very useful…!!!


July 11th, 2008

Excellent work


July 12th, 2008

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

Joey –


July 12th, 2008

Great collection for different resources.

XHTML Character collections:

Maggie Wolfe Riley

July 15th, 2008

I was going to tell you about all the great cheatsheets on, 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!!


July 15th, 2008

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


July 16th, 2008

Great list, very usefull :)


July 16th, 2008

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


July 18th, 2008

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


July 23rd, 2008

Really helpful. A great time saver.


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.


July 27th, 2008

cool collection..


August 2nd, 2008

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


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:


August 8th, 2008

You’ve got something for everyone. Could use some cheat sheets for Flex and Flash, though. Thanks a lot for posting these.

Other Man

August 12th, 2008

Thanks dude

CompassPoint Web Design

August 26th, 2008

These are fantastic… I have added them to our collection. Thank you!


September 8th, 2008

Nice, but you’re missing SVG


September 8th, 2008

Any cheat sheets on RubyRails?


September 8th, 2008

I am a fan of cheat sheets… and this site takes the Michael phelps persona…

Keep up the good work


Calvin Gilbert

September 8th, 2008

I would like to see some Ruby cheat sheets as well.


September 11th, 2008

very cool indeed!! Keep up the good work


September 13th, 2008

Extemely Georgous!!!
Very great stuff, I think I like to print them all and decorate the whole room with them^^

Daisy Morgan

September 28th, 2008

For Ruby cheatsheets try searching delicious for

ruby cheat
ror cheat

and you’ll find plenty to choose from.


September 29th, 2008

very nice collection

Sara P

October 23rd, 2008

Nice collections for my vault and keep up the good work. Your blog very informative.

Carlos @ VPSmedia

October 24th, 2008

Great article, this will come in handy with our new design ;)


October 30th, 2008

This article is really useful for me. Thanks.

MK (Casey) van Bronkhorst

October 30th, 2008

Stunning – glad to have seen this now. Thanks for tweeting it within earshot.

North Sydney Web Design

October 30th, 2008

Hi Great resource, these are a great help. I’m designing a new site now so will use the cheat sheets.

I’ll be posting more web design articles on my Web Design Blog


November 4th, 2008

Great collection of goodies


November 13th, 2008

Thanks SixRevisions team for the cheat sheet.

Prof. Wurst

November 26th, 2008

Thanks for sharing! Helps me a lot!


December 8th, 2008

Great collection. Thanks… :)


January 4th, 2009

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


January 4th, 2009

Nice work!

The thing I have never liked about downloading and printing a disparate set of cheatsheets from the net is the lack of consistency in presentation and the fact that I keep loosing them. My searches for just a set of printed cheatsheets in book form have thus far been in vain. Now it looks like there is an alternative. These guys – are offering a whole lot of cheatsheets in book format.


January 23rd, 2009

@ scirad – Visibone [] also do booklet-form cheat sheets.

Nonetheless, thanks to the author of this post for providing a useful collection of cheat sheets.


March 3rd, 2009

Really useful cheat sheet for begineers also. It is a gift to me. Thanks


March 5th, 2009

Very useful resource, Thanks :)

Jack Fisher

March 10th, 2009

very useful list thank you

citizen Vern

April 7th, 2009

Thanks thanks a million thanks!


April 13th, 2009

Thanks. Very good stuff


May 7th, 2009

Wow… so nice! Thanks a lot.


June 14th, 2009

This is one hot stuff!!! thank you very much for this… thank you thank you… I’ll be trying this and have this hacks configured


July 10th, 2009

its very usefull and easy understanting


July 15th, 2009

Damn, I had no idea there were so many of these. Thanks for the collection.


August 2nd, 2009

YAY! so glad i found this page! love it! just about O.D-ed on all the choices! haha. Thanks!!


August 22nd, 2009

Amazing this is the best collection of all times. Well done and thanks for all the hard work.

Kral Oyun

September 15th, 2009




September 27th, 2009

As a first year student working on a Bachelor’s Degree in Web Design & Development, I was thrilled to find these! I have used “cheat sheets” for all sorts of subjects in college and I’m happy to see web designers have this resource too.

I have a 2″ binder with ALL my cheat sheets in it – in protective plastic covers! (I’m so anal…)

How about cheat sheets for Mambo/Joomla, and maybe even Information Design?


November 2nd, 2009

good resources thanks i will definitely put to good use.

Nikita Sumeiko

December 18th, 2009

Very useful cheats. Thank you very much!


January 24th, 2010

This is really…nice collection and it’s very useful….Thanks a lot

Nikita Sumeiko

January 30th, 2010

Yeah, I like this collection too. Really nice one!


March 2nd, 2010

yeah, love it!!!
thanks to share.


March 6th, 2010

Yes! So useful for me !
I mean I will use thouse often !!

munir ardi

March 7th, 2010

I like all, thanks for share buddy


March 18th, 2010

very helpfull, thank you


April 8th, 2010

Oh hell yeah! This get a bookmark right away! Thanks a ton these. CSS ninja in the making.


April 13th, 2010

There is a new wonderful cheatsheets website!


May 26th, 2010

hi, i just download all of them, they’re useful for me, thank you, Good Files.

Mike Zeng

July 13th, 2010

Very useful resource… Thanks for sharing!


August 24th, 2010

thanks and great job , thanks for sharing : :))


September 14th, 2010

Excellent post. I already use some of these but the other ones are truly a treasure. Bookmarking this right away:)


September 18th, 2010

oh wow! thats some serious effort. :hatsoff:


September 24th, 2010

U blog mke me smile ^_^. thxs for this cheat sheet resource

Robert W.

October 11th, 2010

This is fantastic. Especially love the CSS Shorthand sheet! Thanks for the great resource!!


October 22nd, 2010

What a great resource, I’ve been trying to develop something like this for me, but always keep missing the pieces… much appreciated!

Sugar Free

January 7th, 2011

Great post, instant bookmark for me. I provide SEO for clients and am always being asked HTML and CSS questions. Now I have the answers…superb!


January 18th, 2011

Great resource – many thanks!

Bob Esponja

January 26th, 2011

Great Jquery cheat! thank you! Wp cheats links are not working. please if somebody have them and can upload them, will be very helpfully.

This icons are really usefull. Thanks!

February 15th, 2011

hanks and great job , thanks for sharing : :))

Regis Chapman

March 23rd, 2011

Very nice article. I’ll definitely link to it!


March 29th, 2011

thanks so much it is valuable


April 6th, 2011

thank for valuable information
I already use some of these but the other ones are truly a treasure
thank you so much

Ernest Wells

May 13th, 2011

This website is mostly a walk-by means of for all of the data you wished about this and didnít know who to ask. Glimpse right here, and also youíll undoubtedly discover it.


June 30th, 2011

million thanks for sharing such effective learning material

Joyeria Contemporanea

July 19th, 2011

Already use some of these but the other ones are truly a treasure..
thank you


July 29th, 2011

Thank you, thank you, thank you!


August 24th, 2011

This is a very full-featured list. Even though its older, it is still very helpful. Thanks!

Vikas Rattan

August 25th, 2011

most in use


September 16th, 2011

Its vy esy 2 understnd…
thnx 4 providin…..


October 4th, 2011

Awesome resource. Thank you.

Imagenes Linkmesh

October 15th, 2011

Hehe, thank you very much appreciated!

Calgary Web

October 8th, 2012


Leave a Comment

Subscribe to the comments on this article.