Skip to content

The ultimate Cheat sheets compilation (200+) - πŸ”₯🎁 / Roadmap to dev πŸš€

License

Notifications You must be signed in to change notification settings

DevLorenz0/Awesome-CheatSheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

CheatSheets-compilation

The ultimate Cheat sheets compilation (200+) - πŸ”₯🎁 / Roadmap to dev πŸš€

Hello World Today I wanted to share with you my Cheatsheet Compilation that every dev should know about.

The most complete cheat sheet compilation you can find online!

PS: It took me more than 10 hours to create this compilation - So please remember to star 🌟 and maybe fork 🍴 the repo

Article version: https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g


Table of content:

πŸ’» - Front End

  1. HTML
  2. CSS
  3. Bootstrap + Bootstrap alternative
  4. Javascript
  5. Javascript based frameworks (Angular, Vue, React + Others)
  6. WordPress

πŸ“• - Back End

  1. Python
  2. + Django
  3. Node
  4. Express
  5. Typescript
  6. Angular - React - Vue - Others
  7. jquery
  8. Go
  9. Ruby
  1. Rust
  2. C#
  3. PHP

πŸ““ - Databases

  1. SQL
  1. NoSQL

πŸ“± - Mobile apps

  1. Java
  2. Kotlin
  3. Android studio
  4. Swift
  5. React

πŸ–² - Version control

  1. Git
  2. GitHub

πŸ“— - MDN / W3school

  1. Learn web development
  2. HTML
  3. CSS
  4. JavaScript
  5. HTTP
  6. APIs
  7. Others

πŸš€ - Extra

  1. LUA (game development)
  2. R (data science)
  3. Scala (data science)
  4. Dart
  5. Chrome Extentions
  6. VS code Setup
  7. Your sources

Remember the ⭐

Go to Bottom - ⬇️


πŸ’» - Front End

Table of elements:

  1. HTML
  2. CSS
  3. Bootstrap + Bootstrap alternative
  4. Javascript
  5. Javascript based frameworks (Angular, Vue, React + Others)
  6. Wordpress

HTML

Table of content:

  1. Complete HTML cheat sheets
  2. HTML tools
  3. HTML tags
  4. HTML events
  5. HTML elements + comparing HTML versions
  6. Preprocessor

Complete HTML cheat sheets:

My HTML cheat sheet article πŸ™ƒ

image

By blue host

image

By digital.com

Really nice UX

image

By freelance.com - Beginner guide + cheat sheet

image

By website setup

Go to Top - πŸ”


HTML tools:

image

By "HTML cheat sheet"

Tools:

  • Color / character / emoji picker
  • Tags cheat sheet
  • Attribute cheat sheet
  • Different types of structures (table / lists)
  • Gibberish (random) text generator
  • iframe generator
  • Table / link / image / list generator
  • blank page / page structure

HTML cleaner

Emojipedia

Emoji cheat sheet (font awesome icon reference)

Another emoji cheat sheet

Can I use

Go to Top - πŸ”


HTML Tags:

Dev.to article

image

By website setup

image

By in motion hosting

Go to Top - πŸ”


HTML Events:

image

By in motion hosting

Go to Top - πŸ”


HTML Elements:

image

By meiert

Go to Top - πŸ”


HTML preprocessor:

Pug:

Pug website

image

At dev hint

HTML to Pug

Haml:

Haml website

image

At cheatography

HTML to Haml

Slim:

Slim website

image

By dev hints

HTML to Slim

Go to Top - πŸ”


CSS

Table of content:

  1. How to write better CSS
  2. Complete CSS cheat sheets
  3. CSS tools
  4. CSS selectors
  5. CSS shorthands
  6. CSS grids
  7. CSS flexbox
  8. Preprocessor

How to write better CSS:

Dev.to article

Go to Top - πŸ”


Complete CSS cheat sheet:

image

By website setup

image

By hostinger - 13 pages

PDF version

image

By on blast blog (PDF version) - 18 pages

image

By Adam Marsden

By overapi

Go to Top - πŸ”


CSS tools:

image

By "HTML cheat sheet"

RGB color picker Another one


CSS selectors:

image

By Cheatography

Go to Top - πŸ”


CSS shorthands:

image

By land of web

Go to Top - πŸ”


CSS grids:

image

By CSS tricks

image

By malven.co

Here at dev.to - CSS Grid Cheat Sheet Illustrated in 2021 - By Joy Shaheb

Go to Top - πŸ”


CSS flexbox:

image

By CSS tricks

image

By malven.co

Here at dev.to - FlexBox Cheat Sheets in 2021 || CSS 2021 - By Joy Shaheb

Go to Top - πŸ”


CSS preprocessor:

Less:

Less website

image

At Pinterest

Sass:

Sass website

image

At Reddit

Stylus:

Stylus website

image

By dev hints

Go to Top - πŸ”


Bootstrap

