DEV Community

loading...
Cover image for Favorite Front End Cheat Sheets

Favorite Front End Cheat Sheets

daschl2 profile image Dayna S ・3 min read

I've been teaching myself front end development, and I realized something early on in my journey:

There is so much to know, and there is no way I can memorize it all.

I shouldn't have to memorize it all, either. I needed to find resources and systems to do some of the heavy mental-lifting for me. Below are the cheat sheets and reference guides that I've been leaning on lately:


HTML

Semantics Cheat Sheet
➡️ I use this as a reminder for how to incorporate semantically correct HTML markup (something that wasn’t obvious to me when I first started learning the language).

CSS

CSS Cheat Sheet
➡️ I like how interactive this one is. Not only does it give you a comprehensive view of CSS at-a-glance, but you can also click into each box and be directed to a separate tab for more information.

CSS Reference Guide
➡️ Depending on the day, I may also use this guide. This one is also interactive, and it gives additional information within the site.

Guides for Flexbox & Grid
➡️ Both are posted by CSS-Tricks, and these are two of my favorite guides. For me, it’s visually appealing and approachable, and I like how each gives background information and defines terminology from the start.

Flexbox Cheat Sheet Screenshot

JavaScript

Interactive JS Cheat Sheet
➡️ With this one, you have the option to tweak the information that is displayed. You can hide panels that you don’t want to see, or you can pin panels to the top. Similar cheat sheets are also provided for HTML, CSS, jQuery, and SEO.

Codecademy Cheat Sheet
➡️ This helps fill out my understanding of basic JavaScript concepts. I like that it has a clean UI as well.

Front End Frameworks

Bootstrap 4 Cheat Sheet
➡️ I use this in addition to the Bootstrap documentation. Not only can you click into each class to learn more, but you can also see a preview of what each code snippet will look like in the browser.
➡️ With Bootstrap v5.0 being a thing now, I’ll look out for any cheat sheets tailored to that version.

Bootstrap Cheat Sheet Screenshot

Tailwind Cheat Sheet
➡️ This has become a new favorite of mine, as I learn Tailwind CSS. I like how you can search within the cheat sheet and filter by version (all the way up to the latest at the time of this post - 2.0.1). Again, I’ll use this along with the official documentation.

Git & Markdown

Atlassian Git Cheat Sheet
➡️ I like how this one categorizes the different git commands (log, reset, diff, push, etc.). Everything is laid out in a clean-looking PDF.

Markdown Cheat Sheet
➡️ This is separated into 2 sections: Markdown Syntax and GitHub-Flavored Markdown.

Markdown Cheat Sheet Screenshot

Emoji Cheat Sheet
➡️ Who doesn’t love a good emoji cheat sheet? 😉 I like the option to do an instant search, and you can click on the emoji itself to copy it.


With all that I need to keep track of, these resources allow me to access information quickly and (mostly) in one place. Which cheat sheets or reference guides have been helpful for you?

Discussion (11)

pic
Editor guide
Collapse
lauradisanza profile image
Laura

Thanks for sharing! These are very helpful! :)

Collapse
daschl2 profile image
Dayna S Author

Oh hi 😊 Glad to hear it!

Collapse
desudo profile image
Dominik

Thank for sharing the list! Extremely helpful!
For Git I can also use ohshitgit.com/ :)

Collapse
daschl2 profile image
Dayna S Author

This is officially my new favorite cheat sheet 😂 Thanks, Dominik!

Collapse
devlorenzo profile image
DevLorenzo

I created my list of cheat sheets too - dev.to/devlorenzo/the-ultimate-com...

Collapse
aryvidot profile image
Ary

Nice collection. Thank you for sharing!

Collapse
imonem profile image
imonem

Thanks for sharing, this will be handy 😊

Collapse
varghesejose2020 profile image
Varghese Jose

Thanks for sharing

Collapse
leandroats profile image
Leandro Torres

Great post. Thanks for sharing.

Collapse
lornasw93 profile image
Lorna Watson

Really helpful, thanks for sharing! 😁

Collapse
chemart profile image
Chema-R-T

Thank you very much!