Helping students gather information to pursue a creative career

100 Terrific Web Design Cheat Sheets that Will Save you Time, Money and Mistakes

[del.icio.us] [Digg] [Facebook] [Mixx] [Reddit] [StumbleUpon] [Twitter] [Email]

By Nicole White

Most web designers know that cheat sheets are incredibly useful. You can use them for quick reference, easy learning, and more. In this list, we’ve compiled an incredible collection of the 100 best and most useful cheat sheets out there.

Color

Quickly reference color codes and web safe colors by making use of these charts.

  1. Color Reference Hexagon Mouse Pad: Keep your colors right at hand using this mouse pad.
  2. RGB Hex Colour Chart: Get the color codes for RGB Colors using this chart.
  3. Web Safe Color Chart: Find colors that are safe for use on the web with this chart.
  4. RGB Values for Macbeth Color Checker: Find values for a variety of colors, and what they can be used for, in this resource.
  5. RGB Hex Colour Chart: Here you’ll find an RGB color chart with 216 web safe colors, printable on an A4 piece of paper.
  6. Color Reference Guide: This reference guide from Veign is a great visual reference for color codes.

Adobe

These cheat sheets will help you with Adobe products including Photoshop, Flash, and Illustrator.

  1. Adobe Pen Tool Cheatsheet: Use this cheat sheet to get quick reference for the pens in Photoshop, Illustrator, and InDesign.
  2. Photoshop CS3 Keyboard Shortcuts Cheat Sheet: Using this cheat sheet, you’ll be able to speed through editing with keyboard shortcuts.
  3. Photoshop CS4 Keyboard Shortcuts Cheat Sheet: Get an updated list on shortcuts available in Photoshop CS4.
  4. Photoshop Brush Tool Cheatsheet: This cheatsheet for Photoshop offers a great reference for all of the brush tools and what you can do with them.
  5. Flash CS3 Cheat Sheet: This cheat sheet offers a visual reference for Flash CS3.
  6. Adobe Flash CS4 OS X Keyboard Shortcuts: This cheat sheet will provide you with all of the keyboard shortcuts for Adobe Flash CS4 on OS X.
  7. Adobe Illustrator Keyboard Shortcuts-Mac: This cheat sheet offers Illustrator keyboard shortcuts for the Mac.
  8. Dreamwaver Quick Reference Guide: This Dreamweaver quick reference card will make it easy to get things done in Dreamweaver CS3.
  9. Dreamweaver CS3 for Mac Quick Reference Guide: Use this guide to get quick reference for Dreamweaver on the Mac.
  10. Photoshop Toolbox Reference: In this toolbox reference, you’ll find out what icons mean, their shortcuts, and what they do.
  11. Keys for using the Layers Palette: Learn how to better make use of the Layers palette with this reference.
  12. Photoshop 911 FAQ and Short Tips: Make Photoshop a lot easier by using this gem of information.
  13. Photoshop Lasso Tool Cheatsheet: Learn what the various Lasso tools do with this cheat sheet.
  14. Black and White Cheat Sheet: Convert your images to black and white skillfully with this cheat sheet.

HTML

Get help with HTML and XHTML from these references.

  1. HTML/XHTML Character Entities: Find out the code for various characters on this reference.
  2. HTML Cheatsheet from Web Monkey for Beginners: HTML beginners will appreciate this HTML cheat sheet.
  3. (X)HTML Elements and Attributes: Find tags and attributes easily for XHTML here.
  4. HTML Help Sheet: Get over your panic with this HTML help sheet from GoSquared.
  5. HTML Tags: VisiBone’s HTML cheat sheet is free and handy.
  6. Commonly Used HTML Elements and Their Corresponding Codes: This cheat sheet shows elements in action, along with their codes.
  7. XHTML Cheat Sheet: Get quick look at common XHTML practices from this cheat sheet.
  8. HTML Cheat Sheet: This cheat sheet will help you out if you forget some HTML tags.
  9. XHTML Cheat Sheet: Get a clean and easy reference to XHTML with this cheat sheet.
  10. HTML Code Cheat Sheet: You can look up HTML tags quickly and easily with this cheat sheet.
  11. HTML & XHTML Tag Quick Reference: Using this quick reference, you’ll see some of the most commonly used HTML and XHTML tags.
  12. HTML Tags/Codes Cheat Sheet: You’ll be able to stay up to date on current tags and codes with this cheat sheet.
  13. XHTML Character Entity Reference: With this reference, you’ll have a handy way to look up character entities in XHTML.
  14. HTML Cheat Sheet: This cheat sheet is easily printed as a one page A4 document.

