Starting with jsbin.com
After a couple of lessons, most students were confidently adding alerts and prompts to HTML buttons they had created on a fictional scam web page, pretending to ask for people’s credit card numbers, or showing a pop-up saying “You’ve been scammed.” We then moved on to manipulating the web pages themselves, changing background colours and images, and adding text.
Moving on with glitch.com
Eventually we outgrew using jsbin.com as a development environment, as it only allowed for coding of a single web page at a time, and we went back to using the site we had started out learning HTML and CSS with: glitch.com.
Inside glitch.com, students created a range of projects, such as:
A simple login form to introduce ‘if’ statements
A Love Tester, using random numbers to predict how well two names would be matched
A times table generator, using ‘for’ loops
A random task chooser to introduce the concept of arrays
A Rock, Paper, Scissors game, using Boolean operators such as AND and OR
As with jsbin.com, students could send me a live link to their site on glitch.com if they were stuck, and I could help them spot their error.
It’s a useful skill for the real world
It links back to HTML and CSS, which my students had already studied
The online IDEs make it accessible to almost all students
There are plenty of resources online, so students can look up how to do other things such as add timers, sounds, and graphics
It presents a relatively steep syntax learning curve, and the semicolons and curly brackets can be off-putting; training students to read their code properly, though, is a useful skill for whatever language they learn
The errors are not always obvious; both the sites mentioned had some form of syntax error checking, but it wasn’t always foolproof, and students have to be prepared to hunt down the bugs themselves
P5.js would allow artistic drawing and animating features
Phaser.js is a gaming engine with sprites, physics, and game mechanics
Three.js is a 3D library with lots of examples to ignite students’ interest in 3D games and visualisation
Here’s another online editor, but one that requires you to register for an account (which is free). It allows multiple pages and asset hosting, and gives memorable unique site names.