Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 24, 2021 01:30 pm GMT

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:

HTML

Semantics Cheat Sheet
I use this as a reminder for how to incorporate semantically correct HTML markup (something that wasnt 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, its 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 dont 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, Ill 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, Ill 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 doesnt 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?


Original Link: https://dev.to/daschl2/favorite-front-end-cheat-sheets-305k

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To