26 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.

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.

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.