30+ Useful cheat sheets for web developers

Cheat sheets, in case you don’t know, are pieces of information grouped and well organised in one single sheet to provide you an escape to those memory flaws we sometimes have. In this case, they’re big images with handy and useful information you can use to practise and remember some of the most common pieces of code, shortcuts and more in this web design world. During my navigation I found more than a dozen and can be downloaded for free. You can always contribute to the addition of elements in this collection, just comment down below or send me an email; if you believe there’s a mistake or a broken link, feel free to notify me so I can correct it.

Click on the image to download or go to the author’s download page.

Cheat sheets for HTML

Basic HTML Coding Cheat Sheet

basic_html_coding_cheat_sheet_by_moon_selena-d2zfojk

HTML Cheat Sheet

html-cheat-sheet-v1

HTML5 Canvas

HTML5_Canvas_Cheat_Sheet

HTML5 Smashing Magazine’s Cheat Sheet

preview

HTML Character entities

html-character-entities-cheat-sheet

HTML5 Event handler content attributes

html5_cheat_sheet_event_attributes

HTML5 Visual Cheat Sheet by Woork

3894233282_dc6c59e45c_b

CSS and CSS3 Cheat Sheets

GoSquared CSS2 (and CSS3) Cheat Sheets

CSS-Help-Sheet-large

Most practical CSS Sheet

css-cheatsheet-portrait1

Smashing Magazine’s CSS3 Cheat Sheet

previewcss

CSS Cheat Sheet Version 1

css-cheat-sheet-v1

CSS Shorthand Properties

cssShortHandProperty-

Frameworks’ Cheat Sheets

Bootstrap 2 Cheat Sheet

bootstrap-cheatsheets-1

Foundation Cheat Sheet (web based)

device-bg3

JavaScript plus jQuery and more frameworks

JavaScript Cheat Sheet Version 1

javascript-cheat-sheet-v1

JavaScript Cheat Sheet

javascript-cheat-sheet

jQuery 1.3.2 and 1.1.3 Cheat Sheets

JQueryCheatSheet-1.3.2

jQuery 1.4 Cheat Sheet

jquery14

jQuery Wallpaper (1.4.2)

jQuery_Cheatsheet_1.4

Mootools Basics Cheatsheet

mootools

Prototype 1.5.0 Cheat Sheet

prototype_1.5.0_snookca

WordPress and other CMS/Platforms

Blogspot / Blogger Cheat Sheet (English and Spanish)

Blogger-Cheat-Sheet-1-de-2

WordPress Help Sheet

wordpress_helpsheet

WordPress Cheat Sheet by Tuts+

wordpresscheat

The WordPress Visual Loop

wordpress_cheat_sheet_loop_visual_guide_preview

7 Drupal Sheets by Martin Valasek

cheat-sheets

Joomla! 1.5 Basic Template Cheat Sheet

joomla15

PHP Cheat Sheets

GoSquared’s PHP Help Sheet

phphelp

Emezeta’s PHP Cheat Sheet

phpemezeta

Other useful Cheats Sheets for you

Markdown Cheat Sheet

markodwncheat

Emmet / Zen Coding Cheat Sheet

emmetsheet

XML Cheat Sheet

xmlcheat

SEO Cheat Sheets for Web Developers

521c29a6532fa7.53571159

And that’s all, old sport! I will add more for sure but you have to contribute too, I tried to find a Tumblr cheat sheet, I guess I’ll have to do it myself hehe, thanks for staying and checking out these magnificent cheat sheets. There are more types of these, for example, graphics software such as Photoshop has a shortcuts’ cheat sheet and more. Though you can access them now, maybe in a near future they won’t be available for us, but I saved a good percentage of the cheat codes, so if that happens just notify about some sheet down and I will re-direct the link to the full sized image for you to download. Almost all of them are printable, image based and can be posted on a wall, reduced to a convenient size or whatever you choose to do with them. See you all in the next post! 🙂

14 thoughts on “30+ Useful cheat sheets for web developers

  1. Hi everyone! I’m looking for a complete list of data-* attributes used in bootstrap. Pease help me with any info that can help me to find it and download. Would be nice to have a pdf format file. Thanks in advance!

  2. Reblogged this on tomvalorsa. and commented:
    Here’s a great collection of cheat sheets ready to be used by web developers, put together by Creativenauts. This is definitely something I’ll be keeping handy for revision and, well, cheating!

  3. Reblogged this on Ginger Junk and commented:
    This is a great set of Cheat Sheets that everyone should have next to them while coding their websites. Thanks CreativeNauts!

Ask, comment, or give feedback :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s