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.
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
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?
Top comments (11)
Thanks for sharing! These are very helpful! :)
Oh hi 😊 Glad to hear it!
Thank for sharing the list! Extremely helpful!
For Git I can also use ohshitgit.com/ :)
This is officially my new favorite cheat sheet 😂 Thanks, Dominik!
I created my list of cheat sheets too - dev.to/devlorenzo/the-ultimate-com...
Nice collection. Thank you for sharing!
Thanks for sharing, this will be handy 😊
Thanks for sharing
Great post. Thanks for sharing.
Really helpful, thanks for sharing! 😁
Some comments may only be visible to logged-in visitors. Sign in to view all comments.