The ultimate Cheat sheets compilation (200+) - ๐Ÿ”ฅ๐ŸŽ / Roadmap to dev ๐Ÿš€

The ultimate Cheat sheets compilation (200+) - ๐Ÿ”ฅ๐ŸŽ / Roadmap to dev ๐Ÿš€

The most complete cheat sheet compilation you can find online!

ยท

21 min read

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 โค๏ธ the article (or maybe all the 10 reactions!)

๐Ÿ”– - 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

  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
  10. Rust
  11. C#
  12. PHP

๐Ÿ““ - Databases

  1. SQL
  2. 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
  7. Pug
  8. Haml
  9. Slim

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
  9. Less
  10. Sass
  11. Stylus

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

Bulma

image

Skeleton

image

Pure

image

Bootflat

image

Mueller

image

Go to Top - ๐Ÿ”


Javascript

Table of content:

  1. Complete Javascript cheat sheets
  2. JS promises
  3. JS Arrays
  4. JS loops
  5. Preprocessor
  6. CoffeScript
  7. EJS
  8. Babel

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

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

Node

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
  2. NoSQL
  3. 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

{% collapsible 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++

{% collapsible C %}

C

image

By developer insider

-

image

By course.cs.washington.ed - PDF Version

-

image

By dummies.com

Go to Top - ๐Ÿ” {% endcollapsible %}


{% collapsible C++ %}

C++

image

By W3school - PDF Version

-

image

At GitHub

-

By dummies.com

By cppcheatsheet.com

Go to Top - ๐Ÿ”

---

At dev.to - Ultimate Linux Cheat Sheet - By Justin Varghese

Ps: I add the web dev checklist!


Hope this helped!

Remember the โค๏ธ

First published here

ย