DEV Community

loading...
Cover image for The Ultimate Cheat sheet List For Web Developers

The Ultimate Cheat sheet List For Web Developers

Insha
A curious Learner exploring areas of Web development. Proficient working with HTML5, CSS, Bootstrap, JavaScript
Updated on ・4 min read

Being developers, we work with many different languages. Which makes it humanly impossible to remember all its aspects. Yes, we do have MDN docs, but looking at them for every little issue can be time-consuming. This is when a "Cheat Sheet" comes super-handy.

In this post, we'll go through some quick and useful cheat sheets that'll save you hours in wasted time each week.

When it comes to Web development, HTML is the first choice. Web development generally comprises 3 fundamentals: basically HTML, CSS, and JAVASCRIPT.

HTML Cheat Sheet

Looking for a cheat sheet that contains useful code examples and web developer tools, markup generators, and more? Well, you’re going to love this.
This single-page cheat sheet is for all your needs. It covers all the basic syntax along with proper examples.

image.png

Do you want to know how to structure tables, lists, forms on your webpage? Well, you’ll find it all here.

This cheat sheet also contains a text editor that’ll help you preview your code live.

HTML Reference

If you believe in learning by examples: Let me tell you about this one.

htmlreference.io is a free guide to HTML. You will find all the elements and attributes with proper examples for a better understanding.

image.png

You’ll find every HTML element arranged in alphabetical order.

CSS Reference - A free visual guide to CSS

As we know CSS has a number of properties. Do you remember them all? I guess nobody does.
So what’s the hack? These cheat sheets are a hack.

If you’re looking for a complete reference with adequate examples, you need to check this.

image.png

It features the most popular properties and explains them with illustrated and animated examples.

CSS Cheat Sheet

CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box, and text-shadow generators, color picker, and more.

This cheat sheet also contains a text editor that’ll help you preview your code live.

image.png

GRID: A simple visual cheatsheet for CSS Grid Layout

Learn all about the properties available in the Grid Layout through simple visual examples. I as a developer use this handy cheat sheet all the time.

Grid is one of those CSS topics where every beginner faces difficulty. I too have banged my head every time I had to work with it.

image.png

FLEX: A simple visual cheatsheet for flexbox

The Flexible Box Layout module makes it easier to design flexible responsive layout structures without using float or positioning.

Learn all about the properties available in flexbox through simple visual examples. You need to fix the alignment of your webpage but you don’t know which property would work? Take a look at these cheat sheets. It'll give you a clear idea of the properties you need to apply.

image.png

Online Interactive JavaScript (JS) Cheat Sheet

This JavaScript cheat sheet comes with the most important concepts, functions, methods, and more. A complete quick reference for beginners.
Find code for JS loops, variables, objects, data types, strings, events, and many other categories along with examples on this single page.

image.png

JavaScript Cheatsheet

This 13-page cheat sheet will take you from a beginner to advanced on the fundamentals of JavaScript. Giving you proper terminologies, and syntax of common constructs.

This cheat sheet cover:- ES6+, simple explanations, DOM API, Event loop, functions, array, object, type and so much more.

js-cheatsheet.png

Modern-JS-cheatsheet

This document is a cheat sheet for JavaScript containing tips, tricks, and best practices you will frequently encounter in modern projects and most contemporary sample code.

If you know the basics of JavaScript then this cheat sheet will be a smooth ride for you.

image.png

Cheatography.com

Cheatography has thousands of incredible, original programming cheat sheets. You will find everything related to a particular programming language and can easily download them.

For quick reference purposes, this is the best one to pick.

image.png

OverAPI.com

If you’re looking for a site containing all the cheat sheets, all!
OverAPI.com is the one for you. You don’t need to bang your head every time you don’t remember something. Take a look at these cheat sheets and ease your work.

This website aggregates cheat sheets for many popular programming languages such as JavaScript, NodeJS, PHP, Python, CSS.

image.png

Developer Cheat Sheets

This cheat sheet is a compilation of some of the most popular languages: The history of web development, React cheat sheet, React Router cheat sheet, Redux cheat sheet, ES6 cheat sheet, Request cheat sheet.

Get familiar with the syntax and its usage with these handy cheat sheets.

image.png

Wrapping Up

There are literally hundreds of resources out there, and I hope that some of the ones listed here will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks. Happy coding!

Also if you got any question feel free to ping me on Twitter

Discussion (53)

Collapse
rii profile image
Rii

Love it!

Collapse
insha profile image
Insha Author

Thank you, Rii.

Collapse
j9t profile image
Jens Oliver Meiert

I’m feeling free to submit my HTML Elements Index, too, because it provides you with a higher-level perspective at HTML. The index features all 170 elements of all major specifications, so it makes it easier for you to compare and follow the development.

Collapse
oricis profile image
Moisés Alcocer

