Dev to Hero

Color-codes JS docs by difficulty. 100% free, no account, no AI — runs entirely in your browser.

Learning to code is hard. Documentation is harder. MDN, DevDocs and javascript.info are incredible resources — but they treat a beginner and a senior developer exactly the same way. Every section looks equally important. Nothing tells you where to start. Dev to Hero fixes that. It automatically color-codes every section of a documentation page based on its difficulty level: 🟢 Beginner — read this now 🟡 Intermediate — come back after the basics 🔴 Advanced — no need to stress about this yet But it goes much further than just color badges: 📌 Smart prerequisites — each section tells you exactly what you need to know first, sorted by learning order and split between required (★) and optional (○) concepts. Each prerequisite links directly to the relevant doc page. Click once to mark as approached, click twice to mark as mastered — synced across all supported sites and sessions. 📊 Page summary — see at a glance how many beginner, intermediate and advanced sections a page contains, which prerequisites you still need to master, plus an estimated reading time. ☐ Track your reading — mark sections as read and watch your progress update in real time. 🎯 Focus mode — show or hide beginner, intermediate and advanced sections independently so you can focus on exactly what's relevant to your level. 📋 Export your study plan — download a clean, structured study plan showing all sections by level, your read status, and prerequisites still to cover. 💡 Next reading suggestions — at the end of every page, Dev to Hero suggests what to read next based on your knowledge. ✎ Report incorrect badges — votes are currently local to your browser. Shared community voting may be added in a future update. ⌨️ Keyboard shortcut — toggle the extension on/off with Alt+Shift+M. Currently supported sites: MDN Web Docs (HTML EN, CSS EN, JavaScript EN), DevDocs (HTML EN, CSS EN, JavaScript EN), javascript.info (EN & FR) 4 690 pages covered — with more added regularly. Coming soon: MDN French, additional MDN dev languages, CSS in French, HTML in French, Python, TypeScript and more. 100% free. No AI. No account. No API. No ads. Your data never leaves your browser. Changelog : [2.0.4] - 2026-05-29 ### Added - Full HTML & Full CSS in english for DevDocs - Full JavaScript for MDN and DevDocs (831 new pages on each website), with now a total of 979 pages of JavaScript covered on each. - 2 461 new pages added for MDN and DevDocs. Now 4 690 pages covered. [2.0.3] - 2026-05-13 ### Added - Full HTML & Full CSS in english for MDN, very soon available for DevDocs - 908 new pages added in MDN. Now 2 229 pages covered. [2.0.2] - 2026-05-06 ### Added - Support for 341 DevDocs pages - Finalized reading tips at the bottom of pages - 1321 pages covered by Dev to Hero ### Fixed - JavaScript MDN EN 148 pages - Bug fixes [2.0.1] - 2026-05-04 ### Fixed - Bug fixes