Must-Have Cheat Sheets for Web Designers

A web designer and developer needs to constantly switch between different software and applications to excel in their work. This requires them to remember a lot of things for each application which may not be possible every time, since there is a constant development and updates in the applications. A reference guide may seem to be a good option, but they are printed in a huge size where searching for the needed key takes a much longer time.

To overcome this difficulty, Cheat sheets have been designed which contain all the shortcuts in a single page which makes it easier to view the whole scenario. They are used as a reference guide which can be set as your  desktop background too, which makes the work all the more easier without the need to go and search it elsewhere or paste it anywhere for a quick glance.

We present here with a collection of cheat sheets for working in CSS, HTML / XHTML, Javascript, jQuery, .NET, PHP, ASP, Ruby on Rails, MySQL, Keyboard Shortcuts for Photoshop and Photoshop tools, InDesign, Illustrator and Fonts & Typefaces in Windows & Mac, Color coding and  Compatibility table between the browsers.

Color Coding

Colors speak a lot about the webpage and choosing the right combination of colors plays an important step while designing. Here are some of the tools which display the web safe colors as well as convert the colors from RGB to Hex and lets you calculate the print dimensions and more.

Color Code matching chart

Color Codes Matching chart produces a conversion of colors between the RGB code and a subset of CMYK, i.e. you could obtain the original RGB colors from the converted CMYK colors.

Megapixel chart

A chart which gives you the calculation about how much mega pixel based camera you need for a photo quality print of certain dimension. The Mega pixel Chart shows the print dimensions on the top and left side in inches at 300 ppi which is the photo quality for most of the books and magazines.

Color Chart

RGB Hex color chart which is available in PDF and PNG formats which shows the 216 web-safe and non-dithering colors with pre-defined color names. The color chart can be fitted in a standard A4 size of paper making it printer friendly.

BGColors

A color chart showing 234 different Web safe colors for designing your web page with subtle variations of each color in HEX values.

Color Chart

A color chart displaying the 216 browser safe colors in Hex values with each row showing the subtle variations of each color.

CSS

The cheat sheets for CSS describe the priperties for CSS like Selectors, Pseudo-classes, fonts, text, background, Paging, Interface along with the properties and a brief about each for a quick glance.

CSS Visual Cheat sheet

CSS2 Visual Cheat Sheet contains essential references to CSS2 properties with detailed descriptions and sample code describing the syntax, pseudo classes, background, border, dimensions, padding and more.

CSS Cheat sheet

CSS Cheat Sheet by Added Bytes in its second version lists out the selectors and properties along with pseudo-selectors, units, Box-modal and Properties list in three modals.

Current work – CSS

Want to upgrade CSS2 to CSS3, Know your priorities and arrange your work setting them as High, Medium or Low and get to know about the latest developments going on in CSS3.

CSS Opera 9.5

A table listing out the CSS Selectors, Properties, At-Rules and CSS3 Media Queries and specifying their levels, where they support the Wireless CSS in Opera 9.5 which supports the CSS3 Speech Module which are also referred in the table.

HTML & XHTML

The cheat sheets for HTML / XHTML serve you a quick reference about the HTML tags, Character entities, Attributes, Events, Characters and their code and entities found in HTML and XHTML.

HTML Cheat sheet

A quick reference for HTML which comprises of Tags, HTML character entities, empty tags, attributes and events.

HTML5 Cheat sheet

HTML5 which is seeing a fast growth and beating XHTML2, even though wont be completed by 2022 has released a printable HTLM5 cheat sheet which lists the supported tags, descriptions, attributes and their support in HTML 4

HTML5 Visual Cheat sheet reloaded

This visual cheat sheet for HTML5 is presented in the form of a grid containing the HTML tags and their attributes supported by HTML5 in a single sheet.

HTML Canvas Cheat sheet

The HTML Canvas Cheat Sheet displayed as a single page in PNG format shows the canvas elements, 2D Context, Compositing, Colors, Styles and Shadows and Text explaining the Attributes and Methods associated with each of these.

Appendix of HTML / XHTML character entities

A complete appendix of HTML / XHTML Character Entities.

HTML Character entities

HTML Character Entities Cheat Sheet has four columns which are further divided into three, which are the Actual code of the character, the character itself and the description of the character in each column.

XHTML Character entitiy reference

An XHTML Character Entity reference of 252 entities in HTML 4 and XHTML 1.0 where the entities are divided as Shapes & Arrows, Latin Characters, International characters, Mathematical Operators, Symbols with a tool tip giving the name of the entity.

Fonts & Typefaces

Font and Typeface are the backbone for any web page, these tools give you the fonts which can be used for both Windows and Mac, know about the complete anatomy of font and which font can work with which font?

Fonts for Windows & Mac

