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
- 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 ⭐
Table of elements:
- HTML
- CSS
- Bootstrap + Bootstrap alternative
- Javascript
- Javascript based frameworks (Angular, Vue, React + Others)
- Wordpress
Table of content:
- Complete HTML cheat sheets
- HTML tools
- HTML tags
- HTML events
- HTML elements + comparing HTML versions
- Preprocessor
Really nice UX
By freelance.com - Beginner guide + 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
Emoji cheat sheet (font awesome icon reference)
Table of content:
- How to write better CSS
- Complete CSS cheat sheets
- CSS tools
- CSS selectors
- CSS shorthands
- CSS grids
- CSS flexbox
- Preprocessor
By hostinger - 13 pages
By on blast blog (PDF version) - 18 pages
Here at dev.to - CSS Grid Cheat Sheet Illustrated in 2021 - By Joy Shaheb
Here at dev.to - FlexBox Cheat Sheets in 2021 || CSS 2021 - By Joy Shaheb
By website setup (PDF version) - 50 pages!
Table of content:
By HTML cheat sheet.com - Interactive
{% link https://dev.to/devlorenzo/js-how-to-handle-errors-fi6 %}
{% link https://dev.to/devlorenzo/js-settimeout-and-setinterval-1pbf %}
Quick reference - By autotelicum - PDF Version
25 WordPress cheat sheet compilation by wpnewsify.com
Table of content:
- Python
- + Django
- Node
- Express
- Typescript
- Angular - React - Vue - Others
- jquery
- Go
- Ruby
- Ruby on rails
- Rust
- C#
- PHP
- Go to Top - 🔝
14 Django Cheat Sheets:
6 node Cheat Sheets:
Article Angular vs vue vs react at codeinwp.com
At GitHub: React + Typescript cheat sheet
AJAX intro + cheat sheet at GitHub
By ascarotero.com - Really well done
By Website Setup - PDF Version
Article about top 10 jquery cheat sheets
PDF version
PDF version
Book - Ruby on Rails Tutorial: Learn Web Development with Rails
Table of content:
Table of content:
By programming with mosh - PDF version - 18 pages
By dummies.com - series of articles
By learn app making - at GitHub
At GitHub: React + Typescript cheat sheet
Table of content:
GitHub lab - Course: Introduction to GitHub
Table of content:
W3school:
Table of content:
- LUA for game development
- R (for data science)
- Scala (for data science)
- Dart
- C and C++
- Your sources
- Go to Top - 🔝
R for dummies - By dummies.com - Article
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
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
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:
By course.cs.washington.ed - PDF Version
Here at dev.to - Ultimate Linux Cheat Sheet - By Justin Varghese
Ps: I add the web dev checklist!
Hope this helped!
Remember the ⭐