Skip to content

README.md

Latest commit

 

History

History
173 lines (131 loc) · 6.89 KB

README.md

File metadata and controls

173 lines (131 loc) · 6.89 KB
Raw

HTML · CSS · JavaScript · Angular Cheatsheets

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.

Zero dependencies No build step Offline first Reference cards Angular coverage PRs welcome

HTML · CSS · JavaScript · Angular

📖 Table of contents

✨ 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

FileTopicCardsHighlights
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.