Cheat Sheets for Front-end Web Developers
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
1. HTML Help Sheet
2. HTML Cheat Sheet
3. HTML Character Entities Cheat Sheet
4. XHTML Cheat Sheet v. 1.03 – PDF
CSS
5. CSS Cheat Sheet (V2)
6. CSS Cheat Sheet
7. CSS Shorthand Cheat Sheet
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
12. JavaScript Cheat Sheet
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
17. mootools 1.2 cheat sheet
18. jQuery Cheatsheet
19. jQuery 1.2 Cheat Sheet
20. jQuery Visual Map – PNG
Miscellaneous
21. RGB Hex Colour Chart
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.
151 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!
Jamal
July 7th, 2008
Awesome, very useful!
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! :)
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 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/
lucky
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!
stelt
September 8th, 2008
Nice, but you’re missing SVG
kevin
September 8th, 2008
Any cheat sheets on RubyRails?
Vijay
September 8th, 2008
Hi,
I am a fan of cheat sheets… and this site takes the Michael phelps persona…
Keep up the good work
Vijay
Calvin Gilbert
September 8th, 2008
I would like to see some Ruby cheat sheets as well.
Aniza
September 11th, 2008
very cool indeed!! Keep up the good work
DeMoehn
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
or
ror cheat
http://delicious.com/search?p=ruby+cheat&u=&chk=&context=all&fr=del_icio_us&lc=0
and you’ll find plenty to choose from.
Dirk
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 ;)
Andrew
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
HHO
November 4th, 2008
Great collection of goodies
Roman Ozana
November 6th, 2008
Gogole Maps Cheat Sheets
http://www.nabito.net/google-maps-cheat-sheets/
Impala
November 13th, 2008
Thanks SixRevisions team for the cheat sheet.
Prof. Wurst
November 26th, 2008
Thanks for sharing! Helps me a lot!
Wiliam
December 8th, 2008
Great collection. Thanks… :)
Nick
January 4th, 2009
Damn you’re good at putting together useful collections like this. I’ll definitely refer to this in the future. Thanks!
scirad
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 – http://www.etkit.com are offering a whole lot of cheatsheets in book format.
Indigold
January 23rd, 2009
@ scirad – Visibone [http://www.visibone.com] also do booklet-form cheat sheets.
Nonetheless, thanks to the author of this post for providing a useful collection of cheat sheets.
ArjunanMunuswamy
March 3rd, 2009
Really useful cheat sheet for begineers also. It is a gift to me. Thanks
Musafar
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!
Grant
April 13th, 2009
Thanks. Very good stuff
Artover
May 7th, 2009
Wow… so nice! Thanks a lot.
Whatsacoder
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
lijas
July 10th, 2009
its very usefull and easy understanting
Robert
July 15th, 2009
Damn, I had no idea there were so many of these. Thanks for the collection.
8apixel
August 2nd, 2009
YAY! so glad i found this page! love it! just about O.D-ed on all the choices! haha. Thanks!!
Aroma
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
Thanks.
Kral OYUN
BayAreaRed
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?
Mike
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!
Aravind
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!
septianw
March 2nd, 2010
yeah, love it!!!
thanks to share.
Rukai
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
pinrangblog
March 18th, 2010
very helpfull, thank you
Chicago
April 8th, 2010
Oh hell yeah! This get a bookmark right away! Thanks a ton these. CSS ninja in the making.
Foo
April 13th, 2010
There is a new wonderful cheatsheets website!
Quicklycode: http://www.quicklycode.com
Sauge
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!
abdel
August 24th, 2010
thanks and great job , thanks for sharing : :))
Chicago
September 14th, 2010
Excellent post. I already use some of these but the other ones are truly a treasure. Bookmarking this right away:)
VIVROCKS
September 18th, 2010
oh wow! thats some serious effort. :hatsoff:
Numous
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!!
Surfedia
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!
Wyrdbeard
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.
regards!
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!
Mohammed
March 29th, 2011
thanks so much it is valuable
hanabi
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
regard
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.
ghansham
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
Mariann
July 29th, 2011
Thank you, thank you, thank you!
Troy
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
Mahe
September 16th, 2011
Its vy esy 2 understnd…
thnx 4 providin…..
Andreas
October 4th, 2011
Awesome resource. Thank you.
Imagenes Linkmesh
October 15th, 2011
Hehe, thank you very much appreciated!
Calgary Web
October 8th, 2012
Perfect.
Thanks
Leave a Comment