There are always ways to make the coding and design work you do faster and more efficient. With that in mind, i have put together a list of the most useful cheatsheets designer and developer can rely on.

Shortcuts.design

Shortcuts.design is a small website that lists every shortcut a designer ever wants to know, all designapps in one place and in a simple and clear way. It’s very usefull for beginning designers to quickly charge their workflow, when you switched to a new designtool or when you just want a reference to see which shortcut to use for that action you have to do all day long.

---

BEM

When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don’t always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components.

---

Grid Cheatsheet

Demos for W3C CSS Grid Specification.

---

i Hate Regex

This tool is designed as a cheatsheet that will explain commonly used regular expressions in way you actually learn it.

---

GitSheet

GitSheet is a simple git cheat sheet reference for common git commands saving you time and helping you learn how to use branches, show logs, undo changes, create tags, stashes and more. Commands are a click away from clipboard.

---

Awesome-Cheatsheets

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

---

Modern JS Cheatsheet

Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.

---

Font Awesome Cheatsheet

Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more. Here is a Font Awesome cheat sheet of all the content values for each icon.

---

HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently 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.

---

Favicon Cheat-sheet

Favicons have been handy for web browsers for years. However, with the proliferation of devices (not talking just computers and mobiles here), you need to keep up with your favicon optimization (never thought I’d type that). Here’s a nifty “cheat sheet” that walks you through proper sizes for everything from iOS and Android to the Chrome browser to GoogleTV and iPad.

---

Web Developer’s SEO Cheat Sheet

This free and downloadable document covers all of the important SEO code and best practices that are needed by online marketers and developers.

---

The Ultimate Flexbox Cheat Sheet

Flexbox is a brand, spankin’ new CSS layout module with suprisingly good browser support! Say goodbye to float frustration and hello to a brave new world of easy vertical centering, re-ordering elements and dynamically growing and shrinking layouts.

---

Easing Functions Cheat Sheet

Simple cheat sheet to help developers pick the right easing function.

---

The iOS Design Cheat Sheet

These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design problems.

---

Android Cheatsheet for Graphic Designers

Graphic designers aren’t programmers and sometimes don’t know how to properly prepare graphic assets for developers. This simple cheatsheet should help them to do their job better, and to simplify developers’ lives.

---

CSS3 animation

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.

---

Graphic Design Cheat Sheets to Make Your Life Easier

Beginners and experienced designers alike often get help from graphic design cheat sheets. They’re also called crib sheets, and are very worthwhile if you get stuck in the middle of the design process and don’t know where to turn. Keep reading to learn about seven cheat sheets that you might want to bookmark right now, so you can whip them out when you need them!

---

Cheatsheet

Vue.js 2.2 complete API cheatsheet.

---

Regex Cheat Sheet

Emma Wedekind’s useful cheat sheet for creating regular expressions.

---

Css Grid-cheat-sheet

Another helpful tool for using CSS Grid properties. By Ali Alaa.

---

React Hooks-cheatsheet

React hooks cheatsheet with live editable examples.

---

React Cheat Sheet

A very useful filterable cheat sheet for React made by Michael Chan.

---

Type Terms

Type Terms is the perfect tool for designers to learn the basics of typographic terminology. If you are new to typography or here to refresh your memory, then Type Terms is perfect for you.

---

10 cheat codes for designing User Interfaces

It is a process that has a “Why” behind it, that whenever we create a text bigger, add a shadow, or change the color, there has to be a reason of why things have to be.

---

Bootstrap 4 Cheat Sheet

An update to the very useful Bootstrap 4 cheat sheet that serves as a great reference.

---

Grid “fallbacks” and overrides

Here is a quick reference to the defined overrides with simple examples. See the resources at the end of this cheatsheet for more advice and examples.

---

Math As-code

A cheat-sheet for mathematical notation in code form.

---

ES6 Cheatsheet

This is an interactive ES6, ES2016, and ES2017 cheatsheet. It uses a series of small examples to show you the important parts of modern JavaScript. All code is editable and runnable so you can play with it all you want.

---

Async Javascript Cheatsheet

This cheatsheet contains a summary of the Mastering Asynchronous JavaScript course at Frontend Armory.

---

CSS Selectors Cheatsheet

---

Grid

Learn all about the properties available in CSS Grid Layout through simple visual examples.

---

Emoji Cheat-sheet.com

Emojis enhance just about any user experience. They always have a place, from casual social media use to top level inbound marketing strategies.

---

Git and Git Flow Cheat Sheet

Git cheat sheet saves you from learning all the commands by heart.

---