Today more or less everyone can put a simple web page together but implementation of professional Web based Application Front Ends is not as simple as some people may think. It is a complex task requiring deep knowledge of several technologies like html, css, javascript, php, etc. In this article you will find essential cheat sheets for the most commen web based technologies that you are likely to use if you’re a Front End Web Developer. First you will find resources covering client side markup and development (html, xhtml, css, javascript, jQuery etc.) and then you will find resoures covering server side development that are to some extent required for Front End Development (php, asp.net, …). Please make sure that you post a comment if you know an important resource that have not been included in the article. I hope you will find this article useful, lets get started!
Markup Cheat Sheets
There’s a lot of cheat sheets available for CSS, html and any other web technology. I have picked a few that I believe stand out because they are able to assist you remebering important elements of key web technologies or because they are really well structured.
Print out your favorite Cheat Sheet and put it on the wall just next to your monitor to get instant access to help and reference.
CSS2 Cheat Sheet
This cheat sheet is designed to not only be a quick reference for CSS properties but also to give you a good feel for how each property should be used. It contains all of the properties in the CSS2 specification including a description of the syntax of each one. There are also sections that describe selectors, pseudo-elements and pseudo-classes, @ rules, and colors.
Gosquared CSS help sheets
Good looking and well structured CSS overview
addedbytes CSS2 Cheat Sheet
The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
Core css
All you need to know about CSS in 3 parts. These documents go through all important aspects of CSS on a minimum number of pages.
CSS Shorthand Cheat Sheet
Get help with some of the CSS elements that are so easy to forget.
CSS2 – Quick Reference Guide – PDF
XHTML 1.1 Cheat Sheet
This cheat sheet is designed to be a quick reference to all of the elements and attributes available in the XHTML 1.1 specification. And because XHTML 1.1 is designed to be modular, it is organized into sections to mirror the XHTML abstract modules and the elements and attributes contained within each.
Gosquared html help sheets
Good looking and well structured html overview
HTML Cheat Sheet
The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. PDF PNG
HTML5 Canvas Cheat Sheet
The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.
HTML Character Entities Cheat Sheet
The HTML Character Entities cheat sheet is designed to act as a reference sheet, listing the various character codes in HTML. PDF PNG
HTML Character Entities Cheat Sheet
This cheat sheet contains a list of all of the HTML 4 character entities including ISO 8859-1 (Latin-1) entities. The characters are organized into 8 groups: Latin characters, Greek characters, numbers, puncutation and miscellaneous symbols, mathematical symbols, currency symbols, arrows and shapes, and spacing symbols.
Each character contains a unicode entity reference (e.g.  ) as well as a named entity reference (e.g. ) where available.
HTML Colors Cheat Sheet
This cheat sheet contains a chart of 1050 colors grouped by hue and varied into 25 different saturations and brightnesses for each. Each color has the HTML color code reprsented as a Hex triplet (e.g. #808080). Also, it contains a chart of the 216 Web-safe colors and each is represented as a single-digit Hex triplet (e.g. #999).
RGB Hex Colour Chart
The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called “web safe” or “non-dithering” colours (there are actually only 22 web safe colours, but those are revolting).
Scripting Cheat Sheets
JavaScript Cheat Sheet
The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript. It includes reference material for regular expressions in JavaScript, as well as a short guide to the XMLHttpRequest object. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size JavaScript cheat sheet.
JavaScript DOM Cheatsheet
Working with XML in Javascript is
jQuery 1.3 Cheat Sheet
Quick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.
jQuery Cheat Sheet 1.2
mootools 1.2 cheat sheet
This sheet cover Core, Native, Class, Element, Utilities and Request
prototype 1.5.0
Prototype 1.6.0.2 Cheat Sheet
- Modules are sorted in a somewhat logical order – those commonly used are mostly in the left/center area, while deprecated/utility methods are all the way to the right
- Method can be recognized by parentheses following it (anything that doesn’t have ones is a property)
- Deprecated items are marked red and have NO parentheses/arguments specified
- Prototype extends quite few native objects’ prototypes with a set of convenient methods. In such cases there’s an explicit note about it next to a module name – i.g.
stripScripts()method from “String (String.prototype)” can be called as'foo'.stripScripts() - When a module is also a class, there’s a “(constructor)” note next to it – i.g. “Hash (constructor)” means that it should be called as
new Hash() - There are few bonus items (such as those from Prototype.Browser) which are not yet included in documentation
Addison-Wesley’s JavaScript Reference Card
Javascript: A scripting language designed to be integrated into HTML code to produce enhanced, dynamic, interactive web pages.
jQuery selectors
Very comprehensive overview of jQuery selectors. This is a must have for every jQuery developer!
Server side programming
PHP Cheat Sheet (V2)
The PHP cheat sheet is a one-page reference sheet, listing date format arguments, regular expression syntax and common functions.
visibone
This website contains a 2-page light and lean PHP cheatsheet and an 8-page comprehensive PHP cheat sheet for committed PHP developers
Php 4 Reference Card
PHP Cheat Sheet
3 cheat sheets covering comparison using different operators etc.
Core C# and .NET Quick Reference
ASP.net
MS ASP
The ASP cheat sheet is designed to act as a reminder and reference sheet, listing various of the oft-forgotten parts of ASP / VBScript.
msnet formatting strings
SQL (Structured Query Language) in one page
MySQL Cheat Sheet
XML (eXtensible Markup Language) in one page
XML Syntax Quick Reference
Search Engine Optimization Cheat Sheets
Creating good content that is presented in the right way is important but only haft the way to get visitors. Understanding and mastering Search Engine Optimization, SEO is quite essential and here you get some really good overviews
The Web Developer’s SEO Cheat Sheet
This cheat sheet cover most of what you need, Important SEO Html Tags, Search Engine Indexing Limits, Recommended Title Tag Syntax, Common Canonical Issues, Important Search Engine Robot User-Agents etc.
Advertisement
Related posts
- 55+ Seriously Useful Front End Web Developer Cheat Sheets Today more or less everyone can put a simple...
- 50+ Cheat Sheets for Building WordPress Themes and Plugins Wordpress needs no introduction. It powerful, highly popular and...
- 60+ Very Useful Cheat Sheets for Web Developers A Cheat Sheet is one pager (or in some...
- 40 Must Have Cheat Sheets for effective Web Designers As a follwoup on the article 40+ Essential Front...
- 20 Resources providing Loads of Excellent Tutorials and Cheat Sheets for Flash and Action Script Adobe Flash goes back several years and have turned...
Submit
More Links
June 23rd, 2009 at 4:34 am
Cool… where’s the asp.net cheat sheet?
June 23rd, 2009 at 4:56 am
@Danzig….ups gonna add that for sure!
June 23rd, 2009 at 5:58 am
great
June 23rd, 2009 at 6:22 am
Thanks, neat
Obvious cheat sheets to add are keyboard shortcuts for the everyday developer tools. I mostly use Visual Studio – I have posted on my blog about Visual Studio 2008 (http://www.lybecker.com/blog/2009/02/02/visual-studio-2008-shortcuts-features/) shortcuts features and Visual Studio 2005 shortcuts features (http://www.lybecker.com/blog/2007/02/01/visual-studio-2005-shortcuts-features/)
June 23rd, 2009 at 7:12 am
Excellent collection, thanks.
June 23rd, 2009 at 10:35 am
All here are you need if you’re a web developer. Great stuff.
June 23rd, 2009 at 12:09 pm
thank you. i need pdf file more…
June 23rd, 2009 at 12:38 pm
Thanks for sharing this article I also like website with flash designing specially the intro part of the website is so attractive and I agree with your view that flash presentation Increasing your web traffic and page views Add, add your website in http://www.directory.itsolusenz.com/
June 24th, 2009 at 7:26 am
Thanks for the compilation..
any idea of one for Regular expressions of all type???
anyone???
June 24th, 2009 at 6:20 pm
Great bunch of collection brov.
thx for the share
June 24th, 2009 at 6:46 pm
@Bijay I will add Regex asap. You’re right it is missing. Thanks!
June 27th, 2009 at 3:51 pm
Posting a website is getting more and more complicated.
June 29th, 2009 at 11:49 pm
Nice collection… Thanks for share
July 2nd, 2009 at 10:42 pm
I think the cheat sheets of dreaming in code were missing. Those are really great!
July 5th, 2009 at 6:28 pm
Excellent list! thanks for your work!
July 7th, 2009 at 9:04 pm
Thanks for sharing this. It sure helps a lot. Much appreciated!!!
July 21st, 2009 at 1:26 am
This is truly a great collection, thanks for sharing.
July 27th, 2009 at 9:01 am
Nice post, full of Developer Cheat Sheets.
Thanks for sharing.
July 27th, 2009 at 12:33 pm
It is really needful post.
Thanks for share.
August 1st, 2009 at 5:56 am
PHP is most popular language in the web development. It is easy to write and one can create dynamic web pages with the help of PHP. It is server side HTML embedded scripting language. A full functional Ecommerce website can be developed using PHP scripting language. Hire a PHP programmer for your projects is with premium quality and cost effective.
August 1st, 2009 at 5:57 am
Nice Post.
August 4th, 2009 at 5:21 pm
wow great post… thanks for this.. all in place……….
August 7th, 2009 at 10:09 pm
http://www.jcargoo.org/2008/11/some-best-cheat-sheets-for-web.html
September 25th, 2009 at 8:45 pm
WOW… that’s a lot of cheat sheets!
Sadly, XHTML is the one I forget the most.
October 19th, 2009 at 12:49 pm
Very useful and informative post. I have never seen such a long list of Sheets. Nice examples! I am firmly convinced that web developers will engoy reading it. Thumb up!
January 15th, 2010 at 6:58 pm
Excellent post! very useful to have have in our chicago web design office.