50 Essential Cheatsheets, Guides & Docs for Web Designers

by Bradley Nice, Content Manager at ClickHelp.com — software documentation tool

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’ve collected 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.

Web Languages

CSS — Cascading Style Sheets

• CSS Vocabulary (Web)
• Media Queries Cheat Sheet (Web)
• fontfamily.io — Check Compatabilty of Default Local Fonts (Web)

Popular CSS Frameworks

• Master Cheatsheet for Bootstrap 3 (PDF)
• Complete Font Awesome Icon Reference Cheatsheet (Web)
• Bootstrap 3 Glyphicons Cheatsheet (Web)
• Foundation 5 Cheatsheet (Web)

HTML — HyperText Markup Language

• HTML Vocabulary (Web)
• HTML5 Tag Cheatsheet (PDF)
• HTML Elements Index (Web)

JavaScript & jQuery

• jQuery Quick API Reference (Web)
• Javascript Cheatsheet (Web)
• JavaScript Regular Expression Cheatsheet (Web)
• Emmet Cheatsheet (Web)

PHP

• PHP Cheatsheet (Web)
• PHP Date & Timestamp Converter (Web)

Markdown

• Markdown Quick Reference Cheatsheet (Web)
• Printable Markdown Cheatsheet (PDF)

CMS Cheatsheets

WordPress

• Official WordPress Code Reference (Web)
• WordPress Codex (Web)
• Copy/Paste WordPress Cheatsheet PDF (Web)

Ghost

• Ghost Cheatsheet (Web)
• Ghost Developer Guides (Web)

Joomla!

• Joomla! Official Documentation (Web)
• Joomla! 3.x Templates Cheatsheet (PDF)

MODx Revolution

• MODx Revolution Documentation (Web)
• MODx Revolution’s Cheatsheets (PDF)

Concrete5

• Concrete5 Official Docs (Web)

Drupal 7

• Drupal Community Docs (Web)
• Drupal 7 Database Cheatsheet (PDF)
• Drupal jQuery Cheatsheet (PDF)
• Drupal 7 Translation Cheatsheet (PDF)

Browser Dev Tools

• Chrome Devtools Cheatsheet (Web)
• Firebug Keyboard and Mouse Shortcuts Cheatsheet (Web)

Git & GitHub

• Git Cheatsheet (PDF)
• Git Cheatsheet (PDF)
• GitHub Visual Cheatsheet (PNG)
• A List of Cool Features of Git and GitHub (Web)
• Git Pretty Flowchart (PDF)

Sublime Text

• Commonly Used Sublime-Text Command Cheatsheet (Web)
• Sublime Text 3 OSX Cheatsheet (Web)

Email & Newsletters

• MailChimp Merge Tags Cheatsheet (Web)
• Campaign Monitor Template Cheatsheet (PDF)

Social Media

• Social Media Dimensions Cheatsheet (PSD)
• Social Media Cheatsheet (PDF)

SEO

• The Web Developer’s SEO Cheatsheet (PDF)
• On-Page SEO Cheatsheet (Web)
• Punctuation, Symbols & Operators in Search (Web)

Software Licenses

• TLDRLegal — Software Licenses Explained in Plain English (Web)

Graphic Editors

Sketch

• Sketch 3 Visual Cheatsheet (PNG)
• Keyboard Shortcuts for Sketch App (Web)

Adobe Photoshop

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

Adobe Illustrator

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

Handy Checklists

• Web Developer Checklist (Web)
• Web Developer Checklist Chrome Extension (CE)
• Visual Web Design Checklist (Web)
• Launch Check List for Professional WordPress Websites (Web)
• Web Accessibility Checklist (Web)
• Usability Checklist (Web)
• IxD — Interaction Design Checklist (Web)

Handy References

• Can I use… Support tables for HTML5, CSS3, etc (Web)
• Findguidelin.es — Quicklinks to Style Guides (Web)

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors