DEV Community

loading...

35 Website Cheat Sheets For Developers

haycuoilennao19 profile image haycuoilennao19 Originally published at en.niemvuilaptrinh.com ・Updated on ・6 min read

What Is Cheat Sheet?

With the rapid development of technologies in web programming, the amount of knowledge we have to learn is increasing. And sometimes you will not be able to remember all the syntax, methods ... of a programming language or framework. So cheat sheet was born to solve the above problem. It will synthesize all syntax, concepts ... in a systematic and intuitive way that makes it easy to find what you want to apply in your web development process.

Cheat Sheets For Developer

OverAPI.com

OverAPI.com is a website that aggregates cheat sheets for many popular web programming languages such as Javascript, NodeJS, PHP, Python, CSS ...
OverAPI.com
OverAPI.com

Awesome-Cheatsheets

Awesome-Cheatsheets is also a collection of popular web programming language cheatsheet including Django Cheatsheet, Node.js Cheatsheet, Laravel Cheatsheet. ... the frontend team has The HTML5 Cheatsheet, Vue.js Cheatsheet, React.js Cheatsheet ... You can refer to its main page!
Awesome-Cheatsheets
Awesome-Cheatsheets

Bootstrap 4 Cheat Sheet

Bootstrap 4 Cheat Sheet is a site that aggregates all the functions and displays the components in Bootstrap version 4.3.1. You just need to select a class, it will automatically show the code and example for that class. It also has a copy function that allows you to quickly copy that code into your program.
Bootstrap 4 Cheat Sheet
Bootstrap 4 Cheat Sheet

GitSheet

GitSheet is an aggregator of commands that you often use with Git. For each statement, it describes detail usage. You just need to select the command and press the copy button and it will automatically copy the command for you.
GitSheet
GitSheet

HTML5 Element Index

The HTML5 element index is a web page aggregating new or redefined objects in the HTML5 version. With each HTML5 object, there is content that fully describes its features and provides additional articles related to that object to help you better understand. Also, when you click on the code, it will display an example code snippet corresponding to the object that we choose. HTML5 objects in web pages will be arranged alphabetically!
HTML5 Element Index
HTML5 Element Index

HTML CheatSheet

HTML CheatSheet is a website that synthesizes useful examples and tools for web development to help us reduce the time and effort in web development such as choosing colors, creating links, creating images, create tables ... for HTML. It also has tools for other genres in web programming such as CSS, Javascript, Jquery, SEO ... you can see more on its main page!
HTML CheatSheet
HTML CheatSheet

Can I Use

Can I Use is a website that provides information about each different browser version, it will help programmers know which web technology can be used for those browsers. It also has full information about current popular browsers such as Chrome, Firefox, IE ... In addition, the supported features will be displayed in color with support, red is not support, dark yellow for partial support, and gray for unspecified support.
Can I Use
Can I Use

Rico's cheatsheets

Rico's cheatsheets is an almost complete aggregation cheatsheet for web developers such as React, Vue, ES6, Vim, Kotlin ... For each category, it will be divided into many smaller sections to help you easily find the cheatsheet you want. Also you can find common keyboard shortcuts for code editors such as Visual Studio Code, Atom, Sublime Text ...
Rico's cheatsheets
Rico's cheatsheets

Cheatography

Cheatography is also a collection of cheat sheets for web development and is divided into several sub-categories such as Miscellaneous, Network, DevOps, Database, Programming Language ... It has more than 800 cheat sheets for programming. and added a search feature, filter by many criteria to help you find the right cheat sheet for you. You can also find more cheat sheets for software, education, marketing, games ...
Cheatography
Cheatography

CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet is a collection of CSS3 animations for your web project. You just need to load the animations.css file and call the effect class you want for the object in the HTML. Full and detailed examples are provided to help you choose the effect more easily. This part you see in the demo page for more reference!
CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet

CSS Grid Cheat Sheet

CSS Grid Cheat Sheet is a website that helps you create grid system using CSS3 for web pages easily. With tools that support full features such as defining grid-template-columns, grid-template-rows, grid-column-gap ... You just need to enter information for those properties, the web page will automatically display the grid system. It gives you a more intuitive look and makes it easier to determine if this grid system is suitable for your website.
CSS Grid Cheat Sheet
CSS Grid Cheat Sheet

Grid

Grid is a web page that aggregates complete detailed examples for each property used in defining the CSS3 grid system for a website. You just need to click on the example and the code will be automatically copied and we just need to paste it into the program to be used.
Grid
Grid

Easing functions

Easing functions
Easing functions

Media Queries Cheat Sheet

Media Queries Cheat Sheet
Media Queries Cheat Sheet

Responsive Web Design Cheat Sheet

Responsive Web Design Cheat Sheet
Responsive Web Design Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Cheat Sheet

Web Developer's SEO Cheat Sheet