Official website

Docs

Complete Bootstrap cheat sheets:

image

By hacker themese

image

By get boostrap.com

image

By website setup (PDF version) - 50 pages!

image

By hackr.io

image

By themeselection

Bootstrap Icons

Bootstrap Themes

Go to Top - πŸ”


Bootstrap alternative:

image

Top bootstrap alternatives

image

image

image

image

image

Go to Top - πŸ”


Javascript

Table of content:

  1. Complete Javascript cheat sheets
  2. JS promises
  3. JS Arrays
  4. JS loops
  5. Preprocessor

Complete JS cheat sheets:

image

By dev hints

By overapi

image

By website setup

PDF Version

By HTML cheat sheet.com - Interactive

Go to Top - πŸ”


JS promises (Asynchronous JS):

image

By codecadamy

Dev.to article 1

{% link https://dev.to/devlorenzo/js-how-to-handle-errors-fi6 %}

Dev.to article 2

{% link https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf %}

Go to Top - πŸ”


JS Arrays:

image

By dev hints

Go to Top - πŸ”


JS Loops:

image

By codecademy

Go to Top - πŸ”


JS preprocessor:

CoffeeScript:

CoffeeScript website

image

At karloeaspirity.io

Quick reference - By autotelicum - PDF Version

JS to CoffeeScript

EJS:

EJS website

EJS docs

image

At one compiler

At GitHub

Babel:

Babel website

Babel docs

image

By karloespiritu.io

At Medium

Go to Top - πŸ”


Wordpress

Official website

Wikipedia page for WordPress

Docs

Themes

Plugins

image

By Website setup

PDF Version

image

By hostinger

image

Wordpress checklist

25 WordPress cheat sheet compilation by wpnewsify.com


πŸ“• - Back End

Table of content:

  1. Python
  2. + Django
  3. Node
  4. Express
  5. Typescript
  6. Angular - React - Vue - Others
  7. jquery
  8. Go
  9. Ruby
  10. Ruby on rails
  11. Rust
  12. C#
  13. PHP
  14. Go to Top - πŸ”

Python

image

By WebSite setup

image

By python cheat sheet.org

By overapi

image

NumPy cheat sheet at GitHub

Go to Top - πŸ”


Django

14 Django Cheat Sheets:

image

By cheatography

image

By barhoring

Django documentation

Go to Top - πŸ”


Node

image

By overapi

6 node Cheat Sheets:

image

By cheatography

image

By dev hints

Go to Top - πŸ”


Express

image

By cheatography

image

By dev hints

Cheat sheet on GitHub

By overapi

Go to Top - πŸ”


Typescript

image

Typescript vs Javascript

Another article

image

By sitepen

image

By dev hints

Go to Top - πŸ”


JavaScript-based Frameworks:

Article Angular vs vue vs react at codeinwp.com

image

Best Javascript Frameworks

Angular

image

By angular

image

By dev hints

Go to Top - πŸ”


Vue

image

By vue mastery

By marozed

image

By dev hints

Go to Top - πŸ”


React

image

By dev hints

At GitHub: React + Typescript cheat sheet

By react cheat sheet.com

Go to Top - πŸ”


Others

Ember.js:

image

Website

Meteor:

image

Website

Mithril:

image

Website

image

Website


JQuery

AJAX intro + cheat sheet at GitHub

image

By ascarotero.com - Really well done

By over API

image

By Website Setup - PDF Version

image

By make website hub

PDF Version

image

Article about top 10 jquery cheat sheets

Go to Top - πŸ”


Go

Cheat sheet at GitHub 1

Cheat sheet at GitHub 2

Go playground

By cheat-sheets.org

PDF version

image

By dev hints

Go to Top - πŸ”


Ruby

By Viking code school

By testing education

PDF version

At GitHub

By overapi

Go to Top - πŸ”


Ruby on rails

image

Book - Ruby on Rails Tutorial: Learn Web Development with Rails

At GitHub

By OWASP

Go to Top - πŸ”


Rust

image

By cheats.rs

At GitHub

Another at GitHub

Go to Top - πŸ”


C#

image

By the coding guy

By hackr.io

By Okta developer

Go to Top - πŸ”


PHP

By overapi

image

By website setup

PDF Version

image

By cheatography

PDF Version

image

By front line php.com

Go to Top - πŸ”


πŸ““ - Databases

Table of content:

  1. SQL
  1. NoSQL
  1. Go to Top - πŸ”

SQL vs NoSQL

image

By scylladb

image

By clariontech


SQL

image

By website setup

PDF Version

image

By sqltutorial

PDF Version

By dataquest.io


MySQL

image

By dev hints

By mysqltutorial

At GitHub

Go to Top - πŸ”


PostgreSQL

image

By postgresql tutorial

PDF Version

At GitHub

Go to Top - πŸ”


SQLite

image

By sqlite tutorial

At GitHub

Go to Top - πŸ”


NoSQL

MongoDB

image

By developer.mongodb

image

By bmc.com

PDF version

At GitHub

Go to Top - πŸ”


Cassandra

image

By cheatography

PDF version

At GitHub

By tutorialspoint

Go to Top - πŸ”


Redis

image

By lzone

At GitHub

By simple cheat sheet.com

Go to Top - πŸ”


πŸ“± - Mobile apps

Table of content:

  1. Java
  2. Kotlin
  3. Android studio
  4. Swift
  5. React
  6. Go to Top - πŸ”

Java

image

By hackr.io

image

By princeton

image

By programming with mosh - PDF version - 18 pages

By edureka

Go to Top - πŸ”


Kotlin

image

By Kotlin academy - at medium

By raywenderlich.com

PDF Version

image

By dev hints

By koenig-media

Kotlin playground

Go to Top - πŸ”


Android Studio

Schortcuts:

image

At cheatography


Android studio Docs

By Calvin alexander - notes

By dummies.com - series of articles

Go to Top - πŸ”


Swift

image

Swift docs

image

By raywenderlich

PDF Version

By code with chris

By learn app making - at GitHub

Go to Top - πŸ”


React / React Native

image

By dev hints

image

At GitHub: React + Typescript cheat sheet

By react cheat sheet.com

Go to Top - πŸ”


πŸ–² - Version Control

Table of content:

  1. Git
  2. GitHub
  3. Go to Top - πŸ”

Git

image

By

PDF download

image

By gitlab - PDF \Version

image

By git-tower.com

Post at medium

Go to Top - πŸ”


GitHub

image

By education.github.com

GitHub lab - Course: Introduction to GitHub

image

Markdown cheat sheet

Go to Top - πŸ”


πŸ“— - Mozilla Developer Network / W3school

Table of content:

  1. Learn web development
  2. HTML
  3. CSS
  4. JavaScript
  5. HTTP
  6. APIs
  7. Go to Top - πŸ”

image

image

Web development


HTML


CSS


Javascript


HTTP


APIs

Others

W3school:

Go to Top - πŸ”


πŸš€ - Extra

Table of content:

  1. LUA for game development
  2. R (for data science)
  3. Scala (for data science)
  4. Dart
  5. C and C++
  6. Your sources
  7. Go to Top - πŸ”

LUA

image

By dev hints

At GitHub

Go to Top - πŸ”


R

image

By Rstudio

R for dummies - By dummies.com - Article

Go to Top - πŸ”


Scala

image

Scala docs

At GitHub

Go to Top - πŸ”


Dart (for Flutter)

image

Docs - dart.dev

image

By raywenderlich

PDF Version

Go to Top - πŸ”


Chrome Extentions

My Google Chrome extensions: Grepper β†’ Allow you to save code Shortcuts for google β†’ Open google apps with a click Video Speed Controller β†’ Allow you to control the speed of a video with shortcuts and to overcome the 2x speed
Code Line Daily β†’ every day a line of code in your browser (HTML, CSS, and Javascript) Volume Manager β†’ Manage the volume of a tab VisBug β†’ Open source web design debug tools built with JavaScript: "a FireBug for designers". Better-OneTab β†’ Allow you to manage and save your tabs Grammarly for chrome β†’ Correct my English πŸ˜€ Color Zilla β†’ Pick up a color from any web page and copy the hex What Font β†’ Check the font of any web page. Dimension β†’ Check the dimensions (in pixels) of elements / their distance Lorem Ipsum Generator β†’ Generate lorem ipsum test quickly CSS viewer β†’ CSS property viewer Window Resizer β†’ Allow you to resize the web page (for responsive webpages) Web Developer β†’ Adds a toolbar button with various web developer tools.

  • You can also install an Ad Blocker

Open this article to access the othees extensions


VS code Setup

Theme β†’ One Dark Pro

image

Font β†’ Fira code

Icon β†’ Material Icon Theme image

image

Other Themes: Dark: The Best Theme / Tokyo Night Light: Atom One Light / Winter is coming (light) Here a list of 50 themes

Other Fonts: Hack Input Source Code Pro


Your Sources

This article was just published, but feel free to add your own sources / request the insertion of a new part.

  • bob-dev requested a C and C++ section

C and C++

C:

C

image

By developer insider

image

By course.cs.washington.ed - PDF Version

image

By dummies.com

Go to Top - πŸ”


C++

image

By W3school - PDF Version

image

At GitHub

By dummies.com

By cppcheatsheet.com

Go to Top - πŸ”

---

image

Here at dev.to - Ultimate Linux Cheat Sheet - By Justin Varghese

Ps: I add the web dev checklist!


Hope this helped!

Remember the ⭐

My blog

About

The ultimate Cheat sheets compilation (200+) - πŸ”₯🎁 / Roadmap to dev πŸš€

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published