DEV Community

Cover image for The ultimate Cheat sheets compilation (200+) - πŸ”₯🎁 / Roadmap to dev πŸš€
Lorenzo for World In Dev

Posted on • Edited on

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 around 8 hours to complete the whole article (the two parts) - So please remember the like ❀️ and maybe super likeπŸ¦„

πŸ”– - Bookmark the article to save it


⚑Giveaway ⚑

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important


Read also:


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

-- Part 2 --

πŸ“± - 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. Your sources
  6. Chrome Extentions
  7. VS code Setup

Remember the like ❀️❀️❀️

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

Dev.to article 2

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 - πŸ”


Available at part 2: Mobile App / Version Control / MDN / Extra

Hope this helped!


Other articles:


Join us on Discord - Currently hosting a free Udemy Course giveaway!

Remember the like ❀️❀️❀️

Top comments (29)

Collapse
 
theme_selection profile image
ThemeSelection

Indeed a great collection. Very detailed and insightful.πŸ‘
We also have made Bootstrap 5 Cheat sheet, which will be suitable for the listing of bootstrap cheat sheets.

Collapse
 
lorenzoblog profile image
Lorenzo • Edited

Added!

Edit: If you follow me / you write me in private we can maybe cross-post an article

Collapse
 
theme_selection profile image
ThemeSelection

Sure. Sounds great.πŸ‘

Collapse
 
pigrenok profile image
Vitaly Voloshin • Edited

Hello! Great collection of cheatsheets. Definitely bookmarked it to have at hand. Thank you very much for compiling the collection.

I would say what is missing from the list are cheatsheets on React.JS (main architecture and major libraries like React-Routes). If you can add something useful for React, that would make the collection even better.

Collapse
 
lorenzoblog profile image
Lorenzo

Actually, I just realized I had already done this here:

However, I took the opportunity to improve the "javascript frameworks" section by adding sources, improving navigation and opening opportunities to other frameworks such as ember or meteor...

Collapse
 
lorenzoblog profile image
Lorenzo

Thanks. I add them today.

Do not hesitate to send the compilation to all those you think are interested. You would help me a lot.

Collapse
 
bobdev12 profile image
Bob-Dev

Really nice article! Maybe you can add a section for c and c++

You have my like ❀️

Collapse
 
lorenzoblog profile image
Lorenzo

Added!

Collapse
 
bobdev12 profile image
Bob-Dev

Thanks

Collapse
 
lorenzoblog profile image
Lorenzo

PS: It took me around 8 hours to complete the whole article (the two parts) - So please remember the like ❀️

Collapse
 
udaysiddapur profile image
Uday Siddapur

Indeed a great and helpful collection... ❀️❀️❀️

Collapse
 
saanvi_sen01 profile image
Saanvi Sen

Great collection..!!

I would like to recommend the Latest Open Source Vue CheatSheet.

Collapse
 
lorenzoblog profile image
Lorenzo • Edited

Ideas for another section? I've been bored since I finished...

Collapse
 
justinnn07 profile image
Justin Varghese

Nice collections!

Collapse
 
lorenzoblog profile image
Lorenzo • Edited

Thank πŸ™ƒ

Collapse
 
aanchalrathor profile image
Aanchal Rathore • Edited

Thanks for the ultimate cheat sheet compilations. We have also posted sql cheat sheet.

Collapse
 
dominik_gorczyca profile image
Dominik Gorczyca

Seems a bit overwhelming and also a bit of cluttered, but great job regardless :)

Collapse
 
lorenzoblog profile image
Lorenzo

Sure for the overwhelming part of things, it's proper to the internet and more precisely to the programming world. But I think it's pretty well organized in section, do you have any advice to improve the organization of the article? Maybe improving the table of content?

Collapse
 
dominik_gorczyca profile image
Dominik Gorczyca

Well, I think there is a lot of unnecessary things that could probably be written shorter. Like there shouldn't be each link with it's own image because it's not super readable, you could like make all links images or don't do any images, I also don't get why are those " - ", they are only bringing confusion in my opinion. I don't know why you have like two links like for ultimate HTML Tags, it's not pretty and there's a lot of repeatability, like you don't probably have to make a title "HTML tags" if there's a huge "HTML tags cheat sheet" article below.
There are some good things for sure but the clutter is not necessary. Cheers.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.