Setting up a Programming Environment
Setting up a Programming Environment
How to setup your computer for programming
Since we are interested in learning about web programming, we should take some steps to make it so that we have a suitable environment for that type of programming. One of the ways to do this is to make use of CodeSandbox.
CodeSandbox
Pros of using CodeSandbox
For learning about web programming, CodeSandbox makes just about all the tools you need to get started readily available. CodeSandbox uses Visual Studio for the Web, as its online editor. This is a powerful editor that can easily be customized by adding Extensions. In addition, you can use CodeSandbox even if you have a computer that is relatively low-end, like a Chromebook or even an Android tablet. Basically, if you have Internet access, you can use CodeSandbox. The free account that you can sign up for is easily powerful enough to do any of the lessons we are going through.
Cons of using CodeSandbox
One of the biggest cons to using CodeSandbox is that you need either a Google email account or a GitHub account to be able to sign up. If you don’t have that type of account, you can get one since either one is free. However, if you are a highschool student, this may not be a viable option depending on rules that your school may have.
Signing up for a CodeSandbox account
I used one of my Google email accounts to sign up for CodeSandbox. You can start by going to this CodeSandbox site, and clicking on the Sign in button.
Then, I clicked on the Sign in with Google button.
A popup window will show up saying that codesandbox.io will access information about the account you choose. If you agree, then click Continue. A dialog showing your user settings will show up. Change these as needed and click on the Create account button.
Create a Workspace name that suits you. Click on any areas that apply to how you will use CodeSandbox. You don’t need to choose any areas if you don’t want to. In the Build plan area, click on the Get started for free button.
In the Recent area, click on Explore templates
For the lessons I have planned, the template you want to choose is in the Browser section. In the screen shot below, you can see that Browser is just to the right of the Popular templates.
From the Browser templates, choose the JavaScript template.
Give a name to your Sandbox and click on Create Sandbox.
This will bring you to a view that looks like this. I have turned the theme to a light theme as this shows up better in screen shots.
There are three panels. The panel on the left is where you can use the File Explorer to display a list of files for the project. The panel in the center displays the code for the file selected in Explorer. The panel on the right is the Preview panel where it will display a preview of the web page the projecte created. If there are errors in the code, the Preview panel will display some error messages.
In terms of using CodeSandbox, the lessons will provide guidance on how to use this tool to learn some web programming.
Using an Ubuntu Virtual Machine
If you have a computer that has enough hard drive space and RAM to run a Linux Virtual Machine, this is the way that I would recommend that you do to learn web programming or just about any other kind of basic programming. The flavor of Linux that I would use is Ubuntu, because this distribution is very popular. That means that Ubuntu can run most programming tools. In addition and with it’s large community, Ubuntu has solutions for problems that you might encounter in setting it up or configuring in order to run tools for programming. Another testament to Ubuntu’s popularity is the the Windows Subsystem for Linux (WSL) is based on Ubuntu.
Pros of running an Ubuntu Virtual Machine
One pro of running an Ubuntu Virtual Machine, is that this is a skill that anyone interested in computer technology should know how to do. Another pro, is that you can set up every part of a web application: the frontend, the middleware and the backend database on such a machine. Still another pro is that if you ever want to setup and configure your own server on the hosting platform of your choice, an Ubuntu server is highly likely to be one of the available options. So, anyone who is serious about a career in computer technology, should learn how to use such a virtual machine.
Cons of running an Ubuntu Virtual Machine
One con of running an Ubuntu Virtual Machine, is that you need a fairly decent computer to serve as the host. If you don’t have at least 30 GB of free hard drive space and 4 GB of RAM to allocate to the virtual machine, running a virtual machine will be difficult if not impossible. Another con of running an Ubuntu Virtual Machine, is that there is a learning curve associated with getting this set up. So, if you are relative inexperienced in doing things on a computer, this may not be what you want to do.
Setting up an Ubuntu Virtual Machine
In the Intermediate module of this site, there is a Guide to creating an Ubuntu 24.04 VM. That guide is based on using VMware as the VM server and explains the steps in doing that. That guide also explains which software you need to install and configure for web programming. So, if you are interested in this option, you should check out that link.
Using Windows 11
Another possible option for learning the basics of web programming is to use your Windows 11 machine, if that is the type of computer that you have. Somewhere around 70% of desktop and laptop computers run some version of Windows, with the latest version being Windows 11. So, there is a decent chance that this is the type of computer that you have access to in order to learn basic web programming.
Pros of using Windows 11
One pro of using Windows 11, is that many people have a Windows PC. Another pro of using Windows 11, is that a lot of software used for programming in general have well designed installers for the needed software. This makes installation of most of the necessary software much easier than it is for Linux or MacOS. So, if you are new to programming, then this can make Windows a good option. Another pro, is that since there are so many Windows users, you can find solutions for installation and configuration issues for Windows.
Cons of using Windows 11
One con is obviously that if you have a Mac, you would have to run Windows virtually, and that is not a good way for beginners to learn about web programming. Another con, is that Windows is more limited than Linux or MacOS, in terms of the kinds of databases that can be run locally to provide a backend for a web application. You can work around this last limitation if you are willing to use Docker, but running Docker on Windows is best done using the WSL (Windows subsytem for Linux). So, that would add complexity to the overall setup, that a person without much computer experience would probably not want to deal with.
Learning basic web programming on Windows 11 - Option 1
This option is for those who have administrator privileges on the Windows machine they have access to. If this is the boat that you are in, this is the easier way to get started with learning web programming on Windows. That is because you can install software like Node.js and npm globally (for all users and in any directories), and this makes it easier to manage your programming projects. In addition, you can install the Visual Studio Code (VS Code) editor as a desktop application. The VS Code desktop application is more powerful than the Visual Studio Code for the Web online editor.
Google Chrome
For web programming, it is important to use a browser that has a good set of tools to help you track down errors and write JavaScript code. The best browser for this in my opinion is Google Chrome (or Chromium if on Linux). The lessons will assume that if you are doing things outside of CodeSandbox, you are using Chrome or Chromium as your browser. Here is the link to download Google Chrome. Double-clicking on the installer file (ChromeSetup.exe) and accepting all the defaults is fine for the installation.
Visual Studio Code
Visual Studio Code (VS Code) is a very good editor for programming and is widely used by professional programmers. Luckily, it is free to download and use. Here is the link to get the installer for VS Code. Select the download for Windows 10,11.
Look in your Downloads folder and double click on the VSCodeUserSetup0x64-1.103.2.exe file that you just downloaded. Note that the numbers after x64 could be different as this was the file that I downloaded on 9/7/25. Check the I accept the agreement and click Next. Keep clicking Next until you see the window showing Select Additional Tasks. Check the box Create a desktop icon. Then, click Next.
Then, click Install. This will install VS Code for your user account. This is why we wanted the Desktop icon as that will make it easier to launch VS Code. When the installation is done, you can click on Finish and this will start up VS Code.
Here is a screen shot showing the Desktop icons for Google Chrome, Microsoft Edge and VS Code:
The next screen shot shows VS Code opened. I have selected the Choose your theme button and am about to selec the Light Modern theme.
After choosing the Light Modern theme, this is what VS Code looks like on my desktop:
This is easier to see in screen shots, and works better for my eyes. But, the theme is your preference, so choose what works for you.
Node.js and npm
Node.js and the Node package manager (npm) are essential tools for learning about web programming. This will be especially true when we eventually get to creating connections to a backend database for a more complex web application. Go to the following site, Node.js download and click on the button labeled Windows Installer (.msi). You need to scroll down past the top section that gets Node.js using Docker and npm.
This installer (msi file) needs to be installed with administrator privileges. But, this will make Node.js and npm available for all users in any folder. When the file (node-v24.7.0-x64.msi) is finished downloading, go to your Downloads folder and double-click on it. Click Next, accept the agreement and click Next. The default location to install will be C:\Program Files\nodejs\. This is fine, so click Next. Click Next again to accept the default features. Check the box Automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the installation completes. After checking that box, click Next. Finally, click Install. You will be prompted to enter the administrator password and you must select Yes. Click Finish. Then, the box to install Chocolatey, Python and VS build tools will pop up. Press any key to continue.
Press any key to continue a second time. You will again be prompted to enter the adminisstrator password and click Yes. This will install Chocolatey, then Python. To test that Node.js and npm are installed, we need to open a command prompt. In the Search box next to the Windows start button, type CMD. This should bring up Command Prompt. Right-click on this and when the menu pops up, select Pin to taskbar.
After pinning the command prompt to the taskbar, you should see this:
If you click on the command prompt icon in the taskbar, the command prompt will pop up. I changed the appearance of my command prompt by right-clicking in the title bar of the command prompt and selecting Settings. Once the Settings tab opened, I clicked on the Defaults profile, then clicked on Appearance in Additional settings.
Then, I changed the Color scheme to One Half Light and the Font size to 16.
Now, I can check to make sure that Node.js and npm are installed. Here is how I check in the command prompt:
As you can see Node.js version 24.7.0 and npm version 11.5.1 were installed.
We will install some Node packages later on, when it is needed for a lesson. But for now, this is the main setup for learning web programming using Windows 11 with administrative privileges.
Learning basic web programming on Windows 11 - Option 2 (no admin rights)
Suppose that you don’t have administrative privileges, but only have a regular account on a Windows 11 machine. Let’s install the important software in that situation
Google Chrome
When you don’t have admin privileges, you download Google Chrome, the same way, but you install it differently. Start by going to this site Chrome and click on the Download Chrome button. If you wait the file ChromeSetup.exe will be downloaded to your Downloads folder. Double-click on this file but when the User Account Control (UAC) dialog pops up asking to allow modifying your computer, select No.
The installer will proceed to install Google Chrome as a regular user. It will download files from the Internet and install inside a hidden folder called AppData inside the user’s folder. The user’s folder can be found at C:\Users\<username> where <username> is the username of that user. In completing the installation, the installer will create an icon on the Desktop so that you can launch it by double-clicking on that icon.
VS Code
Visual Studio Code (VS Code) is straightforward to install without admin privileges. Start by going to this site: Download Visual Studio Code. Click on the button Windows Windows 10,11 that is the first button for Windows on that page. This will download the installer file VSCodeUserSetup-x64-1.103.2.exe. The actual version (1.103.2) could be different as you may get an updated version.
If you are logged in as a regular user, the VS Code installer will just install to the hidden AppData folder inside your home directory. So, for example, if your username is student, this folder will be C:\Users\student\AppData. The installer sets up the PATH environment variable so that you can run VS Code without any issues.
Next to the Start button, use the Search to enter VS. The Visual Studio Code app will be displayed as the best match. Click on the drop-down list for this app to display a menu that allows pinning this app to your taskbar.
On that drop-down list, click on Pin to taskbar.
If you click on that, VS Code will show up in your taskbar so it can easily be launched. I opened VS Code by clicking on this and I changed my theme to Light Modern:
Node.js and npm
Start by going to the site: Node.js Download Node.js. Scroll down until you see the Standalone Binary(.zip) link, and click on that.
This will download a .zip file that has the executable file that can run Node.js. Right-click on this file in your Downloads folder and select Extract All. This will create a folder inside a folder. Here is a partial screen shot in Windows Explorer showing the important file structure:
This would means the path to the folder that we want to use would be:
C:\Users\student\Downloads\node-v22.19.0-win-x64\node-v22.19.0-win-x64
That is a long path, so let’s move that folder to the student folder. Using Windows Explorer, just drag the folder that was highlighted in the last screen shot to the student folder. Here is what this would look like:
Note that you can see the contents in that folder including files like node.exe. Now the path for the folder location would be:
C:\Users\student\node-v22.19.0-win-x64
This will make it easier to adjust the environment variables to include this folder in the PATH. We start by going to the Search next to the Start button and typing 'environ'. This will bring up the best match of Edit the system environment variables. Click on the Open link.
This will cause the User Account Control (UAC) box, to which you reply No. The reason why the UAC box pops up, is that there are two sets of environment variables. The system environment variables affects all users of the computer. The other set, the user environment variables only affect the logged in user. That’s what we want to adjust, as we can edit the system environment variables without admin privileges. In the next screen shot, you can see the User variables for student with Path selected. You click the Edit button to modify the Path.
Note the System variables below the user variables. You can’t edit those without admin privileges. After you click on the Edit button for the Path variable, you will see the following dialog box pop up.
Click on the Browse button so that you can browse for the student\node-v22.19.0-win-x64 folder. When you find this folder and click OK, you will see that folder added to the path. Click OK to save the changes to the Path.
Click OK again to exit the Environmental Variables dialog box. To test this out, we need to go to the command prompt. Let’s review how to add the command prompt to the taskbar. Go to the Search on the side of the Start button and type 'CMD'. When the best match shows up, select Pin to taskbar.
Now that the command prompt is on the taskbar, click on it. I modified the Settings by right-clicking on the title bar of the command prompt dialog and selected Settings. Then, I click on the Defaults profile and under Additional settings, I click on Appearance.
I modified the Appearance by changing to the One Half Light color scheme, and increasing the Font size to 16. Then, I clicked the Save button.
The following shows a screen shot of the command prompt after the changes in appearance were made. In addition, the command prompt shows that node and npm are available.
Okay, those are the main things to set up for a Windows 11 computer without admin privileges.
Using MacOS
Brave browser
No versions of Chrome or Chromium work on this old of an operating system. So, I got the Brave Browser version 1.69.168 (which is based on Chromium 128.0.6613.138). I obtained it here https://github.com/brave/brave-browser/releases/download/v1.69.168/Brave-Browser-universal.dmg.
After downloading this .dmg file, I double-clicked on it and this window pops up.
If you had admin privileges, you would just drag the Brave Browser app into the system Applications folder. But, if you don’t have admin privileges, create a folder called Applications inside your home folder. Then, go back to where the Brave Browser is waiting to be dragged into the system Applications folder and right-click (Command+click) on the Brave Browser app icon. Select the option Copy "Brave Browser".
Then, open up Finder. In the Finder menu on the top go to Go ⇒ Home. Then, paste that item into your Applications folder.
Open your Applications folder and double-click on the Brave browser icon. You will be asked if you are sure you want to open this Keep in Dock. Now you have access to a better browser for learning web programming than the Safari browser.
VS Code
Just as with the browser, I had to get an older version of VS Code. So, I got version VS Code version 1.85 from this site: Visual Studio Code - January 2025 (version 1.97). When you go to this site, you need to select the Mac: Universal link as shown in the screen shot below:
Clicking on that link will download a .zip file that when expanded will contain the Visual Studio Code app. Copy this app and paste it into your Applications folder. Once inside your Applications folder, double-click on it, and Open the file when it asks if you are sure you want to run it. Once VS Code opens, right-click on it in the dock, select Options ⇒ Keep in Dock. Then, you can run VS Code from the Dock from this point on.
Node.js and npm
To install Node.js and npm without admin privileges, you can use the Node Version Manager (nvm). We will need to use a Terminal to do this. So, the first step is to make the Terminal application available. Open the system Applications folder and scroll down to open the Utilities folder.
In the Utilities folder, scroll down until you can see Terminal. Double-click on Terminal to open it.
When Terminal opens, right-click on its icon in the Dock, select Options ⇒ Keep in Dock. Now, you can launch terminal anytime from the Dock.
I opened a Terminal and went to the top menu to select Preferences
I edited Profiles ⇒ Basic Default ⇒ Font to increase the font size.
This brings up the Fonts dialog, where you can change the font size. I changed my font size to 18.
So, now my Terminal looks like this:
Now, let’s use curl to get nvm installed. If you search for nvm github, you will find the following site: nvm-sh/nvm. If you scroll down on that page, you will see a curl script to install nvm. Here is the command:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
If you run this, you will get a message saying to run the following:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
But, if you want nvm to always be available, you should add these lines to the ~/.zshrc file. This file may not exist, but you can create it. Follow these commands:
% nano ~/.zshrc
Then, enter the following lines in the nano editor:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
Type CTRL+O and hit Enter to save the file. Then, type CTRL+X to exit nano. Close your Terminal and open another Terminal. You will get a warning that looks like this:
zsh compinit: insecure directories and files, run compaudit for list.
Ignore insecure directories and files and continue [y] or abort compinit [n]?
Type a 'y' for now. Then see if you can run nvm
% nvm -v
0.40.3
If you see a version like shown above you can run nvm. Now, to get rid of that warning, you need to make the following changes to ~/.zshrc.
$ nano ~/.zshrc
In nano, add the following lines:
autoload -Uz compinit
if [ "$(whoami)" = "student" ]; then
compinit -u
else
compinit
fi
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
The new lines are 1-6. These lines are added to run compinit -u if the username is "student" which is my username. You would substitute your username for "student". Hit CTRL+O and Enter to save the changes, then CTRL+X to exit. Close the Terminal and start a new Terminal. The warning should be gone now.
Using nvm to install Node.js and npm
Run these commands to install Node.js and npm using nvm.
% cd ~
% nvm install --lts
Installing latest LTS version.
Downloading and installing node v22.19.0...
Downloading https://nodejs.org/dist/v22.19.0/node-v22.19.0-darwin-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v22.19.0 (npm v10.9.3)
Creating default alias: default -> lts/* (-> v22.19.0)
Then, you can check to see that Node.js and npm are installed.
% node -v
v22.19.0
% npm -v
10.9.3
That’s all we need to get started on learning basics of web programming on a Mac without having admin privileges. We will install various Node.js packages when we need them for some of the lessons.