I think the visual cheat sheets (flex and grid) are more practical and very good references to see one and many times.
The others are interesting to see them one time searching for unknown things, but in reality, if you don't memorize the contents distribution they are unuseful in your work routine.
In the end, you can create your cheatsheets with the most common functions or references that you are using dairy. For example, I have "the most commonly used functions" (PHP vs JS) here: github.com/oricis/notes/blob/maste...

Collapse
haroldv22 profile image
Harold Villalobos

Thank you for this post is very useful :)

Collapse
insha profile image
Insha Author

Glad to hear that, Harold!

Collapse
lucalves profile image
Lucas Alves

Thanks for the post!

Collapse
insha profile image
Insha Author

My pleasure, Lucas!

Collapse
bekjohansson profile image
Bek Johansson • Edited

Mic Drop, Thanks for this very informative article!!!!

Collapse
insha profile image
Insha Author

Woahh thank you, Bek 😊🙌

Collapse
stuartcmd profile image
Stuart

Thanks, Insha!

Collapse
insha profile image
Insha Author

My pleasure, Stuart !

Collapse
frontender profile image
Frontender

Nice work.. I love it

Collapse
insha profile image
Insha Author

Thank you!

Collapse
vahe_sevachyan profile image
Vahe Sevachyan

This is great!

Collapse
insha profile image
Insha Author

Thank you !

Collapse
_mohanmurali profile image
Mohan Murali

This is cool. Thanks for sharing.

Collapse
insha profile image
Insha Author

My pleasure, Mohan .

Collapse
suniljoshi19 profile image
Sunil Joshi

Great list! would you consider adding our angular cheat sheet into this one? - wrappixel.com/angular-cheat-sheet/

Collapse
insha profile image
Insha Author

Thanks for the reference, Sunil. I'll definitely check this !

Collapse
joseme profile image
José Torres

Buen post! Muchas gracias!

Collapse
insha profile image
Insha Author

Thanks, Jose !

Collapse
mauropalgi profile image
MauroPalgi

Saving for later! good one!

Collapse
insha profile image
Insha Author

Glad to hear that, thanks !

Collapse
joaocardoso193 profile image
JoaoCardoso193

This is so useful, thank you!

Collapse
insha profile image
Insha Author

Glad to hear that Joao !

Collapse
thuongton98 profile image
Thường Tôn

Thanks and love!!!!

Collapse
insha profile image
Insha Author

My pleasure🙌

Collapse
sadeqnikbakht profile image
SadeqNickbakht

NICE ! I love it its so helpful <3

Collapse
insha profile image
Insha Author

Glad to hear that,Sadeq 😊

Collapse
talah221 profile image
talah221

So cool

Collapse
insha profile image
Insha Author

Thank you, Talah !

Collapse
raflymaulana28 profile image
raflymaulana28

Nice Post! Thanks!

Collapse
insha profile image
Insha Author

Thank you!

Collapse
sirmong profile image
Klim

So good and so useful. Thank you! 👍

Collapse
insha profile image
Insha Author

Glad to hear that, Klim 🔥

Collapse
mdsardar profile image
Mohammed Sardar

I'm new to cheat sheet and a developer . Really excited to explore if anything for Java kind of languages too. Thanks

Collapse
insha profile image
Insha Author

Glad to help, Mohammed ☺️

Collapse
jrohatiner profile image
Judith

This is great. Just thought I’d mention Dash (Mac) and Velocity (win) a tool I use that has the complete docs for over 100 languages and libraries. Both available here:
kapeli.com/dash

Collapse
janitham97 profile image
Janitha Missaka

Superb 🌟

Collapse
insha profile image
Insha Author

Thanks, Janitha!

Collapse
mnepita profile image
Martin Nepita

This is so helpful, thank you so much!!

Collapse
insha profile image
Insha Author

Glad to help, Martin!

Collapse
ylethingoc profile image
ylethingoc

Exactly what I need <3

Collapse
insha profile image
Insha Author

Ah, so good to hear this!

Collapse
shahilalit profile image
ShahiLalit

Awesome work Insha 👏 , thanks for sharing. My personal favourites are Modern-JS-Cheatsheet and Developer-cheatsheet. ✌️

Collapse
lorezz profile image
lorezz • Edited

thanks, I have to mention also DevHints devhints.io/ which contains hints regarding a lot of tools and dev languages

Collapse
robsondpreuss profile image
robsondpreuss • Edited

Nice! Thank you.

Collapse
insha profile image
Insha Author

My pleasure 🙌

Collapse
gumonet profile image
Angel Gutierrez

Amazing! thanks for share!

Collapse
insha profile image
Insha Author

My pleasure, Angel 😊🙌

Collapse
sohanr profile image
MD. Mizanur Rahman

thanks for sharing. <3

Collapse
makeshboopathy profile image
MakeshBoopathy

This post is awesome . How did you find those , omg those are really helpful