Development

We have two options for setting up a development environment for web development:

1. VSCode
2. GitHub Codespaces

These options are not mutually exclusive, and you can use both in conjunction with each other. VSCode is a powerful code editor that can be used to write code, while GitHub Codespaces is a cloud-based development environment that can be used to run code. They both have the same capabailities however VSCode runs locally on your computer while GitHub Codespaces runs on the cloud.

---

VSCode

Section titled VSCode

To setup a development environment for web development, we will be using Visual Studio Code (VSCode) as our code editor.

Creating a project in VSCode

Section titled Creating a project in VSCode

To create a new project in VSCode, it’s easiest to create a new folder outside of VSCode. Ideally you’ll want a folder that holds all your projects called something like “projects”, with each project having an individual folder inside this.

Once you have a new empty folder for your project, you can right click inside, and “Open with Visual Studio Code”

This will open a blank project from inside that folder, any files you create and save will be saved inside this folder.

And you’ve created a new project!

Adding new files in VSCode

Section titled Adding new files in VSCode

You can add new folders and files to your project by right-clicking in the file browser and clicking either add file or add folder.

The file browser can be found in the left side navigation menu by click the two overlapped pieces of paper.

When creating a new file, make sure to end the filename with the type of file you want. For example, a python script must end with “.py” or a text file with “.txt”

Don’t worry if creating a python script doesn’t work right now, we’ll be setting up Python in the Python page.

The Terminal

Section titled The Terminal

The Terminal can be found at the bottom of VSCode, and allows you to input commands to do things like install packages, or run scripts.

If you’re asked to input a command into the terminal, navigate to the tab, click in the window, type your command, and hit enter.

If you encounter any problems with the terminal instance, or it gets stuck in any kind of loop, you can kill the process using the icon on the right.

Then, you can create a new terminal instance using the top menu bar.