50+ Ultimate Useful Cheat Sheets for Web Developers and Designers

We presenting something special for Web Designers and developers even this useful roundup can help software developers too in their modern techniques based projects, Today we are sharing Most Useful Cheat Sheets, most of the time we need some rapid solution as we listing in this beautiful article fact whether you want to learn something quickly or don’t want to get stuck on some petty nuances while working on an important project, you have to use some handy cheat sheets.

Cheat Sheets are useful because Web Developers today need to remember more things to be effective doing their job than most people can manage. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, Python, Ruby-on-Rails, ajax, Adobe Photoshop, Adobe Illustrator, CSS3, HTML5, XHTML, XML, MooTools, ASP, VB Script, Prototype, MySQL, jQuery, SEO, htaccess, mod_rewrite, 3D Max, Cinema 4D R8, PHP and CSS.

Disable right-click

Disable right-click contextual menu.

return false;

Disappearing search field text

Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {
$(“input.text1”).val(“Enter your search text here”);

function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(”); }
input.blur( function(){
if( $.trim(input.val()) == ” ){ input.val(originalvalue); }

Cascading Style Sheet Level 2 Visual Cheat Sheet


CSS Cheat Sheet (V2)


HTML Cheat Sheet


jQuery 1.3.2 and 1.1.3 Cheat Sheets


jQuery 1.3 Cheat Sheet


Ruby on Rails Cheat Sheet


jQuery Cheat Sheet 1.2


Opening links in a new window

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
//Example 1: Every link will open in a new window
$(‘a[href^=”http://”]’).attr(“target”, “_blank”);
//Example 2: Links with the rel=”external” attribute will only open in a new window
this.target = “_blank”;
// how to use
<a href=”http://www.opensourcehunter.com” rel=”external”>open link</a>

HTML 5 Cheat Sheet


HTML5 Visual Cheat Sheet (Reloaded)


(X)HTML Elements and Attributes


HTML5 Canvas Cheat Sheet


Detect browser

Change/add something for a certain browser.

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= “1.8” ){
// do something

// Target Safari
if( $.browser.safari ){
// do something

// Target Chrome
if( $.browser.chrome){
// do something

// Target Camino
if( $.browser.camino){
// do something

// Target Opera
if( $.browser.opera){
// do something

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something

jQuery 1.4 API Cheat Sheet


jQuery 1.4 Cheat Sheet


Oscarotero jQuery 1.3 (as wallpaper)


jQuery Selectors


MooTools Cheat Sheet

A quick reference guide for MooTools, a super lightweight web2.0 javascript framework.


Adobe Illustrator Shortcuts


Preloading images

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
for(var i = 0; i<arguments.length; i++)=”” {=”” jquery(=””><img>”).attr(“src”, arguments[i]);
// how to use

HTML Color Codes Matching Chart

Another must have for designers. Matching color codes in CMYK, RGB and Hex was never this easy.


ASP/VB Script Cheat Sheet

The ASP cheat sheet is designed to act as a reminder and reference sheet, listing various of the oft-forgotten parts of ASP / VBScript. I no longer work full-time with ASP, so to ensure the cheat sheet was as helpful as possible, I roped in one Allan Wenham, an excellent ASP / .NET developer, to assist.


HTML Character Entities Cheat Sheet

This contains a list of the assigned character codes in HTML, with an example of how they are displayed, and description.


MySQL Cheat Sheet

A quick reference guide for MySQL, including functions (both in MySQL and PHP), data types, and sample queries. Available in PDF and PNG formats.


CSS Styleswitcher

Switch between different styles?

$(document).ready(function() {
$(“a.Styleswitcher”).click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$(‘link[rel=stylesheet]’).attr(‘href’ , $(this).attr(‘rel’));
// how to use
// place this in your header
<link rel=”stylesheet” href=”default.css” type=”text/css”>
// the links
<a href=”#” class=”Styleswitcher” rel=”default.css”>Default Theme</a>
<a href=”#” class=”Styleswitcher” rel=”red.css”>Red Theme</a>
<a href=”#” class=”Styleswitcher” rel=”blue.css”>Blue Theme</a>

JavaScript Cheat Sheet


Megapixels and Maximum Print Size Chart


The Web Developer’s SEO Cheat Sheet


htaccess Cheat Sheet


mod_rewrite Cheat Sheet


Columns of equal height

If you are using two CSS columns, use this to make them exactly the same height.

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
// how to use
$(document).ready(function() {

mod_rewrite Cheat Sheet

A quick reference guide for mod_rewrite, including server variables, flags and regular expression syntax. Also includes examples of commonly-used rules.


Computer Arts Keyboard Shortcuts

An essential shortcut guide from the world’s best-selling creative magazine.


Gosquared CSS help sheets


CSS Shorthand Cheat Sheet


W3C – Cascading Style Sheets, Current Work


CSS support in Opera 9.5


RGB Hex Colour Chart


XML (eXtensible Markup Language) in one page


Script.aculo.us Cheat Sheet

A field guide to Scriptaculous.


PHP Cheat Sheet


Font resizing

Want to let the users change there font size?

$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $(‘html’).css(‘font-size’);
$(‘html’).css(‘font-size’, originalFontSize);
// Increase the font size(bigger font0
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
// Decrease the font size(smaller font)
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;

Smooth(animated) page scroll

For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
.animate({scrollTop: targetOffset}, 900);
return false;
// how to use
// place this where you want to scroll to
<a name=”top”></a>
// the link
<a href=”#top”>go to top</a>

Get the mouse cursor x and y axis

$(document).ready(function() {
//display the x and y axis values inside the div with the id XY
$(‘#XY’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
// how to use
<div id=”XY”></div>


jQuery timer callback functions

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);

Python Cheat Sheet

The Python Cheat Sheet, a quick reference guide for the Python programming language.


Remove a word

$(document).ready(function() {
var el = $(‘#id’);
el.html(el.html().replace(/word/ig, “”));

Verify that an element exists in jQuery

$(document).ready(function() {
if ($(‘#id’).length) {
// do something

Make the entire DIV clickable

$(document).ready(function() {
//get the url from href attribute and launch the url
window.location=$(this).find(“a”).attr(“href”); return false;
// how to use
<div><a href=”index.html”>home</a></div>




  1. Pingback: All Teched Up! « Caintech.co.uk April 27, 2010
  2. Pingback: Daily Digest for April 28th | Maxilprof April 28, 2010
  3. Pingback: Formulari e cheatsheet | ricivt.com April 28, 2010
About Dzinepress | Advertise | Contact | Privacy Policy | Community News | Submit News