The Best Online Editors for Teaching HTML/CSS/JS

Over the past few months, I've been teaching in-person classes on HTML, CSS, and JavaScript, as part of GirlDevelopIt San Francisco. Along the way, I've experimented with various online consoles and editors, and I thought I'd share my experience with using them for teaching. But first...

Why is an online editor useful?

• Speed: It's often faster to make changes in an online console and see the result than it is to use a standard code editor, save the file, reload the page, etc.
• Sharability: An online console often gives you a link to your code, which you could easily share with students -- or they could share that link with you (like if they worked on something outside the class and had a question). Look, ma, no upload!
• Compatibility: An online console works anywhere that you have a browser (and works pretty much the same everywhere), whereas most code editors are specific to the OS and each works slightly differently. By using an online console, all students can have the same experience. Plus, if a student doesn't have a laptop with them (like they only have a ChromeBook, iPad, or iPhone), then they can always use the online console.

That being said, there is a danger to using online consoles — they often work a bit differently than the real thing (saving a file on the desktop + viewing in the browser), which can lead to debugging peculiarities (like line numbers not actually pointing to the right line of code or an inspected source showing an iframe) that can confuse students even further. For teaching and learning, the best consoles are the ones that are as close to the real thing as possible.

JavaScript Consoles

For the JavaScript class, we started off with a few weeks of just JS: variables, functions, conditionals, etc. To make sure the students focused on JS and not how it interacts with the DOM, I wanted them to use JS in a pure JS console. There are many JS consoles out there, but the only one I truly liked is repl.it. It's a console for a variety of languages, and is the one used by Codecademy labs. Here's what I liked about it:

• It evaluates the JS on the client, so it's fast. (A few consoles send it to a server first, ick).
• It has a multi-line console on the left-hand side, so you can write lots of code and then run it. Many JS consoles are only single line input, or multi-line if you press shift-enter — but I really wanted multi-line to be the default.
• It uses the open-source Ace editor for the multi-line console, and that editor includes line numbers and error markers next to problematic lines.
• It's linkable and printable.
• It's an open-source project, and the contributors were very responsive to the issues I filed.
• It works on ChromeBook and to a reasonable extent, iPad and iPhone (yes, one of our students coded on an iPhone!).

HTML/CSS/JS Editors

Once we got to the DOM part of the JS class, I looked for an online editor that supported HTML/CSS as well. In this case, though, I encouraged most students to use their desktop code editors, as they're generally better and they are what they would be using outside of class anyway — so I mostly looked for online tools that I could use for in-class demonstrations and as backup options for students that couldn't use desktop editors.

I ended up using Cloud9 IDE most of the time. Cloud9 a startup for doing web development in the cloud, and their editor is the open-source Ace editor (same as repl.it). The experience of using it is similar to the experience of using a desktop editor - you start a project, create a new file, save the file, view the file in a new window, save and reload, repeat. My only real qualms with it are that it takes time to get started and the project-based interface is a bit much for someone just playing around - and it suffered occasional server issues.

I also occasionally used JSBin v3, an open-source editor from Remy Sharp, based on the CodeMirror editor. I like how lightweight the interface is, but I didn't like how the tool changed my HTML (inserting comments, script tags, etc), and I found the save-view-reload interface a bit confusing. That said, Remy is receptive to feedback and says that I could set up custom templates for teaching. I would definitely look more into it for next class.

Many people would recommend JSFiddle, but I don't actually think that's optimized for learning and teaching the basics of HTML/CSS/JS. It's better for putting together quick demos and test cases, particularly when using libraries.