CSS

You’ll find quick reference and more in these CSS cheat sheets.

  1. YUI Library: Get guides for the Yahoo! user interface library in this reference.
  2. CSS Level 1 Properties Cheat Sheet: Get the lowdown on level 1 properties through this CSS cheat sheet.
  3. CSS Help Sheet: Get a little help from this CSS cheat sheet.
  4. CSS Cheat Sheet: Easily reference syntax and more using this cheat sheet.
  5. Blueprint CSS Cheat Sheet: Use this cheatsheet for help with Blueprint CSS.
  6. CSS Level 1 and CSS P Quick Reference Charts: This cheat sheet covers level 1 and processing.
  7. Apple’s CSS Cheat Sheet Widget: With this Mac dashboard widget, you’ll be able to keep CSS references close at hand.
  8. CSS Panic Guide: Find lots of CSS help through this panic guide.
  9. Cascading Style Cheatsheet: This cheat sheet looks over the basics and beyond in CSS.
  10. CSS Cheat Sheet: You’ll get easy reference for CSS using this cheat sheet.
  11. CSS Cheat Sheet: Pete Frietag’s CSS Cheat Sheet offers a really simple and easy look at CSS.
  12. CSS Layout Cheat Sheet: About.com’s cheat sheet covers the basics of CSS layout.
  13. Cascading Style Sheets Quick Reference Guide: You’ll get a handy look at CSS with this guide.
  14. CSS Shorthand Cheat Sheet: Get a shorthand reference for CSS from this cheat sheet.
  15. CSS Cheat Sheet: Here you’ll find a cheat sheet for creating CSS files.
  16. CSS Level 2 Quick Reference: Use this resource to get quick reference for CSS Level 2.

AJAX

Make use of these cheat sheets to make AJAX easy.

  1. AJAX Cheat Sheet: Here you’ll find definitions and ideology for AJAX.
  2. AJAX Library Cheat Sheet: Check out this cheat sheet to find JavaScript base type extensions and more.
  3. What’s AJAX?: Amy Hoy shares her knowledge about AJAX in this cheat sheet.
  4. The AJAX Cheatsheet: In this cheat sheet, you’ll get a simple understanding of the code.

PHP

Cover the basics, tricks, and more with these PHP cheat sheets.

  1. PHP Cheat Sheet: This cheat sheet for PHP functions as a one page reference sheet.
  2. PHP Reference Sheet Basics: Get the basics of PHP through this quick reference sheet.
  3. Apple PHP Cheat Sheet: Get a handy little PHP cheat sheet widget for Apple here.
  4. PHP Cheat Sheet: Blue Shoes offers this useful PHP cheat sheet.
  5. PHP Tips/Tricks Cheat Sheet: Be more productive in PHP by putting these tips and tricks to work for you.
  6. PHP 4 Reference Card: This reference card will help you be more productive in PHP 4.
  7. PHP Help Sheet: This PHP help sheet from GoSquared is a really useful reference.
  8. PHP Quick Reference Sheet: Make a quick reference to everything you need with this sheet.
  9. Smarty Cheat Sheet for Template Designers: If you’re using Smarty to create a template design, you’ll want to check out this resource.
  10. PHP Skinny Sheet: Visibone’s PHP Skinny Sheet packs a lot of information in.

JavaScript

