DEV Community

Cover image for Favorite Front End Cheat Sheets
Dayna S
Dayna S

Posted on

Favorite Front End Cheat Sheets

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:


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 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


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?

Top comments (11)

lauradisanza profile image

Thanks for sharing! These are very helpful! :)

daschl2 profile image
Dayna S

Oh hi 😊 Glad to hear it!

desudo profile image

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

daschl2 profile image
Dayna S

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

devlorenzo profile image

I created my list of cheat sheets too -

aryvidot profile image

Nice collection. Thank you for sharing!

imonem profile image

Thanks for sharing, this will be handy 😊

varghesejose2020 profile image
Varghese Jose

Thanks for sharing

leandroats profile image
Leandro Torres

Great post. Thanks for sharing.

lornasw93 profile image
Lorna Watson

Really helpful, thanks for sharing! 😁

Some comments may only be visible to logged-in visitors. Sign in to view all comments.