It’s impossible to remember all of the keyboard shortcuts, properties, and commands of the many web languages we use on a daily basis. That’s why cheatsheets are so indispensable to design and development.

They’re that productivity time-saver that every designer and developer should keep close at hand for quick reference and to double-check that snippet of code you have doubts about.

If you’re looking for cheatsheets for Photoshop, Illustrator, Sketch.app, or GIMP, you will them here.

Quick Jump: CSS, HTML, JavaScript, PHP, Markdown, Bootstrap, WordPress, Git, Fonts & Typography, Code Editors, and Miscellaneous Cheatsheets.

CSS Cheatsheets

CSS Vocabulary Cheatsheet (apps.workflower.fi) View Here →
The Complete CSS Cheatsheet (websitesetup.org) View Here →
The CSS3 Cheatsheet (smashingmagazine.com) View Here →
Responsive Web Design Cheatsheet (uxpin.com) View Here →
CSS Media Queries Cheatsheet (mac-blog.org.ua) View Here →
CSS Animation Cheatsheet (justinaguilar.com) View Here →
The Ultimate Flexbox Cheatsheet (sketchingwithcss.com) View Here →

HTML Cheatsheets

HTML Vocabulary Cheatsheet (apps.workflower.fi) View Here →
The Mega HTML5 Cheatsheet makeawebsitehub.com View Here →
The HTML Elements Index meiert.com View Here →
HTML5 Canvas Cheatsheet simon.html5.org View Here →

JavaScript & jQuery Cheatsheets

JavaScript Cheatsheet (overapi.com) View Here →
jQuery Cheatsheet (overapi.com) View Here →
jQuery Quick API Reference (oscarotero.com) View Here →

PHP Cheatsheets

The PHP Cheatsheet (overapi.com) View Here →
PHP Cheatsheets (phpcheatsheets.com) View Here →

Markdown Cheatsheets

Markdown Cheasheet (code.ahren.org) View Here →
Markdown Here Cheatsheet (github.com) View Here →

Bootstrap Framework Cheatsheets

Bootstrap 4 Cheatsheet (hackerthemes.com) View Here →
Bootstrap 3 Cheatsheet (creativealive.com) View Here →
Glyphicons Cheatsheet (glyphicons.bootstrapcheatsheets.com) View Here →

WordPress Cheatsheets

Copy/Paste WordPress Cheatsheet (buildyourownblog.net) View Here →
The Ultimate WordPress Development Cheatsheet (wefixyourwp.com) View Here →

Git Cheatsheets

Git Cheatsheet (overapi.com) View Here →
Git Pretty (justinhileman.info) View Here →

Web Fonts & Typography Cheatsheets

Compatibility Tables for Default Local Fonts (fontfamily.io) View Here →
Google Font Cheatsheet (ricostacruz.com) View Here →
Font Awesome Cheatsheet (fontawesome.io/cheatsheet) View Here →
The Anatomy of Type Cheatsheet (speckyboy.com) View Here →
The Periodic Table of Typefaces Cheatsheet (squidspot.com) View Here →

Code Editor Shortcut Cheatsheets

Sublime Text Cheatsheet (speckyboy.com) View Here →
Sublime Text Cheatsheet Plugin (github.com) View Here →
Commonly Used Sublime Text Commands (csnipp.com) View Here →
Atom Editor Cheatsheet (cloudfront.net) View Here →
Atom Editor Keyboard Shortcut Cheatsheet (blog.bugsnag.com) View Here →
Vim Cheatsheet (vim.rtorr.com) View Here →
Notepad++ Cheatsheet (drive.google.com) View Here →

Miscellaneous Cheatsheets

The Web Developer’s SEO Cheatsheet (moz.com) View Here →
MySQL Command Line Cheatsheet (github.com) View Here →
.htaccess Cheatsheet (htaccesscheatsheet.com) View Here →
The Foundation Framework Cheatsheet (sudheerdev.github.io) View Here →
The Color Theory Cheatsheet (paper-leaf.com) View Here →
The Screen Resolution Cheatsheet (design215.com) View Here →

Editorial Team

Written by Editorial Team

5 Comments

  1. These are great resources! Really nice to have them all bundled together in the one place. This will definitely speed up my workflow at my design agency! Thanks!

    Reply

  2. kaushik somaiya February 7, 2017 at 02:30

    Wow, this is Great.

    I am going to print it and keep by my side.

    Reply

  3. Thanks. Who doesn’t like to cheat now and then.

    Reply

  4. The Markdown Cheasheet item has the wrong link, it leads to an HTML cheatsheet

    Reply

  5. These ways are very simple and very much useful, as a beginner level these helped me a lot thanks fore sharing these kinds of useful and knowledgeable information.

    Reply

Leave a Reply