Advertisement
When it comes to CSS, HTML or jQuery codes, you just can’t know them all.
It’s pretty hard but with the help of these cheat sheets for web designers you can manage to get pretty close to knowing them all, considering that you have everything in from of you and it is easy to search.
It is possible that a few of these cheat sheets have small differences between them but I still gathered them cause you might find easier to follow one of them and you need to have where to choose from.
I don’t believe there’s any surprise that when it comes to CSS and HTML, the cheat sheets presented here are about CSS3 and HTML5. It is normal to show the new ones instead of the old that you are already familiar with.
Want to download all of these directly in your inbox and skip the article? Download them now[1] and improve your coding workflow.
CSS3
CSS vocabulary
CSS 3, Media Queries Cheat Sheet
Bootstrap Glyphicons
To use this cheat sheet, simply find the glyphicon you want to use and click the copy button. This will add the complete HTML code for that glyphicon (span tag and all) to your clipboard, ready to paste into your web development tool of choice.
If you don’t know yet, Glyphicons are basically little symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage. They’re implemented in Bootstrap as an icon font — a custom font that contains these glyphs instead of letters.
Foundation-5 Cheat sheet
Bootstrap 3 cheat sheet
CSS3 Cheat Sheet (PDF)
A printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.
Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.
Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).
CSS Properties Index
CSS2 and CSS3 Help Sheets are Here
CSS3 Click Chart
Code examples, descriptions, links, tutorials, polyfills, tools, and browser support info for all new CSS3 features.
CSS 3 selectors explained
Many of the CSS 3 selectors have already been implemented in modern browsers, but in general support is far too patchy for developers to rely on these new selectors. However, there are cases where they can be used to add nice forward enhancing features, so I think taking a look at how the new selectors in CSS 3 work can be useful.
HTML5
HTML Cheat Sheet
HTML 5 Cheat Sheet (PDF)
A handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.
Please notice that the specification is an ongoing work, and is expected to remain so for many years, although parts of HTML 5 are going to be finished and implemented in browsers before the whole specification reaches final Recommendation status.
HTML5 Security Cheat sheet
HTML5 id/class name cheatsheet
HTML5 Element Flowchart
HTML5 Pocketbook
Information and samples for HTML5 and related APIs
HTML Cheat Sheet for Transition to HTML 5
A great quick reference for the transition from HTML 4 to HTML 5. Designed to help authors create polyglot HTML documents, this can also help in creating HTML 4 and XHTML documents, in addition to upgrading to HTML 5.
Most HTML cheat sheets, usually based on the technical specifications for a specific version of HTML, show only the valid features in that version of the HTML specs.
In contrast, this one helps developers transition from earlier versions of HTML by indicating new features in HTML 5 with a “New” flag and using a strike-through font to indicate the tags and attributes previously used in HTML 4, XHTML 1 and earlier versions that are now obsolete in HTML 5.
HTML5/CSS3 Cheatsheet
Simple cut-and-paste examples of HTML5/CSS3 features that are currently (early 2011) usable across a number of web browsers, chief among them Firefox, Safari, Chrome, Opera and the upcoming IE9.
For many of the CSS3 examples, older versions of Internet Explorer are the lone holdout with a limited number of workarounds, however these features degrade gracefully and may still be useful on new projects as long as this limitation is kept in mind.
Please note: With the exception of SVGWeb, no Internet Explorer workarounds have been included on this page – most of the examples will therefore not work in IE6, IE7 or IE8.
Ultimate HTML5 Cheatsheat
jQuery
jQuery Quick API Reference
jQuery Visual Cheat Sheet 1.4.2