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!

🔖 - Bookmark the article to save it

GitHub Repo

Please, hit the follow button above, that's what I need most

Table of content:

-- Part 1 -- (This part)

💻 - Front End

HTML
CSS
Bootstrap + Bootstrap alternative
Javascript
Javascript based frameworks (Angular, Vue, React + Others)
WordPress

📕 - Back End

Python
+ Django
Node
Express
Typescript
Angular - React - Vue - Others
jquery
Go
Ruby
- Ruby on rails
Rust
C#
PHP

📓 - Databases

SQL
- MySQL
- PostgreSQL
- SQLite
NoSQL
- MongoDB
- Cassandra
- Redis

📱 - Mobile apps

Java
Kotlin
Android studio
Swift
React

🖲 - Version control

Git
GitHub

📗 - MDN / W3school

Learn web development
HTML
CSS
JavaScript
HTTP
APIs
Others

🚀 - Extra

LUA (game development)
R (data science)
Scala (data science)
Dart
Chrome Extentions
VS code Setup
Your sources
- C and C++
- Your cheat sheets
  - Linux

Remember the ❤️

Go to Bottom - ⬇️

💻 - Front End

Table of elements:

HTML
CSS
Bootstrap + Bootstrap alternative
Javascript
Javascript based frameworks (Angular, Vue, React + Others)
Wordpress

HTML

Table of content:

Complete HTML cheat sheets
HTML tools
HTML tags
HTML events
HTML elements + comparing HTML versions
Preprocessor
Pug
Haml
Slim

Complete HTML cheat sheets:

My HTML cheat sheet article 🙃

By blue host

By digital.com

By freelance.com - Beginner guide + cheat sheet

By website setup

Go to Top - 🔝

HTML tools:

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 preprocessor:

Pug:

Pug website

At dev hint

HTML to Pug

Haml:

Haml website

At cheatography

HTML to Haml

Slim:

CSS

Table of content:

How to write better CSS
Complete CSS cheat sheets
CSS tools
CSS selectors
CSS shorthands
CSS grids
CSS flexbox
Preprocessor
Less
Sass
Stylus

How to write better CSS:

Dev.to article

Go to Top - 🔝

Complete CSS cheat sheet:

By website setup

By hostinger - 13 pages

PDF version

By on blast blog (PDF version) - 18 pages

By Adam Marsden

By overapi

Go to Top - 🔝

CSS tools:

By "HTML cheat sheet"

RGB color picker Another one

CSS selectors:

By Cheatography

Go to Top - 🔝

CSS shorthands:

By land of web

Go to Top - 🔝

CSS grids:

By CSS tricks

By malven.co

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

Go to Top - 🔝

CSS flexbox:

By CSS tricks

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

At Pinterest

Sass:

Sass website

At Reddit

Stylus:

Stylus website

By dev hints

Go to Top - 🔝

Bootstrap

Official website

Docs

Complete Bootstrap cheat sheets:

By hacker themese

By get boostrap.com

By website setup (PDF version) - 50 pages!

Bootstrap alternative:

Top bootstrap alternatives

Javascript

Table of content:

Complete Javascript cheat sheets
JS promises
JS Arrays
JS loops
Preprocessor
CoffeScript
EJS
Babel

Complete JS cheat sheets:

By dev hints

By overapi

By website setup

By HTML cheat sheet.com - Interactive

Go to Top - 🔝

JS promises (Asynchronous JS):

By codecadamy

Dev.to article 1

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

Dev.to article 2

{% link dev.to/devlorenzo/js-settimeout-and-setinte.. %}

Go to Top - 🔝

JS Arrays:

By dev hints

Go to Top - 🔝

JS Loops:

By codecademy

Go to Top - 🔝

JS preprocessor:

CoffeeScript:

CoffeeScript website

At karloeaspirity.io

Quick reference - By autotelicum - PDF Version

JS to CoffeeScript

EJS:

Babel:

Wordpress

Official website

Wikipedia page for WordPress

25 WordPress cheat sheet compilation by wpnewsify.com

