50+ Ultimate Useful Cheat Sheets for Web Developers and Designers

CSS, HTML, Tutorials

cheat-sheet-530
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.

$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
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”);
textFill($(‘input.text1′));
});

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

3

CSS Cheat Sheet (V2)

4

HTML Cheat Sheet

5

jQuery 1.3.2 and 1.1.3 Cheat Sheets

6

jQuery 1.3 Cheat Sheet

7

Ruby on Rails Cheat Sheet

8

jQuery Cheat Sheet 1.2

9

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
$(‘a[@rel$='external']‘).click(function(){
this.target = “_blank”;
});
});
// how to use
<a href=”http://www.opensourcehunter.com” rel=”external”>open link</a>

HTML 5 Cheat Sheet

10

HTML5 Visual Cheat Sheet (Reloaded)

11

(X)HTML Elements and Attributes

12

HTML5 Canvas Cheat Sheet

13

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

14

jQuery 1.4 Cheat Sheet

16

Oscarotero jQuery 1.3 (as wallpaper)

17

jQuery Selectors

18

MooTools Cheat Sheet

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

19

Adobe Illustrator Shortcuts

20

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
$.preloadImages(“image1.jpg”);
});
</arguments.length;>

HTML Color Codes Matching Chart

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

21

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.

22

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.

23

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.

25

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

26

Megapixels and Maximum Print Size Chart

27

The Web Developer’s SEO Cheat Sheet

28

htaccess Cheat Sheet

29

mod_rewrite Cheat Sheet

31

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;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(“.left”));
equalHeight($(“.right”));
});
});

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.

32

Computer Arts Keyboard Shortcuts

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

33

Gosquared CSS help sheets

34

CSS Shorthand Cheat Sheet

35

W3C – Cascading Style Sheets, Current Work

36

CSS support in Opera 9.5

37

RGB Hex Colour Chart

38

XML (eXtensible Markup Language) in one page

39

Script.aculo.us Cheat Sheet

A field guide to Scriptaculous.

40

PHP Cheat Sheet

41

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’);
$(“.resetFont”).click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
// Increase the font size(bigger font0
$(“.increaseFont”).click(function(){
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)
$(“.decreaseFont”).click(function(){
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;
$(‘html,body’)
.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() {
$().mousemove(function(e){
//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.

42

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() {
$(“div”).click(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>

});

http://logoorange.com/color/color-codes-chart.php

Enjoyed this post?

Don't forget to subscribe to our RSS-feed and follow us on - for recent updates

About the Author

Comments and Discussions

  1. Hermitbiker, 26 April 2010

    …. fantastic, this must be “Cheat-Sheet City”, a fabulous post from Casper, getting all our ducks in a row, thanks !! I want to thank TutorialLounge for the share and “DzinePress” for the showcase, now…. if I can get these printed out I will be even happier !! :)

  2. Jordan Walker, 26 April 2010

    What a resource, glad I ran across this!

  3. 50 chuletas para desarrolladores web y diseñadores | Recursos para Diseñadores Gráficos y Web | Creativos Online, 26 April 2010

    [...] Fuente | 50 chuletas para desarrolladores web y diseñadores [...]

  4. Noah Rainey, 26 April 2010

    Hey cool list. I found the RGB Hex Colour Chart very helpful. In fact I was in search of a color chart that explained this and came across this post. Anyways great work. Also what theme is this blog ran off of?

  5. kad1r, 27 April 2010

    They are very useful. I added to my delicious. Thanks.

  6. Quick Links for April 26th | Best Design Blog Ever, 27 April 2010

    [...] 50+ Ultimate Useful Cheat Sheets for Web Developers and Designers – Nice collection. I have a few of these. Not as useful if they’re not printed out, IMO. I can easily hit the official doc site or Google if these aren’t at hand. [...]

  7. Tweets that mention 50+ Ultimate Useful Cheat Sheets for Web Developers and Designers + -- Topsy.com, 27 April 2010

    [...] This post was mentioned on Twitter by Adam Smith, Suzy234. Suzy234 said: RT @atsmith: 50+ Ultimate Useful Cheat Sheets for Web Developers and Designers + http://twurl.nl/os14fa [...]

  8. All Teched Up! « Caintech.co.uk, 27 April 2010

    [...] ssh session Enemy Lurks in Briefings on Afghan War – PowerPoint – NYTimes.com 50+ Ultimate Useful Cheat Sheets for Web Developers and Designers The iPad, and the Staggering Work of Obviousness : Cheerful 9 Photoshop Editing Tips Web Developers [...]

  9. Daily Digest for April 28th | Maxilprof, 28 April 2010

    [...] 50+ Ultimate Useful Cheat Sheets for Web Developers and Designers | Dzinepress. [...]

  10. Narendra Keshkar, 29 April 2010

    Really valuable list and very useful for designers.

  11. Bryan Broussard, 3 May 2010

    Great collection of cheat sheets! Thank you for the time it took you to compile such a great resource!

  12. lono, 7 May 2010

    great collection! a real handy resource!!

  13. louis vuitton, 22 June 2010

    everyone should learn as smart developer.

  14. ON&E BLOG, 19 July 2010

    huge collection. very useful post
    thanks

  15. Damian, 8 April 2011

    Pretty all inclusive list if cheats. Wouldn’t want to be a development virgin cause theres lots of things on these lists that should not be used. Once again cheating will get you caught out!

  16. Nancy, 5 August 2013

    Thanks for posting all these. I generally use the PHP and Photoshop cheat sheets a lot. I like the other cheat sheets you found. I am going to bookmark this page for future reference. I can see needing some of the other cheat sheets in the near future. Thanks

About Dzinepress | Advertise | Contact | Privacy Policy | Community News | Submit News