40+ Essential Front End Web Developer Cheat Sheets

May 19, 2013 · 94 comments

by Lars

cheat-sheets

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!


ElegantThemes
ThemeForest

Advertisement

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.

css-cheat-sheet

Gosquared CSS help sheets

Good looking and well structured CSS overview

CHEAT_SHEETS

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.

addedbytes

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.

core css

core css

CSS Shorthand Cheat Sheet

Get help with some of the CSS elements that are so easy to forget.

csscheatsheet

CSS2 – Quick Reference Guide – PDF

qrg0007

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.

CHEAT_SHEETS

Gosquared html help sheets

Good looking and well structured html overview

CHEAT_SHEETS

HTML Cheat Sheet

The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. PDF PNG

CHEAT_SHEETS

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.

CHEAT_SHEETS

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

CHEAT_SHEETS

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. &#160) as well as a named entity reference (e.g.  ) where available.

CHEAT_SHEETS

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).

CHEAT_SHEETS

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).

CHEAT_SHEETS

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.

CHEAT_SHEETS

JavaScript DOM Cheatsheet

Working with XML in Javascript is

CHEAT_SHEETS

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.

CHEAT_SHEETS

jQuery Cheat Sheet 1.2

CHEAT_SHEETS

mootools 1.2 cheat sheet

This sheet cover Core, Native, Class, Element, Utilities and Request

CHEAT_SHEETS

prototype 1.5.0

CHEAT_SHEETS

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

CHEAT_SHEETS

Download

Addison-Wesley’s JavaScript Reference Card

Javascript: A scripting language designed to be integrated into HTML code to produce enhanced, dynamic, interactive web pages.

CHEAT_SHEETS

jQuery selectors

Very comprehensive overview of jQuery selectors. This is a must have for every jQuery developer!

CHEAT_SHEETS

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.

CHEAT_SHEETS

visibone

This website contains a 2-page light and lean PHP cheatsheet and an 8-page comprehensive PHP cheat sheet for committed PHP developers

CHEAT_SHEETS

Php 4 Reference Card

CHEAT_SHEETS

PHP Cheat Sheet

3 cheat sheets covering comparison using different operators etc.

CHEAT_SHEETS

Core C# and .NET Quick Reference

CHEAT_SHEETS

ASP.net

CHEAT_SHEETS

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.

CHEAT_SHEETS

msnet formatting strings

CHEAT_SHEETS

SQL (Structured Query Language) in one page

CHEAT_SHEETS

MySQL Cheat Sheet

CHEAT_SHEETS

XML (eXtensible Markup Language) in one page

CHEAT_SHEETS

XML Syntax Quick Reference

CHEAT_SHEETS

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.

CHEAT_SHEETS

{ 53 comments… read them below or add one }

Aishwarya August 18, 2012 at 3:38 pm

This is a really great post, thanks for sharing. I’m glad I got a chance to check out your blog!
thanks,

Reply

Jossef May 8, 2012 at 11:54 am

Helpful post. Thank you very much

Reply

Sault Web Design August 31, 2011 at 1:55 am

Thanks for the list its nice to have them all in one place instead of loading 10 different sites. Although I don’t know if they will be happy your stealing their traffic lol

Great post

Reply

Avile July 26, 2011 at 4:05 am

Hey, cool blog! Thanks… ;)

Reply

internet marketing July 5, 2011 at 12:50 pm

Definitely all essential. A definite bookmark in my web development inventory.

Reply

digitalcamerasbestbuys April 19, 2011 at 6:04 am

WoW!
This great list of cheat sheets.
Thanks for sharing!

Reply

sleeper April 17, 2011 at 8:05 pm

thanks alot for this

good job

Reply

SEO April 15, 2011 at 8:11 pm

All of this are rare for web design/developer .
Thanks you again.

Reply

garmin April 15, 2011 at 8:04 pm

Thank for CSS Cheat (my road map)

Reply

TemplatesRule.com March 10, 2011 at 1:07 pm

In our organization addedbytes CSS2 Cheat Sheet is being officially used. we have pasted its large prints on walls for Markup developers. its simple and helping for the beginners.

Reply

oscommerce development February 18, 2011 at 11:25 am

Nice post.After a long time i got some interesting topic so thanks for posting it here and sharing it with us.

Reply

praveen January 30, 2011 at 8:30 am

nice blog to hang on with..!!
boob job

Reply

praveen January 30, 2011 at 8:26 am

nice blog..!!
boob job

Reply

abelbrain January 4, 2011 at 11:41 am

thanks for sharing this post.
its awesome.

Reply

Hire Web Developers November 25, 2010 at 7:07 am

Its a great collection, Thanks for your sharing

Reply

Brett Widmann November 17, 2010 at 3:31 am

This is a very helpful collection of tips and cheat sheet resources. Thanks for sharing.

Reply

Luke Kenneth Casson Leighton November 8, 2010 at 7:04 pm

i’m very very confused. someone posts a list of FORTY things you’re supposed to consult before doing a web site, and people are posting comments indicating celebration, relief and happiness? what the _heck_ is going on! :)

i’m the lead developer of a python-to-javascript compiler and python-based web browser widget toolkit, where the infrastructure takes care of all this nonsense, and the reason _why_ i’m the lead developer is because i tried to write a small web site with 150 words on it, placing those words inside boxes that would be in the middle of the page. it took me two weeks, involving looking up “cheat sheets” on how to make CSS _deliberately_ error-prone on firefox but not IE so that one line of CSS would work on one browser but be overidden on the other, to FAIL to achieve that simple simple goal.