A font family describing set of fonts common to both Windows and Mac and are browser safe. A table describing the fonts in Normal and Bold style.

Mixing Typefaces

A combination of fonts to determine the typestyle compatibility is given as a table where the numeral I indicated for mixing of fonts at will and typestyles with numeral 3 should be avoided. i.e. Serif fonts can be combined with any serif style

Font anatomy

A complete anatomy of a font describing the minute details like Stroke, Arm, Flag terminal, Diacritic eye, Spur counter, ear link, Axis, Arc of Stem, Hairline, Tail and a lot other details shown.

Periodic table of Typefaces

A table of fonts arranged in a Periodic table as ‘Periodic Table of Typefaces’ in different backgrounds and styles which can be used as a nice print and purchased via Pay pal.

Javascript

All the methods, Objects, Arrays, numbers, patterns and more in Javascript with small descriptions can be referred for a quick glance in these cheat sheets.

Javascript Cheat sheet

A JavaScript cheat sheet which lists out the Methods and DOM Methods with Object, String, RegEx, Array, Number, Modifiers and Patterns as Regular Expressions everything in a single page in PNG format.

Javascript Reference

A JavaScript Reference card by Kathleen M.Goelz and Carol J.Schwartz describing the data types, variables, objects, functions, methods, operators in details specifying about each attribute with examples.

jQuery

The most popular Javascript library, jQuery which has its own Constructor, Setter method, Getter method, Property, Functions, Boolean, String, Array, Object, DOM, XML elements and a lot more are listed out in these cheat sheets.

API Cheat cheet for jQuery 1.4

API Cheat Sheet for jQuery 1.4 gives a small description as a tool tip for all the API’s and a click will take you to a detailed description specifying their description, example and a demonstration.

jQuery 1.2 Cheat sheet

jQuery 1.2 Cheat Sheet lists out the Constructor, Setter method, Getter method, Property, Functions, Boolean, String, Array, Object, DOM, XML elements, Http request under the appropriate categories.

jQuery 1.3 cheat sheet

jQuery 1.3 Cheat Sheet gives the Function and Returns for Core, jQuery Object Assessors, Data, Plugins, Class, HTML, Text, Value. Selector and Returns for Basic, Hierarchy, Basic filters, Content filters. Traversing, Finding and many other details.

jQuery 1.3.2 Cheat sheet

A jQuery 1.3.2 cheat sheet by Matt Kruse which describes the Core, Data, Attributes, DOM Manipulation, CSS, AJAX, Effects with a detailed description about all the attributes.

jQuery 1.4 Cheat sheet

jQuery 1.4 Cheat sheet lists out the Core, Attributes, Selectors, Effects, CSS with Style properties, class attributes and offset, Utilities, Traversing as Tree traversal, Filtering and Miscellaneous traversal, AJAX, Events, Data and more.

jQuery Selectors

Bear Bibeault and Yehuda Katz brief you about the jQuery selectors, its Types, Custom jQuery selectors, Basic CSS selectors, Matched set methods, Tips about the selectors and lot more.

jQuery Cheat sheet

A complete list of the Elements, String, Map, Functions, Objects, Content, Classes, and Numbers in the functions where they are used presented as a list for a quick reference.

jQuery Cheat sheet wallpaper

A colorful representation of different categories in jQuery 1.3 Cheat sheet as wallpaper with Selectors, Attributes, Events, Effects, AJAX, Traversing and more.

jQuery 1.2 Cheat sheet

A jQuery 1.2 Cheat Sheet with Selectors, AJAX, Manipulating, Traversing, Core UI Effects with the functions under each of them listed separately under different colors making it easy to view and understand.

.NET

Quickly glance about the standard date format settings from the Date Time format settings cheat sheet.

.Net Standard Date Time format settings

A table specifying the .NET Standard Date Time format settings with a Specifier, Name and the description for the same.

Browser & W3C

Each browser has its own settings for each kind of elements, so compare different elements from each of CSS, CSS3, CSS filters with different browsers like IE, Firefox, Safari Chrome and Opera.

Compatibility Master Table

A Compatibility Master Table which compares the CSS2, CSS3, DOM core, DOM HTML, DOM CSS and CSSObjectModelView in different versions of IE, Firefox, Safari, Chrome, Opera and Konqueror.

CSS Filters / Hacks

A table showing the CSS filters or CSS hacks with all the functions and whether the browser will support these in Windows, Mac OS X, Macintosh and others with a green color for a Yes and a Red color for a No.

Mootools

Quickly refer the different Arrays, Functions, Strings and more for Mootools from this Mootools Cheat sheet.

Mootools Cheat sheet

A cheat sheet for Mootools with a revised version displaying Array.js, Function.js, String.js, Moo.js, AJAX.js, Element.js, DOM.js, Fxpack.js and other categories with the functions under each of it.

