For the purposes of the learning how to program simple web applications, you should be able to make use of a free account on CodeSandbox. The following guide, Programming Environment Setup, shows how to get a CodeSandbox account. In addition, that guide explains how to set up other environments in case you cannot get a CodeSandbox account. That includes setting up Windows 11 and MacOS, to be able to do the programming.

CodeSandbox promotes a modern way of doing web programming. It makes use of and enforce ES Modules syntax, instead of the older CommonJS syntax. Although you will still see many examples online using the older CommonJS syntax, it is better to learn the more modern system. Keep in mind that at this point, both syntaxes are widely used. In addition to the ES Modules syntax, CodeSandbox uses a bundling mechanism to build the web programs. An example of such a bundler would be webpack (webpack Concepts). A bundler like webpack does a number of things. This includes transpiling (converting TypeScript to JavaScript), and making Node.js packages available to JavaScript that runs inside the frontend web page(s). The bundler will combine all the modules your web project uses into static content. Since modern web programming often makes use of multiple modules, this can make it easier for multiple people to work on the same project. The bundler takes care of making everything work together as a group of bundles. If you are just working by yourself, this may not be a big concern. However, if you are thinking of working as a web program developer some day, it is quite likely that the group you work with will be using some kind of bundler.

The webpack bundler can be complex to configure. So, when showing how to do the lessons should you be outside of CodeSandbox, we will use the vite bundler. The vite bundler is Node.js package that is very simple to use, but is not flexible enough to use for complex projects. As such, it is very useful for the beginner web programmer, as it does only what you need it to do.