https://envato.com/blog/cheatsheets-web-designers/
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.
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.
