Favorite Front End Cheat Sheets

#webdev #beginners #productivity

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.

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.

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.

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?