Cheat sheets and reference guides are useful for both beginners and advanced web professionals.
Usability is a central concern for any web developer. The 25-Point Website Usability Checklist is a simple step-by-step list that can help your website achieve maximum usability.
Four major components are covered in this checklist: accessibility, identity, navigation and content. The list is a printable PDF and contains a rating system and space for comments.
This is a great reference guide to ensure browser compatibility.
Below is an extract from a table that contains a list of various CSS rules and their compatibility with common browsers and operating systems. With a quick glance, the designer or developer can note which CSS properties should be used or avoided.
The table also offers an interactive feature that highlights the row your cursor is on. This makes pinpointing the compatibility of a specific CSS property much easier.
A website that is compliant with W3C’s standards will be more usable and search-engine friendly than one that is not.
There are a number of ways to ensure that a website is standards-compliant; one way is to use a checklist.
This checklist contains a chronological list of factors to consider while building a website.
Search Engine Optimization (SEO) is very important if a website is to be successful. This cheat sheet may seem to be for beginners, but it holds valuable information for reference and education. The ten categories are SEO rules at the coding level.
The ten essential categories for good optimization are: important HTML tags, search engine indexing limits, title tag syntax, common canonical issues, 301 redirects on Apache, search engine robot user agents, common robot traps to avoid, robot meta tags syntax, robots.txt syntax and site map syntax.
Included in each category is further explanation and an example.
The cheat sheet can be downloaded as a two-page printer-friendly PDF.
Because Twitter is fast becoming a mainstream news feed, using it to your website’s advantage is important.
Tweet Sheet is a fairly simple cheat sheet about Twitter use and syntax, created by Jason Theodor. Tweet Sheet includes Twitter’s mobile URL and text numbers, personal commands, mobile commands, user name commands, tracking commands and information on Twitter applications and tools.
Version 2 is offered in PDF form, a change from the simple image in Version 1. The second version is a grid of smaller cheat sheets, with a cut-out line so that it can easily be shared with friends or posted in other locations.
This XHTML cheat sheet is excellent for XHTML coders. Along with many basic attributes, this two-page grid includes references that even experienced web professionals would find useful.
Three types of elements are defined in this cheat sheet: block, inline and table elements. The miscellaneous section includes 22 additional elements. Each row contains the name, description and attributes of each of the elements available for use.
More references are on the side, including %attrs, %focus, input types, link types, deprecated elements, HTML ASCII entities and more. Being so detailed, this is a great tool for anyone who uses XHTML frequently.
The CSS Cheat Sheet is a two-page PDF and is the most detailed CSS reference guide available. It contains a lot of information and is great as a printed reference.
Sections you may find useful are the ones on the CSS box model, selectors, pseudo-elements and pseudo-classes, colors, text properties and layout properties.
The Blueprint CSS framework is a great shortcut for designers. The developers of this tool explain:
“Blueprint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plug-ins and even a style sheet for printing.”
To download the blueprint framework, go to BlueprintCSS.org
Paired with the framework is the Blueprint CSS cheat sheet to help shorten development time. The cheat sheet is well laid out, nicely color-coded and detailed. It works in sync with the framework and was made with designers in mind, featuring a visual representation of a 950 pixel-wide grid system, a detailed list of Blueprint features and call and syntax examples.
This PDF is an excellent reference for designers who don’t want to spend a lot of time figuring out whether two or more fonts will work well together. This tool enables designers to choose the perfect typography combination.
Although the cheat sheet was created in 1992, most of the widely used web fonts are present. As the image above shows, a list of fonts is repeated along the top and left side.
A number from 1 to 3 appears where each pair intersects. 1 means that the two fonts are compatible, 2 means that with proper implementation the two fonts could work well together, and 3 means that they will clash.
While this guide isn’t exhaustive, it’s a perfect quick reference tool for choosing the typography for a new website. All 18 font groups listed are web safe and cross-browser compatible.
All of the fonts are grouped together with syntax: Windows version, Mac version, font family. The bottom of the page has very specific information on using fonts on different operating systems and browsers and even has a screenshot of each scenario.
Although this web page is already well known in the web designer community, we felt it was important to include on this list.
The official Adobe Reference guide is available online and in PDF form. While not exactly a “quick” reference guide, it is essential for anyone who uses Photoshop professionally.
This is the keyboard shortcuts cheat sheet for the newest version of Photoshop. This four-page guide can help designers cut their production time by as much as half.
For easy navigation, the PDF is arranged according to the main menu in Photoshop, and then under each menu item it lists the shortcuts in alphabetical order. Because PC and Mac have different shortcuts, there are two different reference guides.
This is a keyboard shortcuts guide for Adobe Flash CS4. This PDF is also arranged to reflect the Flash CS4 menu, but the list of shortcuts, rather than being in alphabetical order, is arranged according to the application’s menu listing, too. This cheat sheet even has a friendly graphic at the top with the menu order presented in Flash.
As with most Adobe keyboard shortcut cheat sheets, both PC and Mac versions are available.
This cheat sheet covers both ActionScript 2.0 and ActionScript 3.0 and is organized to help those who need to switch to 3.0. Below is a short extract from the six-page PDF.
The functions and classes of ActionScript 2.0 are to the left of each section, followed by their equivalents in ActionScript 3.0. This cheat sheet is great for anyone transitioning to 3.0 or learning ActionScript.
This is another guide in the family of cheat sheets for Adobe, this one for Dreamweaver CS4 keyboard shortcuts. It was made by the creator of the Flash CS4 sheet and so has many of the same features.
The cheat sheet also follows the exact menu structure of Dreamweaver CS4 and has the same graphic at the top showing the menu order.
Unfortunately, a Mac version of this cheat sheet is still in the works; only the PC version is available at this time.
Either way, it is a great cheat sheet and could be easily adapted into a Mac version. For most shortcuts, you would just have to replace Control with the Command key. Keep checking the cheat sheet’s page for the release of the Mac version.
The WordPress Help Sheet is the most useful cheat sheet if you are a WordPress theme developer. It is a quick reference guide for the most commonly used WordPress snippets.
Only four categories are covered in this guide, but the simplicity of this sheet makes it so appealing.
Only the most needed and commonly used snippets are included, making them all easy to find. The four sections include: file names of a basic WordPress theme, header snippets, all other template snippets and commonly used extras.
For those who create WordPress themes regularly, WPCandy has created an advanced help sheet. It contains commonly used snippets for themes that require added functionality.
The three-page PDF covers a wide range of snippets, such as for content going only on the front page, styling for certain categories, unique images for each category, dynamic page titles, query posts and more.
Any designer who creates professional WordPress themes should have this help sheet at hand. Most of the snippets are required in professional themes.
The WordPress Theme Development Checklist is an extensive checklist in nine parts. The checklist covers general topics (like theme information and screenshots), blog components (like RSS feeds), timestamps, as well as category and page navigation. Below is an example of the first half.
This checklist can be used while creating a WordPress theme or to help finalize one. As extensive as it is, it’s only one page and can be easily printed when it comes time to develop a new theme.
Although the jQuery Visual Map is not a printable reference like most of the other cheat sheets on this list, it is still a great tool for referencing, learning jQuery and grabbing snippets.
The tool’s interactive nature makes finding exactly what you need easy, and code is included in all of the examples for easy copying and pasting. This guide is ultimately an interactive jQuery manual.
The references are compact, yet the “pseudo-code” serves perfectly as illustration. Within the one-page PDF are 22 sections of reference material.
In addition to the older version, the updated cheat sheet now contains documentation for Core, Native, Class, Element, Utilities and Request.
This one-page informative PDF is a great resource for those using Prototype.js and includes a visual reference for offsets and dimensions.
The modules are in a logical order, with the most commonly used ones in the top left and less common ones in the bottom right. The page is printable and easy to use as a desk-side reference guide.
This one-page cheat sheet is a wonderful reference tool if you code mainly in Python.
The 11 sections that make up the cheat sheet are system variables, string methods, datetime methods, time methods, date formatting, sys.argv, OS variables, list methods, file methods, class special methods, indexes and slices.
This is a convenient all-in-one general reference for anyone who codes in Python or is trying to learn Python. There are also some side notes and general pseudo-code.
URL rewriting can improve your website’s usability, search functionality and navigation cleanliness.
The mod_rewrite cheat sheet has everything from basic regular expression syntax to listing flags for the RewriteRule and RewriteCond directives. It also provides examples and general syntax so that you don’t have to be a mod_rewrite expert to use the PDF.
This one-page cheat sheet is a full reference for the PHP programming language. It is better suited to those who already know how to code in PHP and serves as a reminder of certain syntax and names of functions and variables.
Now in its second edition, this cheat sheet is better organized and has new components, giving it a total of nine sections: array functions, regular expression functions, date formatting, regular expression syntax, string functions, file system functions, PCRE modifiers, date and time functions and fopen() modes.
This handy, one-page cheat sheet provides quick reference for the SQL server.
Included in the 14 sections are: functions, syntax for creating a function, date parts, syntax for creating a trigger and syntax for creating a stored procedure.
It is available for download as a PDF or PNG file.
This cheat sheet is a great reference for anyone who frequently uses MySQL or PHP with MySQL. It contains the most commonly used MySQL functions in PHP, data types and ranges and sample select queries.
Along the side of the main cheat sheet are various keywords and functions used in MySQL: mathematical keywords, date and time keywords, group words, control flow, string, comparison, cast and more.
No need to memorize the exact names of MySQL functions or full range of each data type; just download the PDF or PNG version of the MySQL cheat sheet to have on hand.
This Ruby on Rails one-page printable reference is a useful go-to guide for anyone who uses Ruby on Rails extensively.
Included in the cheat sheet are five main sections and a few side sections containing methods. The main section features a directory structure, predefined variables in Ruby, reserved keywords, regular expression syntax and a side note reminder of methods.
In addition to the center blocks is a list of methods along the side, arranged in the following categories: strings, regex, time, arrays, validation and enumerable mixin.
The last resource on our list is the ASP/VBScript cheat sheet, for anyone who is an ASP developer.
Similar in layout to many of the other cheat sheets on AddedBytes, this one is well organized and contains crucial, often-forgotten information for the ASP developer.
The cheat sheet includes regular expressions, date function arguments, redirect with 301 header, file inclusion, function argument orders, file modes, common LCID modes, constants, methods, properties, functions and collections.