Front-End Cheatsheets That Actually Run

Four self-contained, searchable reference pages — zero build step, zero dependencies, zero tracking.
Every example is the real thing: real rendered HTML, real applied CSS, and JavaScript that actually executes in your browser.

HTML · CSS · JavaScript · Angular

---

📖 Table of contents

• Why this is different
• See it for yourself
• What's inside
• Getting started
• Project structure
• Who this is for
• Contributing
• License

---

✨ Why this is different from "just another cheatsheet"

Most cheatsheets are a wall of static text you have to trust. These aren't — the browser proves it for you.

	Typical cheatsheet	This project
Code examples	Text in a <pre> block	Real code, rendered or executed live on the page
"Result" shown	Written by the author, could be stale or wrong	Computed by your own browser, in real time
Finding a topic	Ctrl+F and hope	Instant filtered search, / to focus it from anywhere
Setup	Sometimes needs a server / build tool	Double-click the file. Done.
Angular versions	"Angular basics", vaguely current	Dedicated breakdown for every release, v17 → v22
Privacy	May load fonts, analytics, ad scripts	Zero network requests. Ever.

• 🟢 JavaScript examples actually run. Every runnable snippet in javascript.html executes for real the moment the page loads — the Result box is a genuine computed value, not a hard-coded guess. DOM/event/timer cards have real buttons wired to real, working code.
• 🎨 CSS examples are truly rendered. Every property in css.html is demonstrated with live, applied CSS — flexbox layouts really flex, animations really spin, gradients really blend.
• 🧩 HTML examples are the real element. Every tag in html.html shows a genuinely rendered preview beneath the code, not a screenshot or a description.
• 🅰️ Angular reference, version by version. angular.html covers core Angular concepts and a dedicated changelog for every major release from v17 through v22 — signals, control flow, zoneless change detection, Signal Forms, and more.
• 🔍 Instant search everywhere. Type to filter by keyword; press / from anywhere on the page to jump straight into the search box.
• 🔒 Fully offline and private. No CDNs, no analytics, no fonts, no external requests of any kind — every asset, including demo images, is inlined. Turn off your Wi-Fi; nothing breaks.

---

🔬 See it for yourself

This isn't marketing copy — it's how the JavaScript page actually works. The snippet below is copied verbatim from a real card in javascript.html:

[1, 2, 3].map(n => n * 2).join(", ");

Result, computed live by your browser the instant the page loads — not typed in by a human:

2, 4, 6

Every one of the 92 JavaScript cards works exactly like this. Open the file and watch it happen.

---

📚 What's inside

File	Topic	Cards	Highlights
html.html	HTML	110	Every HTML5 element, grouped by category, each with a live rendered example
css.html	CSS	79	Selectors, box model, Flexbox, Grid, animations, variables — all rendered live
javascript.html	JavaScript	92	Core syntax through async/await — code executes live in the browser
angular.html	Angular	156	Components, signals, routing, forms, RxJS, testing, performance, security + full v17 → v22 changelog

437 reference cards across all four pages. None of them need a server to work.

---

🚀 Getting started

No installation, no npm install, no dev server.

git clone https://github.com/swisswest/HTML--CSS--JavaScript---Angular-Cheatsheets.git
cd HTML--CSS--JavaScript---Angular-Cheatsheets

Then just open any file in your browser:

# macOS
open html.html
# Windows
start html.html
# Linux
xdg-open html.html

Or double-click the file in your file explorer. That's the whole setup.

---

🗂️ Project structure

.
├── html.html        # HTML cheatsheet
├── css.html         # CSS cheatsheet
├── javascript.html  # JavaScript cheatsheet (live code execution)
├── angular.html     # Angular cheatsheet (core concepts + v17–v22)
├── banner.svg       # Hero image used above (hand-drawn, no external assets)
└── README.md

All four pages cross-link to each other via the navigation bar at the top, so once you're in, you never have to come back here to switch topics.

---

🎯 Who this is for

• Developers who want a fast, offline lookup while coding — no ads, no cookie banners, no waiting on a slow docs site.
• Students learning the fundamentals who want to see what code actually does, not just read a description of it.
• Anyone upgrading Angular and wondering exactly what changed between v17 and today.

---

🤝 Contributing

Found an inaccuracy, an outdated version claim, or a missing topic? Issues and pull requests are welcome. Each page is a single self-contained HTML file — no build pipeline to fight with, just edit and open.

---

📄 License

No license has been specified yet for this repository. Until one is added, please treat the content as "all rights reserved" and reach out before reusing it elsewhere.