A practical, deep-dive JavaScript reference — open source, dependency-free, and built to be forked.
Live demo → (open index.html locally, or deploy to GitHub Pages — see below)
Most JavaScript references either explain the spec (MDN — excellent, but reference-dense) or teach syntax without depth (most tutorial sites). javascript.ai tries to sit in between: every lesson pairs a practical explanation with runnable code, closes with the exact interview questions that get asked about that topic, and links out to the primary sources (MDN, ECMA-262) rather than duplicating them.
- 13 in-depth lessons — fundamentals through internals (closures, prototypes, the event loop), async, ESM vs CommonJS, the modern ecosystem (TypeScript, frameworks, runtimes, build tools), and the DOM.
- 60+ interview questions — categorized and filterable, including "predict the output" gotchas.
- 10 solved coding challenges — debounce, throttle, curry, deep clone, a custom
EventEmitter, a hand-rolledPromise.all, and more. - 4 projects — a live todo app, a live debounce/throttle lab, and full guided walkthroughs for building your own Promise and a minimal virtual DOM.
No build step. No framework. No dependencies. Plain HTML, CSS, and JavaScript that runs by opening a file in a browser.
javascript.ai/
├── index.html # Homepage — hero, live console, curriculum grid
├── interview-questions.html # 60+ Q&A, filterable by category
├── projects.html # 4 projects (2 live demos, 2 guided builds)
├── css/
│ └── style.css # The entire design system: tokens, layout, components
├── js/
│ ├── site-data.js # ⭐ Single source of truth for nav + search — edit this to add a page
│ ├── include.js # Renders the topbar/sidebar from site-data.js on every page
│ ├── main.js # Copy-code buttons, Q&A accordions, tag filters
│ └── repl.js # The homepage's live, sandboxed JS console
└── pages/
├── fundamentals/ # Variables, functions/closures, objects/arrays
├── advanced/ # this, prototypes/OOP, event loop
├── async/ # Promises & async/await
├── modules/ # ESM vs CommonJS, modern JS & ecosystem
├── dom/ # DOM & events
└── practice/ # Coding challenges
- Create the HTML file under the right
pages/<category>/folder. Copy the<head>/shell markup from any existing lesson page (topbar mount, sidebar mount,content__innerwrapper) and write your content inside.content__inner. - Set
window.SITE_ROOTnear the bottom of the file to the correct relative path back to the repo root (../../for anything two folders deep,./for root-level pages). - Add one entry to the relevant group in
js/site-data.js:That's it — it now appears in the sidebar, the search box, and the homepage curriculum grid automatically.{ title: 'Your Lesson Title', href: 'pages/category/your-file.html', desc: 'One-line description.' }
- Reuse the existing CSS components:
.codefor code blocks (with the copy button built in),.callout/.callout.tip/.callout.warnfor asides,.qafor interview-question accordions,.grid+.cardfor link grids.
The visual language leans into the subject: an ink-and-amber palette (nodding to JavaScript's own yellow without literally using it), JetBrains Mono for headings/code/nav to keep the "this is a programming reference" feel, and a signature console.log()-styled eyebrow label used consistently as a structural device. The homepage's live console isn't decorative — it's a real, sandboxed JS evaluator (js/repl.js) that runs whatever you type.
No build step required:
# Any static file server works, e.g.:
npx serve .
# or
python3 -m http.server 8000Then open http://localhost:8000.
- Push this repo to GitHub as
javascript.ai. - Go to Settings → Pages.
- Under "Build and deployment," select Deploy from a branch, branch
main, folder/ (root). - Your site will be live at
https://joemrnice.github.io/javascript.ai/.
This is meant to be a living, community-maintained reference. Ideas for pull requests:
- New lessons (generators/iterators,
Proxy/Reflect,Intl, Web Components, testing, performance profiling, security fundamentals). - More coding challenges or a fifth project.
- Corrections — if a claim is wrong or a spec detail is stale, open an issue.
MIT — see LICENSE. Not affiliated with MDN or Mozilla; built to complement, not replace, the primary documentation.