The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀
The most complete cheat sheet compilation you can find online!
I'm a young man working to be a full stack developer. My goal is to create a programming community for exchanging ideas and foster innovation. Feel free to contact me! Blogger at dev.to
--> Follow me for more cool content!
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
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
📓 - Databases
📱 - Mobile apps
🖲 - Version control
📗 - MDN / W3school
🚀 - Extra
- LUA (game development)
- R (data science)
- Scala (data science)
- Dart
- Chrome Extentions
- VS code Setup
- Your sources
Remember the ❤️
💻 - 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:
-
-
Really nice UX
-
By freelance.com - Beginner guide + cheat sheet
-
HTML tools:
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
-
-
-
Emoji cheat sheet (font awesome icon reference)
-
HTML Tags:
-
-
HTML Events:
HTML Elements:
HTML preprocessor:
Pug:
-
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:
Complete CSS cheat sheet:
-
By hostinger - 13 pages
-
By on blast blog (PDF version) - 18 pages
-
CSS tools:
-
CSS selectors:
CSS shorthands:
CSS grids:
-
-
Here at dev.to - CSS Grid Cheat Sheet Illustrated in 2021 - By Joy Shaheb
CSS flexbox:
-
-
Here at dev.to - FlexBox Cheat Sheets in 2021 || CSS 2021 - By Joy Shaheb
CSS preprocessor:
Less:
-
Sass:
-
Stylus:
Bootstrap
Complete Bootstrap cheat sheets:
-
-
By website setup (PDF version) - 50 pages!
-
-
-
Bootstrap alternative:
Bulma
Skeleton
Pure
Bootflat
Mueller
Javascript
Table of content:
Complete JS cheat sheets:
-
-
-
By HTML cheat sheet.com - Interactive
JS promises (Asynchronous JS):
-
{% link https://dev.to/devlorenzo/js-how-to-handle-errors-fi6 %}
{% link https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf %}
JS Arrays:
JS Loops:
JS preprocessor:
CoffeeScript:
Quick reference - By autotelicum - PDF Version
-
EJS:
-
-
Babel:
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
-
-
-
Django
14 Django Cheat Sheets:
-
-
Node
-
6 node Cheat Sheets:
-
Express
-
-
Typescript
-
-
JavaScript-based Frameworks:
Article Angular vs vue vs react at codeinwp.com
Angular
-
Vue
-
-
React
-
At GitHub: React + Typescript cheat sheet
-
Others
Ember.js:
Meteor:
Mithril:
Node
JQuery
AJAX intro + cheat sheet at GitHub
-
By ascarotero.com - Really well done
-
-
By Website Setup - PDF Version
-
-
Article about top 10 jquery cheat sheets
Go
-
PDF version
-
Ruby
PDF version
Ruby on rails
Book - Ruby on Rails Tutorial: Learn Web Development with Rails
-
Rust
-
C#
-
-
PHP
-
-
-
📓 - Databases
Table of content:
SQL vs NoSQL
-
SQL
-
-
MySQL
-
-
PostgreSQL
-
SQLite
-
NoSQL
MongoDB
-
-
Cassandra
-
-
Redis
-
-
📱 - Mobile apps
{% collapsible Table of content %}
Java
-
-
By programming with mosh - PDF version - 18 pages
-
Kotlin
-
-
-
-
Android Studio
Schortcuts:
-
-
By dummies.com - series of articles
Swift
-
-
By learn app making - at GitHub
React / React Native
-
At GitHub: React + Typescript cheat sheet
-
🖲 - Version Control
Table of content:
Git
-
-
-
GitHub
-
GitHub lab - Course: Introduction to GitHub
-
📗 - Mozilla Developer Network / W3school
Table of content:
Web development
HTML
CSS
Javascript
HTTP
APIs
Others
W3school:
🚀 - 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
-
R
-
R for dummies - By dummies.com - Article
Scala
-
Dart (for Flutter)
-
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
Font → Fira code
Icon → Material Icon Theme
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
-
By course.cs.washington.ed - PDF Version
-
Go to Top - 🔝 {% endcollapsible %}
{% collapsible C++ %}
C++
-
-
At dev.to - Ultimate Linux Cheat Sheet - By Justin Varghese
Ps: I add the web dev checklist!
Hope this helped!
Remember the ❤️
