30+ Useful Web Design & Development Cheatsheets

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.

Shortcuts.design


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.

BEM


Grid Cheatsheet

Demos for W3C CSS Grid Specification.

Grid Cheatsheet


i Hate Regex

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

i Hate Regex


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.

GitSheet


Awesome-Cheatsheets

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

Awesome-Cheatsheets


Modern JS Cheatsheet

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

Modern JS Cheatsheet


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.

Font Awesome Cheatsheet


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.

HTML5/CSS3 Cheatsheet


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.

Favicon Cheat-sheet


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.

Web Developer's SEO Cheat Sheet


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.

The Ultimate Flexbox Cheat Sheet


Easing Functions Cheat Sheet

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

Easing Functions Cheat Sheet


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.

The iOS Design Cheat Sheet


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.

Android Cheatsheet for Graphic Designers


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.

CSS3 animation


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!

Graphic Design Cheat Sheets to Make Your Life Easier


Cheatsheet

Vue.js 2.2 complete API cheatsheet.

Cheatsheet


Regex Cheat Sheet

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

Regex Cheat Sheet


Css Grid-cheat-sheet

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

Css Grid-cheat-sheet


React Hooks-cheatsheet

React hooks cheatsheet with live editable examples.

React Hooks-cheatsheet


React Cheat Sheet

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

React Cheat Sheet


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.

Type Terms


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.

10 cheat codes for designing User Interfaces


Bootstrap 4 Cheat Sheet

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

Bootstrap 4 Cheat Sheet


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.

Grid “fallbacks” and overrides


Math As-code

A cheat-sheet for mathematical notation in code form.

Math As-code


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.

ES6 Cheatsheet


Async Javascript Cheatsheet

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

Async Javascript-cheatsheet


CSS Selectors Cheatsheet

CSS Selectors Cheatsheet


Grid

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

Grid


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.

Emoji Cheat-sheet.com


Git and Git Flow Cheat Sheet

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

Git and Git Flow Cheat Sheet


3 Comments

  1. Awesome post

  2. Buy RDPsays:

    thank you

  3. Awesome list; very useful.

  4. Awesome list; very useful thank you

  5. monovmsays:

    Good source

  6. Best collection

  7. Thanks for sharing. Actually, I am a WordPress Developer. This information is very useful to me. Thanks.

  8. Awesome list; very useful thank you

  9. Robertsays:

    Interesting list of web design & development cheatsheets. I personally used GitSheet.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.