PHP

Go through the Functions, Variables, Expressions, Modifiers, Data Types and other from the PHP cheat for different versions.

PHP Cheat sheet

A PHP Cheat sheet which lists out the functions which are inconsistent with PHP, SuperGlobal variable names, Date Formatting, Regular Expression syntax, PCRE modifiers and fopen() modes which can be downloaded as PNG or PDF formats.

PHP Comparison cheat sheet table

This PHP Cheat sheet gives a comparison table for empty(), gettype(), is_null(), isSet() and bool() with different values which returns the variable or the value in True of False. Another comparison table of values with the operator == and ===.

PHP Rererence Sheet

This reference sheet gives you the basics of PHP starting with the Data Types, Declaring Variables, Array and its functions, Operators, Strings, Cookies, Seesions, Error Handling, Loops and Class Structure.

PHP5 Online cheat sheet 1.3

PHP5 Cheat sheet 1.3 explains about the Type like Boolean, Int, String etc, String and Arrays with their functions and conversions, Classes – their definition, member declaration and visibility, Date / Time and about the Predefined variables.

MySQL

Give a quick glance to your MySQL Functions, Data types and learn from the sample queries from the cheat sheets displaed below.

MySQL Cheat sheet

MySQL Cheat Sheet designed as a reference and reminder cheat sheet includes the MySQL Functions, Data Types, Functions in PHP and a short list of sample queries with brief explanation.

mod_rewrite( ) Cheat Sheet

A Cheat sheet for mod_rewrite() which lists out the Regular Expression syntax, Redirection Header codes, RewriteRule Flags, RewriteCond Flags, Example Rules, Server variables and Directives.

Keyboard Shortcut

All the shortcuts cannot be always remembered and tough to note it down each and every time, cheat sheets as keyboard shortcuts for Photoshop and other design programs, which can be galnced in a single page or set as a desktop background presented in this section.

Keyboard shortcuts for Photoshop

Keyboard Shortcuts especially for Photoshop presented as a Cheatsheet which features a typical PC keyboard with the shortcut and its icon printed on the individual key with the combinations too like ‘t’ for Type tool, Ctrl + t for Transformation tool. Mac users can use ctrl for the Command key.

Keyboard shortcuts Cheat sheet

For a designer, keyboard shortcuts can be of great help. This is a presentation of shortcuts for Photoshop, Illustrator, Macromedia Freehand Cinema 4D and 3D studio Max. Mac users can use Ctrl for Cmd and Alt instead of Opt.

Adobe

Refer your Flash CS4, Illustrator CS3, InDesign CS2, Pen tool and Brush tool shortcuts from these cheat sheets without the need of remembering each and every shortcut.

Flash CS4 PC Shortcuts

Cheat sheet presenting the shortcuts for File Menu, Edit Menu, View Menu, Insert Menu, Text Menu, Commands Menu, Debug Menu, Window Menu of Adobe Flash CS4.

Illustrator CS3 for Mac

Keyboard shortcuts for Mac users for Illustrator CS3 featuring the Tools, Selecting and Moving, Path editing, Function keys or Panel shortcuts, Type, Viewing and guides etc.,

InDesign CS2 Shortcuts

Adobe InDesign CS2 Keyboard shortcuts for Mac users for Adjusting the font size, leading, kerning & word spacing, fitting content, zooming, navigating & scrolling, selecting text and more.

Adobe Pen tool Cheat sheet

One tool similar to Photoshop, Illustrator and InDesign is the Pen tool which may be confusing while using the mouse, here is the cheat sheet for Adobe Pen Tool about creating a straight connecting line, selecting and moving, and forming curved lines and more.

Photoshop Brush tool

A cheat sheet presented for Photoshop Brush tool for controlling the size, opacity, hardness, flow, Brush tool cursor, Brush tool panel and Airbrush mode.

Black & White Cheat sheet for Photoshop

Converting an image to Black & White has many ways in Photoshop, out of which one is using Filters. An exclusive Photoshop for creating Black & white images in Photoshop in different methods with explanation.

ASP

ASP / VB Script Cheat sheet

ASP cheat sheet listing the Regular expressions, Date function arguments, Redirect with 301 Header, Include a File, Function argument orders, Common LCID Codes, Constants, Methods, Properties, Functions and many parts of ASP / VB Script.

Ruby on Rails

 

 

 

Ruby on Rails Cheat Sheet

 

 

 

A cheat sheet or a reference guide for Ruby on Rails which contains the Default directory structure, Methods, Pre-defined variables, Reserved words and Regular expression syntax.

 

 

 

 

Make sure to join our Twitter and subscribed to our RSS feed? If not, join us now to receive updates of new posts and free resources.