📕 - Back End

Table of content:

Python
+ Django
Node
Express
Typescript
Angular - React - Vue - Others
jquery
Go
Ruby
Ruby on rails
Rust
C#
PHP
Go to Top - 🔝

Python

By WebSite setup

By python cheat sheet.org

By overapi

NumPy cheat sheet at GitHub

Go to Top - 🔝

Django

14 Django Cheat Sheets:

Node

6 node Cheat Sheets:

Express

By cheatography

By dev hints

Cheat sheet on GitHub

By overapi

Go to Top - 🔝

Typescript

Typescript vs Javascript

JavaScript-based Frameworks:

Article Angular vs vue vs react at codeinwp.com

Best Javascript Frameworks

Angular

By angular

By dev hints

Go to Top - 🔝

Vue

React

By dev hints

At GitHub: React + Typescript cheat sheet

By react cheat sheet.com

Go to Top - 🔝

Others

Ember.js:

Website

Meteor:

Website

Mithril:

Website

JQuery

AJAX intro + cheat sheet at GitHub

By ascarotero.com - Really well done

By over API

By Website Setup - PDF Version

By make website hub

Article about top 10 jquery cheat sheets

Go to Top - 🔝

Go

Cheat sheet at GitHub 1

Cheat sheet at GitHub 2

Ruby

By Viking code school

Ruby on rails

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

At GitHub

By OWASP

Go to Top - 🔝

Rust

C#

PHP

By overapi

By website setup

By cheatography

By front line php.com

Go to Top - 🔝

📓 - Databases

Table of content:

SQL
- MySQL
- PostgreSQL
- SQLite
NoSQL
- MongoDB
- Cassandra
- Redis
Go to Top - 🔝

SQL vs NoSQL

By scylladb

By clariontech

SQL

By website setup

By sqltutorial

By dataquest.io

MySQL

PostgreSQL

By postgresql tutorial

At GitHub

Go to Top - 🔝

SQLite

By sqlite tutorial

At GitHub

Go to Top - 🔝

NoSQL

MongoDB

Cassandra

Redis

By lzone

At GitHub

By simple cheat sheet.com

Go to Top - 🔝

📱 - Mobile apps

{% collapsible Table of content %}

Java
Kotlin
Android studio
Swift
React
Go to Top - 🔝

Java

By hackr.io

By princeton

By programming with mosh - PDF version - 18 pages

By edureka

Go to Top - 🔝

Kotlin

By Kotlin academy - at medium

Android Studio

Schortcuts:

At cheatography

Android studio Docs

By Calvin alexander - notes

By dummies.com - series of articles

Go to Top - 🔝

Swift

Swift docs

By raywenderlich

By code with chris

By learn app making - at GitHub

Go to Top - 🔝

React / React Native

By dev hints

At GitHub: React + Typescript cheat sheet

By react cheat sheet.com

Go to Top - 🔝

🖲 - Version Control

Table of content:

Git
GitHub
Go to Top - 🔝

Git

By gitlab - PDF \Version

By git-tower.com

Post at medium

Go to Top - 🔝

GitHub

By education.github.com

GitHub lab - Course: Introduction to GitHub

Markdown cheat sheet

Go to Top - 🔝

📗 - Mozilla Developer Network / W3school

Table of content:

Learn web development
HTML
CSS
JavaScript
HTTP
APIs
Go to Top - 🔝

Web development

Link

HTML

CSS

Javascript

Link

HTTP

Link

APIs

Link

Others

W3school:

Go to Top - 🔝

🚀 - Extra

Table of content:

LUA for game development
R (for data science)
Scala (for data science)
Dart
C and C++
Your sources
Go to Top - 🔝

LUA

By dev hints

At GitHub

Go to Top - 🔝

R

By Rstudio

R for dummies - By dummies.com - Article

Go to Top - 🔝

Scala

Scala docs

At GitHub

Go to Top - 🔝

Dart (for Flutter)

Docs - dart.dev

By raywenderlich

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.