i then decided that there was going to be no way in hell i would do that kind of stupid time-wasting ever again, and made a beeline for javascript-based compiler technology: i found the abandoned pyjamas project and took it over.

anyone who is HAPPY with having to learn 40+ “cheat sheets” needs their head examined. please – if you don’t like python, go use GWT instead, for god’s sake.

Reply

Lars November 8, 2010 at 8:26 pm

Luke I appreciate your opinion! However it is not the idea with this article that reader should read them all and lean everything in them before starting out a web development project. Cheat sheets are aimed at supporting busy developers in looking up something they need right now to get on. So the recommendation I would give is to find a few sheets, print them out and put them on the wall for quick and easy access.

Reply

Peterino November 8, 2010 at 11:27 pm

… and Luke’s recommendation was to shoot all those cheet sheets, go pick the right technology for your job, and get your work done in about 10% of the time.

The use of those cheet sheets shall then be limited to the developers of the frameworks (or whatsoever) that make this kind of efficiency possibly. For solving limited, specific and focussed problems only – to save a large audience from this nightmare.

(Don’t get me wrong: I’m loving it, the brainteasers and oracles that CSS and friends sometimes bring up. But then maybe I’m one of those to join the latter not the first!)

P.S.: Here’s a link for those who still can’t have enough of cheat sheets. http://www.cheat-sheets.org/ (fixes some of the dangling links above!)

Reply

Cameron Rogers September 29, 2010 at 8:00 pm

the best website analytics that i know is none other than google analytics”;`

Reply

njmehta September 2, 2010 at 4:50 pm

Definitely all essential. A definite bookmark in my web development inventory.

Reply

William Roberts August 3, 2010 at 5:55 pm

google analytics also provide great data about website statisitics;”`

Reply

Julian F. July 9, 2010 at 4:13 pm

Nice list.
For me quicklycode (http://www.quicklycode.com) is the ultimate cheat sheet website!

Reply

Mobile App Development June 24, 2010 at 2:25 pm

wow great post… thanks for this.. all in place……….

Reply

china wholesale Consumer Electronics May 31, 2010 at 10:11 am

wow great post…

Reply

chicago web design April 9, 2010 at 2:52 pm

Thanks for such a nice tutorial. All the resources are good. A must read for the web developers.

Reply

Alphabetix April 8, 2010 at 9:48 pm

Great list of cheat sheets. Thanks for sharing!

Reply

web design chicago January 15, 2010 at 6:58 pm

Excellent post! very useful to have have in our chicago web design office.

Reply

Andrew Gerber October 19, 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!

Reply

Travis September 25, 2009 at 8:45 pm

WOW… that’s a lot of cheat sheets!

Sadly, XHTML is the one I forget the most.

Reply

jcargoo August 7, 2009 at 10:09 pm
foodland August 4, 2009 at 5:21 pm

wow great post… thanks for this.. all in place……….

Reply

Web Development company August 1, 2009 at 5:57 am

Nice Post.

Reply

Web Development company August 1, 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.

Reply

Perception System - Taufik July 27, 2009 at 12:33 pm

It is really needful post.
Thanks for share.

Reply

Jaspal Singh July 27, 2009 at 9:01 am

Nice post, full of Developer Cheat Sheets.
Thanks for sharing.

Reply

TuVinhSoft July 21, 2009 at 1:26 am

This is truly a great collection, thanks for sharing.

Reply

Marija July 7, 2009 at 9:04 pm

Thanks for sharing this. It sure helps a lot. Much appreciated!!!

Reply

emre July 5, 2009 at 6:28 pm

Excellent list! thanks for your work!

Reply

gadget00 July 2, 2009 at 10:42 pm

I think the cheat sheets of dreaming in code were missing. Those are really great!

Reply

Bid Web Directory June 29, 2009 at 11:49 pm

Nice collection… Thanks for share

Reply

tommy June 27, 2009 at 3:51 pm

Posting a website is getting more and more complicated.

Reply

Aneslin June 24, 2009 at 6:20 pm

Great bunch of collection brov.
thx for the share

Reply

Bijay Rungta (rungss) June 24, 2009 at 7:26 am

Thanks for the compilation..

any idea of one for Regular expressions of all type???

anyone???

Reply

tripwiremag June 24, 2009 at 6:46 pm

@Bijay I will add Regex asap. You’re right it is missing. Thanks!

Reply

william June 23, 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/

Reply

seo June 23, 2009 at 12:09 pm

thank you. i need pdf file more…

Reply

Phaoloo June 23, 2009 at 10:35 am

All here are you need if you’re a web developer. Great stuff.

Reply

DiggaTheWolf June 23, 2009 at 7:12 am

Excellent collection, thanks.

Reply

Anders Lybecker June 23, 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/)

Reply

iceman June 23, 2009 at 5:58 am

great

Reply

Danzig June 23, 2009 at 4:34 am

Cool… where’s the asp.net cheat sheet?

Reply

tripwiremag June 23, 2009 at 4:56 am

@Danzig….ups gonna add that for sure!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 41 trackbacks }

Previous post:

Next post:


Web Analytics