In the vast breadth of web development techniques, there are three constants: HTML, CSS(styling) and Javascript(scripting). You may wrap it up with different Javascript Libraries or different HTML version or use one of the other available scripting languages, but these are the three techs you'll need to learn if you want write web pages. As with all good languages, it helps to have a playground to interact with and experiment with the technology before you start writing real web pages. You'll need something that is quick to use, easy to spin up and that you can share and save your work. I haven't found any better yet than JSFiddle.
As you can see above, JSFiddle has four windows:
- Top Left: The main HTML window
- Top Right: The stylesheet window
- Bottom Left: Javascript code
- Bottom Right: Result window
You will enter code into the first three windows, with the result showing up in the fourth window. It's a great way to fiddle with code and learn how to do things. Teachers can create examples to share with their class and students can complete assignments.
Note the dropdowns which let you select which version of HTML you'll want to use, which styling option and even which scripting language you'll use, along with a whole slew of javascript libraries available. It even allows you to add external resources (far left menu option) if there is something you want to use that isn't already an option.
Once you have something worth sharing or turning in you simply save it and pass the link (https://jsfiddle.net/knoxp09L/1/) via email or into the preferred classroom software. There are even options to collaborate online so two or more people can be editing the file at the same time. It even has audio communication support. This would be great for remote teaching like I am currently doing. They even give you code so you can embed JSFiddle in other web pages. I had to think on why this would be useful, but you could do some interesting things with an online textbook with embedded JSFiddles for examples and problem to solve. Image being able to test and manipulate the code in a textbook!
I hope I've given you enough to get excited that you'll want to check it out yourself. Please leave feedback in the comments.