Trends

50 Essential Cheatsheets, Guides & Docs for Web Designers

We have collected an avalanche of useful cheatsheets, references, guides, checklists and docs, covering almost all aspects of web design.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

It doesn’t matter how many years of experience you have of a programming language, framework or CMS, you will always need to refer to the official documentation or, and more than likely, a handy quick reference cheatsheet, as it’s literally impossible to remember and know absolutely everything.

In this post I have collected an avalanche of useful cheatsheets, references, guides, checklists and docs, covering almost all aspects of web design, that will not only help to improve your productivity, but will also help to solve some of those frustrating programming issues that often arise (I’m looking at you PHP!).

Just click on the ‘view’ button beside each resource and either save the PDF or bookmark the page.

Cheatsheets for Web Designers

For speed and efficiency, I’ve categorized all of the cheatsheets and checklists for you. So just click on one of the links below and you will be taken directly to the relevant selection. Of course, if you want to just browse, just keep on scrolling down.

CSS HTML JavaScript PHP Markdown
WordPress Ghost Joomla ModX Concrete5
Drupal Browsers Git Sublime Text Newsletters
Social Media SEO Licenses Graphic Editors Checklists

Web Languages

CSS – Cascading Style Sheets

CSS Cheatsheet via OverAPI.com Web View
CSS Vocabulary Web View
Media Queries Cheat Sheet Web View
fontfamily.io – Check Compatabilty of Default Local Fonts Web View

Popular CSS Frameworks

Master Cheatsheet for Bootstrap 3 PDF View
Complete Font Awesome Icon Reference Cheatsheet Web View
Bootstrap 3 Glyphicons Cheatsheet Web View
Foundation 5 Cheatsheet Web View

HTML – HyperText Markup Language

HTML Vocabulary Web View
HTML5 Tag Cheatsheet PDF View
HTML Elements Index Web View

JavaScript & jQuery

jQuery Quick API Reference Web Web View
Javascript Cheatsheet via OverAPI.com Web Web View
JavaScript Regular Expression Cheatsheet Web View
Emmet Cheatsheet Web View

PHP

PHP Cheatsheet via OverAPI.com Web View
PHP Date & Timestamp Converter Web View

Markdown

Markdown Quick Reference Cheatsheet Web View
Printable Markdown Cheatsheet PDF View

CMS Cheatsheets

WordPress

Official WordPress Code Reference Web View
WordPress Codex Web View
Copy/Paste WordPress Cheatsheet PDF Web View

Ghost

Ghost Cheatsheet Web View
Ghost Developer Guides Web View

Joomla!

Joomla! Official Documentation Web View
Joomla! 3.x Templates Cheatsheet PDF View

MODx Revolution

MODx Revolution Documentation Web View
MODx Revolution’s Cheatsheets PDF View

Concrete5

Concrete5 Official Docs Web View

Drupal 7

Drupal Community Docs Web View
Drupal 7 Database Cheatsheet PDF View
Drupal jQuery Cheatsheet PDF View
Drupal 7 Translation Cheatsheet PDF View

Browser Dev Tools

Chrome Devtools Cheatsheet Web View
Firebug Keyboard and Mouse Shortcuts Cheatsheet Web View

Git & GitHub

Git Cheatsheet via Git-Tower PDF View
Git Cheatsheet via GitHub Training PDF View
GitHub Visual Cheatsheet by Zack Rusin PNG View
A List of Cool Features of Git and GitHub Web View
Git Pretty Flowchart PDF View

Sublime Text

Commonly Used Sublime-Text Command Cheatsheet Web View
Sublime Text 3 OSX Cheatsheet Web View

Email & Newsletters

MailChimp Merge Tags Cheatsheet Web View
Campaign Monitor Template Cheatsheet PDF View

Social Media

Social Media Dimensions Cheatsheet PSD View
Social Media Cheatsheet PDF View

SEO

The Web Developer’s SEO Cheatsheet via Moz.com PDF View
On-Page SEO Cheatsheet Web View
Punctuation, Symbols & Operators in Search Web View

Software Licenses

TLDRLegal – Software Licenses Explained in Plain English Web View

Graphic Editors

Sketch

Sketch 3 Visual Cheatsheet by Manuel Ebert PNG View
Keyboard Shortcuts for Sketch App Web View

Adobe Photoshop

Adobe Photoshop Keyboard Shortcuts (AZERTY) JPG View
Adobe Photoshop Keyboard Shortcuts (QWERTY) JPG View
Adobe Photoshop Reference Cheatsheet via Cheetyr Web View

Adobe Illustrator

Adobe Illustrator Keyboard Shortcuts (QWERTY) JPG View
Adobe Illustrator Keyboard Shortcuts (AZERTY) JPG View
Adobe Illustrator Reference/Cheatsheet via Cheetyr Web View

Handy Checklists

Web Developer Checklist Web View
Web Developer Checklist Chrome Extension CE View
Visual Web Design Checklist Web View
Launch Check List for Professional WordPress Websites Web View
Web Accessibility Checklist Web View
Usability Checklist Web View
IxD – Interaction Design Checklist Web View

Handy References

Can I use… Support tables for HTML5, CSS3, etc Web View
Findguidelin.es – Quicklinks to Style Guides Web View

Featured Image Source: Coding by Vasabii.


Paul Andrew

About the Author Paul Andrew

Paul is the founder of Speckyboy Design Magazine and writes web stuff for Envato. You can follow him on Twitter.