Web Developer's SEO Cheat Sheet
Web Developer's SEO Cheat Sheet

Modern JavaScript Cheatsheet

Modern JavaScript Cheatsheet
Modern JavaScript Cheatsheet

HTML5 Security Cheatsheet

HTML5 Security Cheatsheet
HTML5 Security Cheatsheet

Html Vocabulary

Html Vocabulary
Html Vocabulary

Regex Cheat Sheet

Regex Cheat Sheet
Regex Cheat Sheet

Developer cheatsheets

Developer cheatsheets
Developer cheatsheets

Vue Cheatsheet

Vue Cheatsheet
Vue Cheatsheet

If you want more article please go to Niemvuilaptrinh.

Discussion (63)

pic
Editor guide
Collapse
ondrabus profile image
Ondrej Polesny

If you're fighting with Fetch API from time to time, this may also come handy 😊 ondrabus.com/fetch-api-cheatsheet

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks for sharing Ondrei.

Collapse
z2lai profile image
z2lai

That is a beautiful cheatsheet!

Collapse
ondrabus profile image
Ondrej Polesny

Thanks! I hope it saves you some time πŸ™‚

Collapse
angirlar profile image
angirlar

Most of cheatsheets are for frontend developers. So the title should be "35 Website Cheat Sheets For Frontend Developers" so that others won't need to visit.

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks for comment angular

Collapse
dland profile image
Dave Land (D-CA) • Edited

Thanks for this!

If I may make a recommendation, changing the title to "35 Website Cheat Sheets for Developers" (plural in both cases) would make more sense. I couldn't figure out what "35 Website Cheat Sheet for Developer" meant on first reading.

Collapse
haycuoilennao19 profile image
Collapse
arvindpdmn profile image
Arvind Padmanabhan

Just a list of links would have been enough.

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Arvind.

Collapse
itsmestevieg profile image
Stevie G

Great List of resources!

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Stevie.

Collapse
gautamthapa profile image
Gautam Thapa

Very helpful, thanks for sharing.

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Gautam.

Collapse
leenairen profile image
Leena Iren

Maybe

Collapse
haycuoilennao19 profile image
Collapse
srijans38 profile image
Srijan Sharma • Edited

devdocs.io is great too. Although it's documentation rather than cheat sheet, but I like that everything's in one place.

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Srijan.

Collapse
jagajastic profile image
Ibrahim Joseph M.

I love this

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Ibrahim.

Collapse
fsappdev profile image
fsappdev

Very helpful, thanks!!!

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks fsappdev.

Collapse
siwaphatpg profile image
Aum Siwaphat

Thanks for this post.

Collapse
haycuoilennao19 profile image
Collapse
edumenu profile image
Edem Dumenu

This is great! Thanks!

Collapse
haycuoilennao19 profile image
Collapse
lucasferreiralimax profile image
Lucas

Nice list :)

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Lucas.

Collapse
pranavvhankate profile image
Pranav Vhankate

This is what I exactly wanted! Made quite a few web-searches but could not get:-(
Thank you very much!!!
:-)

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Pranav.

Collapse
capscode profile image
capscode

bookmarked....
very nice post...

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks capscode.

Collapse
hamza_bakhtari profile image
hamza bakhtari

awesome javascript resource javascript.info

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks for sharing Hamza.

Collapse
danix profile image
danix

Great, many thanks. There is great visual Cheat Sheet for HTML and CSS from the creator of Bulma Jeremy Thomas:
cssreference.io/
htmlreference.io/

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks for sharing danielarts.

Collapse
z2lai profile image
z2lai

This is what the internet is for!

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks z2lai.

Collapse
devfranpr profile image
DevFranPR

Man I don't know Overapi, this web is awesome thx

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks about information.

Collapse
nilsandrey profile image
Nils Andrey

This one is great for CSS Flexbox: samanthaming.com/flexbox30/

The author make the so called tidbits, a cool way to an specific form of Cheat Sheet.

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Andrey.

Collapse
timmy_id profile image
Idowu Oluwatimilehin

Thanks for this

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Idowu.

Collapse
andrewbaisden profile image
Andrew Baisden

Great cheatsheet!

Collapse
devlorenzo profile image
Collapse
anonystick profile image
anonystick

So great!
Can I translate it into Vietnamese to help more developers?

Collapse
andyrama profile image
AndyRama

Thanks for sharing !!!! Power full !!!

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks amatosoft.

Collapse
imjituchauhan profile image
Jitu Chauhan • Edited

Thank you for this article, very helpful. I m working on Geeks Bootstrap UI.

thank you

Collapse
hung80 profile image
hung80

awesome post buddy!

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks hung80.

Collapse
dome68 profile image
Domenico

Really helpful, thanks!

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Domenico.

Collapse
ridoansaleh profile image
Ridoan

Thanks for sharing with us

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Ridoan