w3fools VS playground-elements

From what I understand a lot of it is residual. W3schools has always been directed at beginners, but it also used to be wrong rather frequently.

This site [0] used to be the hub for the hate and now has a message saying that w3schools has gotten better. If you're curious, they still have a link to the web archive that has all the mistakes documented.

[0] https://www.w3fools.com/

https://www.w3fools.com/:

> When W3Fools was launched in 2011, the state of documentation for developers was poor. This site documented many content errors and issues with the W3Schools website. The Mozilla Developer Network was around but it did not have much support at the time.

> Today, W3Schools has largely resolved these issues and addressed the majority of the undersigned developers' concerns. For many beginners, W3Schools has structured tutorials and playgrounds that offer a decent learning experience. Do keep in mind: a more complete education will certainly include MDN and other reputable resources.

It dates back to https://www.w3fools.com/ and specifically https://web.archive.org/web/20110412103745/http://w3fools.com/

w3fools.com has all the details.

As an aside, when I was learning it was discouraged to use w3schools (https://www.w3fools.com/) but it seems some of those concerns aren't true anymore, but still, I'd highly recommend going to MDN docs before anything else: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

It used to be not as accurate. There's even a site devoted to it.

w3schools is very very bad. https://www.w3fools.com/

I wish I shared your optimism. I've contacted them multiple times regarding bad material, and they've never fixed any issues. I was told during one conversation that they don't remove material; even if it's outright wrong. I won't be happy until there's an equivalent to https://www.w3fools.com/ for G4G.

This one worked pretty great for my purposes. https://github.com/google/playground-elements

Of course if you’d rather build your own less functional copy from scratch in order to waste several months and avoid shipping, I have some colleagues you might enjoy working with.

If you ever want to add a client-side-only playground to your own site, have a look at the Playground Elements project: https://github.com/google/playground-elements

It's a set of custom elements and a service worker that populate an iframe with the contents of the code editor with no server, but in a way that looks like real network requests to the iframe.

This means you get a root HTML page and all the right loading behavior and ordering as a real hosted web page. Inspect the iframe with devtools and you see exactly what you wrote, nothing added by the playground.

The elements also support Node-style import specifier resolution, pulling npm dependencies automatically from unpkg.com, TypeScript, and JSX.

And the elements are very configurable. You have drop in a tabbed-editor and preview combo element, or you can separate the preview and editors for each file - which lets you write prose around each.