35 Website Cheat Sheets For Developers
Tags: html, css, javascript, beginners
Published: 2021-02-01 14:07:26

#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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592568809/trang-web-cheat-sheet/OverAPI_iu3jzc.png)
[OverAPI.com](https://overapi.com/javascript)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592569462/trang-web-cheat-sheet/Awesome-Cheatsheets_nl6bge.png)
[Awesome-Cheatsheets](https://lecoupa.github.io/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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592570130/trang-web-cheat-sheet/Bootstrap_4_Cheat_Sheet_mfxryy.png)
[Bootstrap 4 Cheat Sheet](https://hackerthemes.com/bootstrap-cheatsheet/)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592570803/trang-web-cheat-sheet/GitSheet_mmbier.png)
[GitSheet](https://gitsheet.wtf/)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592571425/trang-web-cheat-sheet/HTML5_Element_Index_ri1kwm.png)
[HTML5 Element Index](http://html5doctor.com/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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592572008/trang-web-cheat-sheet/HTML_CheatSheet_fhh31a.png)
[HTML CheatSheet](https://htmlcheatsheet.com/)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592618425/trang-web-cheat-sheet/Can_I_Use_1_tkzp5g.png)
[Can I Use](https://caniuse.com/)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592619315/trang-web-cheat-sheet/Rico_s_cheatsheets_zin6tv.png)
[Rico's cheatsheets](https://devhints.io/)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592620325/trang-web-cheat-sheet/Cheatography_itqpu7.png)
[Cheatography](https://cheatography.com/programming/)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592620930/trang-web-cheat-sheet/CSS3_Animation_Cheat_Sheet_frirmp.png)
[CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/)

##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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592621609/trang-web-cheat-sheet/CSS_Grid_Cheat_Sheet_a8dfr0.png)
[CSS Grid Cheat Sheet](https://alialaa.github.io/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](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592622131/trang-web-cheat-sheet/grid_ywtfrk.png)
[Grid](https://grid.malven.co/)

##Easing functions
![Easing functions](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592624926/trang-web-cheat-sheet/Easing_functions_urfvne.png)
[Easing functions](https://easings.net/en#)

##Media Queries Cheat Sheet
![Media Queries Cheat Sheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592625071/trang-web-cheat-sheet/Media_Queries_Cheat_Sheet_f3iprb.png)
[Media Queries Cheat Sheet](https://mac-blog.org.ua/css-3-media-queries-cheat-sheet/)

##Responsive Web Design Cheat Sheet
![Responsive Web Design Cheat Sheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592625199/trang-web-cheat-sheet/Responsive_Web_Design_Cheat_Sheet_ck8kt2.png)
[Responsive Web Design Cheat Sheet](https://uxpin.s3.amazonaws.com/responsive_web_design_cheatsheet.pdf)

##HTML5 Canvas Cheat Sheet
![HTML5 Canvas Cheat Sheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592625720/trang-web-cheat-sheet/HTML5_Canvas_Cheat_Sheet_qkb5xi.png)
[HTML5 Canvas Cheat Sheet](https://simon.html5.org/dump/html5-canvas-cheat-sheet.html)

##Web Developer's SEO Cheat Sheet
![Web Developer's SEO Cheat Sheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592626119/trang-web-cheat-sheet/Web_Developer_s_SEO_Cheat_Sheet_bqllou.png)
[Web Developer's SEO Cheat Sheet](https://moz.com/learn/seo/seo-cheat-sheet)

##Modern JavaScript Cheatsheet
![Modern JavaScript Cheatsheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592626236/trang-web-cheat-sheet/Modern_JavaScript_Cheatsheet_youvpx.png)
[Modern JavaScript Cheatsheet](https://mbeaudru.github.io/modern-js-cheatsheet/)

##HTML5 Security Cheatsheet
![HTML5 Security Cheatsheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592626495/trang-web-cheat-sheet/HTML5_Security_Cheatsheet_sef1rb.png)
[HTML5 Security Cheatsheet](https://html5sec.org/)

##Html Vocabulary
![Html Vocabulary](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592627023/trang-web-cheat-sheet/Html_Vocabulary_vbumbd.png)
[Html Vocabulary](http://apps.workflower.fi/vocabs/html/en#children)

##Regex Cheat Sheet
![Regex Cheat Sheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592637928/trang-web-cheat-sheet/Regex_Cheat_Sheet_ak8eef.png)
[Regex Cheat Sheet](https://dev.to/emmabostian/regex-cheat-sheet-2j2a)

##Developer cheatsheets
![Developer cheatsheets](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592638133/trang-web-cheat-sheet/Developer_cheatsheets_ozjiwl.png)
[Developer cheatsheets](http://www.developer-cheatsheets.com/)

##Vue Cheatsheet
![Vue Cheatsheet](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592638381/trang-web-cheat-sheet/Vue_Cheatsheet_r9eeqw.png)
[Vue Cheatsheet](https://marozed.com/vue-cheatsheet/)

##React Cheatsheet for 2022
![React Cheatsheet for 2022](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1sjrr42e1gi8bi6msnq.png)
[React Cheatsheet for 2022](https://marozed.com/vue-cheatsheet/)
##30secondsofcode
![30secondsofcode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlohvtpi0aefsryltd6q.png)
[30secondsofcode](https://www.30secondsofcode.org/css/p/1)

##The Front-End Checklist
![The Front-End Checklist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i74haq61blkrhjc3pl5n.png)
[The Front-End Checklist](https://frontendchecklist.io/)

##Front-End Performance Checklist  
![Front-End Performance Checklist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k5ona2i2exoipk613do.jpeg)
[Front-End Performance Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist)

##Bootstrap 5 CheatSheet 
![Bootstrap 5 CheatSheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgptkr770h1a25xeffzy.png)
[Bootstrap 5 CheatSheet](https://bootstrap-cheatsheet.themeselection.com/)

##Regex Cheat Sheet
![Regex Cheat Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdyf9df4rw12htdczl44.jpg)
[Regex Cheat Sheet](https://dev.to/emmabostian/regex-cheat-sheet-2j2a)

##CSS Grid Cheat Sheet Illustrated
![CSS Grid Cheat Sheet Illustrated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgbofcvn8rkbmvs3n6rz.jpg)
[CSS Grid Cheat Sheet Illustrated](https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3)

##Flexbox Cheat Sheet
![Flexbox Cheat Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl771p2osqy4kh3uyt8m.jpg)
[Flexbox Cheat Sheet](https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl)

##Git: Cheat Sheet
![Git: Cheat Sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb1qmb4jttqx9x2ph50r.jpg)
[Git: Cheat Sheet](https://dev.to/maxpou/git-cheat-sheet-advanced-3a17)



Related Articles:
[Open Source Projects For Front end Developer](https://us.niemvuilaptrinh.com/article/63-open-source-web-development-tools)
[Website To Learn Coding for Beginners](https://us.niemvuilaptrinh.com/article/15-github-projects-for-web-developer)
[Website Share Code Snippet Online Free](https://us.niemvuilaptrinh.com/article/15-website-share-code-snippet-free)