cheat sheets / front end
Front-End Cheat Sheets — HTML, CSS & JavaScript References
Five free references that stay maintained, plus the part most lists skip: when a cheat sheet is the right tool, when it will mislead you, and which CSS layout system to reach for.
Front-end has a peculiar reference problem. The platform changes constantly, so anything printed is wrong within a year, and the search results for "CSS cheat sheet" are full of pages that were accurate in 2016. What survives is a small set of references that are actively maintained by people with a reason to keep them right. There are five worth bookmarking, and they cover different jobs: one is the source of truth, two are quick lookups, and two are deep visual guides to the thing CSS beginners struggle with most. Below is what each is for, and how to use them without picking up bad habits.
01 · WHAT THEY'RE FOR
A cheat sheet is for recall, not learning
This distinction is worth getting straight early, because using the wrong one wastes a lot of time. A cheat sheet compresses something you already understand into a form you can scan. It answers "what was the syntax for that?" in about four seconds. It is a terrible way to meet a concept for the first time, because compression strips out exactly the context a beginner needs: the why, the edge cases, the reason the API looks the way it does.
Documentation does the opposite. It's slower to scan and much better at teaching. So the working pattern is: learn it once from the docs, then keep the cheat sheet open for the next six months while it becomes muscle memory. If you find yourself reading a cheat sheet and feeling confused rather than reminded, that's the signal to go back to the docs instead of squinting harder.
var and jQuery, is telling you it stopped being updated years ago. Undated references are worse than dated ones, because at least a date lets you judge.02 · THE ESSENTIALS
HTML, CSS & the web platform
The references you'll open every working day. MDN is the one to trust when two sources disagree: it's maintained by Mozilla with input from the browser vendors, and it documents what browsers actually implement rather than what a spec proposed. Its browser-compatibility tables alone justify the bookmark, because "does this work in Safari?" is a question you will ask constantly.
Devhints is the opposite kind of resource and pairs well with it: a single scannable page per topic, no prose, built for the moment you've forgotten whether it's justify-content or align-content. Faster than searching the docs when you already know what you're looking for.
- MDN Web Docs ↗The definitive, authoritative reference for HTML, CSS, and JavaScript — maintained by Mozilla. The web platform's source of truth, with browser-support tables on every page.developer.mozilla.org
- CSS Cheat Sheet ↗Selectors, properties, and units in one scannable Devhints page — faster than searching the docs when you already know what you want.devhints.io
03 · LAYOUT
CSS layout: Flexbox and Grid
Layout is where most front-end frustration lives, and the confusion usually comes from having two systems that look interchangeable but aren't. The short version: Flexbox is one-dimensional. It arranges things along a single axis, a row or a column, and is very good at distributing space and aligning items within that line. Grid is two-dimensional. It controls rows and columns at the same time, so you can define a page skeleton and place things into it.
A rule of thumb that holds up in practice: reach for Grid when you're laying out the page, and Flexbox when you're arranging the contents of a component. A navbar with a logo on the left and links on the right is Flexbox. A dashboard with a sidebar, header, and content area is Grid. They compose happily: Grid regions containing Flexbox components is an extremely common and perfectly sensible structure.
The two CSS-Tricks guides below are the canonical references for both, and they earn that status by being visual. Layout is a spatial problem, and a diagram of what align-items does communicates in one second what a paragraph takes a minute to explain badly.
04 · FRAMEWORKS
React, and what a framework reference can't tell you
React is the framework you're most likely to meet in a job listing, and a compact reference for its syntax saves real time once you've learned the model. What a cheat sheet won't give you is the model itself, and that's the part that matters: components render as a function of state, and you describe what the UI should look like rather than mutating it step by step.
Two rules cause most beginner bugs, and neither is obvious from a syntax reference. Hooks must be called at the top level of a component, never inside a condition or loop, because React tracks them by call order. And state updates are asynchronous and batched, so reading a state variable immediately after setting it gives you the old value. Learn those two from the official docs; use the sheet below for everything else.
05 · IN PRACTICE
Getting more out of them
A few habits make these references far more useful than bookmarking and forgetting them.
Keep one tab, not twelve
The value of a cheat sheet is speed, and hunting through a bookmark folder destroys it. Most people settle on MDN plus one Devhints page for whatever they're currently working in. That's enough.
Use the browser's devtools as the real cheat sheet
For CSS in particular, the computed-styles panel answers questions no reference can: not what a property does in theory, but which rule is actually winning on this element right now. When layout misbehaves, that panel finds the cause faster than any guide.
Learn specificity once and stop guessing
A large share of "CSS is broken" moments are specificity conflicts. The order, weakest to strongest, is element selectors, then classes and attributes, then IDs, then inline styles, with !important overriding the lot. Knowing that turns a mystery into a two-second diagnosis, and it's worth committing to memory rather than looking up.
06 · FAQ
Frequently asked questions
Are these front-end cheat sheets really free?
Yes. All five are free to read with no account, no trial, and no paywall. MDN is maintained by Mozilla as a public resource, CSS-Tricks publishes its guides openly, and Devhints is a free open-source project.
Should I use Flexbox or CSS Grid?
Use Grid when you are laying out the page in two dimensions, and Flexbox when you are arranging items along a single row or column inside a component. They are designed to work together, so a Grid page skeleton containing Flexbox components is a normal and sensible structure rather than a compromise.
Is MDN better than W3Schools?
For accuracy, yes. MDN is maintained by Mozilla with browser-vendor input and documents what browsers actually implement, including per-feature compatibility tables. It is the reference to trust when two sources disagree.
Do I still need to learn HTML and CSS if I use a framework?
Yes. Frameworks render HTML and CSS underneath, so every layout bug, accessibility problem, and styling conflict is ultimately a problem in those two languages. Developers who skip the fundamentals tend to get stuck the moment something behaves unexpectedly, because the framework docs cannot explain it.
How often do these references go out of date?
The four maintained references here are updated continuously, which is why they are the ones listed. Front-end deprecates quickly, so check the last-updated date on any other reference you find and be skeptical of anything that still teaches float-based layout or jQuery-era JavaScript patterns.