These cheat sheets cover regular expressions, jQuery, and more.

  1. mootools 1.2 cheat sheet: Use this cheat sheet to get the basics of mootools.
  2. Regular Expressions: VisiBone’s reference sheet offers some quick excerpts to the regular expressions in JavaScript.
  3. The most common DOM methods at a glance: You’ll have easy reference to DOM methods with this resource.
  4. JavaScript Cheat Sheet: With this cheat sheet, you’ll get a handy reference and reminder guide.
  5. jQuery 1.3 Cheat Sheet: Get quick reference to all of the important stuff you need in jQuery 1.3 from this cheat sheet.
  6. JavaScript Reference Card: Quickly reference items in JavaScript using this card.
  7. jQuery Cheatsheet: Get this cheatsheet in printable form or on your iPhone.
  8. JavaScript Reference Sheet: Use these excerpts to make JavaScript a bit easier.
  9. Prototype 1.6.0.2 Cheat Sheet: Using this cheat sheet, you’ll have quick reference to events, elements, and more.
  10. JavaScript in Ten Minutes: This reference gives you a quick breakdown of JavaScript.
  11. JavaScript and Browser Objects Quick Reference: Get an easy guide to JavaScript and browser objects with this reference.

MySQL

These cheat sheets make MySQL easy.

  1. Handy Cheat Sheet of MySQL Commands: Use this cheat sheet to speed through MySQL Commands.
  2. MySQL Cheat Sheet: This cheat sheet works as a reference sheet for MySQL and functions available in PHP.
  3. MySQL Cheat Sheet: Check out this cheat sheet to find a simple guide to MySQL.
  4. Quick MySQL Cheat Sheet/Quick Reference: This guide covers numeric types and more.

Action Script

Find migration cheat sheets, AIR, and more here.

  1. Papervision 3D Cheatsheet: Use this cheat sheet for Papervision 3D in Action Script.
  2. AS3 Migration Cheat Sheet: With this cheat sheet, you’ll have an easy reference for migrating from AS2 to AS3.
  3. AIR Cheatsheet ActionScript Card: Get a cheat sheet for AIR in ActionScript here.
  4. Fuse CheatSheet: Here you’ll find a cheat sheet for Fuse.

Miscellaneous

These cheat sheets cover everything else-from Ruby on Rails to grammar.

  1. Grammar Cheat Sheet: Pete Freitag’s grammar cheat sheet covers some common grammar mistakes.
  2. Perl Cheat Sheet: Get a simple Perl cheat sheet from this reference.
  3. The Web Developer’s SEO Cheat Sheet: Learn the essentials of SEO for web developers from this cheat sheet.
  4. Web Designer’s Font Chart: You’ll find a variety of web browser fonts on this web designer’s font chart.
  5. mod_rewrite cheat sheet: The mod_rewrite cheat sheet covers directives, regular expressions, common rules, and server variables.
  6. .htaccess Cheatsheet: This cheat sheet covers the essentials of the .htaccess file.
  7. Apache .htaccess cheatsheet: This cheat sheet will tell you what to do in just about any .htaccess situation.
  8. WordPress Help Sheet: You’ll find lots of help for WordPress through this help sheet.
  9. What Goes Where: Use this cheat sheet to remember where everything goes.
  10. InVisible Ruby on Rails Reference: Use this quick guide to important functions, classes, and methods in Ruby on Rails.
  11. Windows fonts/Mac fonts/Font family: Find common fonts and their equivalents on Windows and Mac on this cheat sheet.
  12. Approximate Conversion from Points to Pixels: Find the conversion rate from points to pixels on this chart. Megapixels Chart
  13. : Using this chart, you can calculate how many megapixels you’ll use.
  14. W3C DOM Compatitbility Tables: Get referenced to compatibility through these tables.
  15. Will the browser apply the rule(s)?: Find out if your rules will actually work in various browsers with the help of this chart.
  16. Google Advanced Operators: Master Google search using these advanced operators.
  17. perlcheat: This handy reference is meant for beginning Perl programmers.

Quick Degree Finder

Your course

Find an accredited web design degree with our design school guide. We offer several different courses: