Set up VS Code and your school workspace

Outcome

You will install Visual Studio Code, create a predictable place for your school files, and open your Level 1 folder as a VS Code workspace.

Why this matters

Web projects contain several related files. A stable folder structure helps you find the correct project, share it, back it up, and open it in development tools.

What you will practice

Install and start Visual Studio Code on Windows.
Create and recognize the course folder structure.
Open a folder as a single-folder workspace in VS Code.

What is new and what is reused

New: Visual Studio Code, project folders, and the VS Code workspace concept.
Reused: Basic Windows actions such as downloading a file and creating a folder. Ask for help if these actions are also new to you.

Starting point

Before you start

A Windows 10 or Windows 11 computer.
An internet connection.
Access to your Documents folder.
Permission to install software for your Windows account.

Current state: VS Code might not be installed, and your web-development course files might not have a permanent location yet.
First action: Open the Windows Start menu and search for Visual Studio Code.
First checkpoint: VS Code opens and shows a window.
Help trigger: Ask your teacher for help if Windows requests an administrator password, blocks the installer, or shows different options from this lesson.

Required result

VS Code opens on your computer.
The folder Documents/AspIT/web-development/level-1 contains exercises, projects, and resources.
VS Code shows level-1 as the open workspace folder.
You can point to the workspace folder in the VS Code Explorer.

Install Visual Studio Code

First, check whether VS Code is already installed.

Open the Windows Start menu.
Type Visual Studio Code.
If Visual Studio Code appears, open it and continue to Check the installation below.
If it does not appear, open the official VS Code download page.
Download User Installer for Windows. Choose the version that matches your computer. Most current Windows computers use x64.
Open the downloaded file. Its name starts with VSCodeUserSetup and ends with .exe.
Read and follow the installer steps. Keep the default installation location unless your teacher gives you a different location.
When the installation finishes, start Visual Studio Code.

The User Installer installs VS Code for your Windows account and normally does not require administrator permission. Use another installer type only when your teacher or IT support asks you to.

Check the installation

Close VS Code. Open the Windows Start menu, search for Visual Studio Code, and open it again. The application should start without opening the installer.

If it does not work

If the downloaded file does not open, check that its name ends with .exe and that it came from code.visualstudio.com.
If Windows asks for an administrator password, stop and ask your teacher or IT support. Do not use another person’s password.
If VS Code opens but looks different from the screenshot, continue when you can still find the File menu. Interface details can change between versions.

Checkpoint: VS Code opens

What now works: Visual Studio Code starts from the Windows Start menu.
What remains: Your course folders still need a stable location, and VS Code does not yet have a folder open.
Next action: Open Windows File Explorer and select Documents.
If it does not work: If VS Code starts the installer again, close it and search for Visual Studio Code from the Windows Start menu.

Create your school folder structure

Use one top-level AspIT folder for schoolwork. Inside it, use one folder for each subject. The web-development folder contains one folder for each course level.

Create this structure in your Windows Documents folder:

DirectoryDocuments/
- DirectoryAspIT/
  - Directoryweb-development/
    Directorylevel-1/
    Directoryexercises/
    …
    Directoryprojects/
    …
    Directoryresources/
    …

The three Level 1 folders have separate jobs:

Folder	Put this content here
`exercises`	Short practice work and small lesson tasks
`projects`	Larger projects with several related files
`resources`	Course downloads, reference files, and material that is not part of one project

Open File Explorer.
Open Documents.
Create a folder named AspIT.
Open AspIT, then create a folder named web-development.
Open web-development, then create a folder named level-1.
Open level-1, then create the folders exercises, projects, and resources.

Screenshot placeholder

Completed school folder structure in File Explorer

Show: Windows File Explorer open at Documents/AspIT/web-development/level-1. Crop to the address bar and file list.
Highlight: The address bar path and the three folders: exercises, projects, and resources.
Action supported: Compare the student's current location and folder names with the required structure.
Expected result: The address bar ends in level-1, and all three required folders appear in the file list.
Future caption: The Level 1 folder contains separate locations for exercises, projects, and course resources.
Future alt text: Windows File Explorer at the level-1 folder, showing exercises, projects, and resources.

Use a current interface screenshot. Crop to the relevant area and use one restrained outline or numbered marker. Keep the fixed screenshot surface legible in both site themes.

Check the folder structure

Read the File Explorer address bar from left to right. It should end with:

Documents > AspIT > web-development > level-1

The file list should show exercises, projects, and resources.

If it does not work

If a folder is in the wrong location, move it into the correct parent folder before you continue.
If a name differs, select the folder, press F2, and enter the required name.
If Windows hides part of the address, select the address bar to see the full path.

Checkpoint: The course folders exist

What now works: Documents/AspIT/web-development/level-1 contains exercises, projects, and resources.
Files changed: Documents/AspIT/web-development/level-1/
What remains: Open the Level 1 folder in VS Code and identify the workspace root.
Next action: Return to VS Code and open the File menu.
If it does not work: Use the File Explorer address bar to confirm each parent folder before you rename or move anything.

Open the Level 1 workspace folder

A VS Code workspace is the folder, or set of folders, open in one VS Code window. For now, you will use a single-folder workspace. Opening the folder is enough; you do not need to create a .code-workspace file.

Open VS Code.
Select File > Open Folder….
Go to Documents/AspIT/web-development.
Select the level-1 folder.
Select Select Folder.
If VS Code asks whether you trust the authors, check that you selected the folder you created. Then select Yes, I trust the authors.

VS Code should now show LEVEL-1 at the top of its Explorer. Expand the folder to see exercises, projects, and resources.

Screenshot placeholder

Identify the workspace root in the VS Code Explorer

Show: The VS Code Explorer after level-1 has been opened. Crop to the Activity Bar and Explorer.
Highlight: The Explorer icon, the LEVEL-1 workspace root, and the three child folders. Use numbered markers in reading order.
Action supported: Confirm which folder is the workspace root and inspect its immediate contents.
Expected result: LEVEL-1 appears as the root, with exercises, projects, and resources below it.
Future caption: The first folder in the Explorer is the root of the current workspace.
Future alt text: VS Code Explorer with LEVEL-1 as the workspace root and three folders below it.

Use a current interface screenshot. Crop to the relevant area and use one restrained outline or numbered marker. Keep the fixed screenshot surface legible in both site themes.

Check the workspace

If the Explorer is hidden, select the Explorer icon on the left or press Ctrl + Shift + E.

The top folder in the Explorer should be LEVEL-1. The folders below it should be exercises, projects, and resources.

If it does not work

If the Explorer says NO FOLDER OPENED, repeat File > Open Folder… and select level-1.
If the top folder is ASPIT or WEB-DEVELOPMENT, you opened a parent folder. Repeat the steps and select level-1.
If the top folder is EXERCISES, you opened a child folder. This is safe, but open level-1 for the final check in this lesson.

Checkpoint: The Level 1 workspace is open

What now works: VS Code shows LEVEL-1 as the workspace root and lists the three course folders.
Files changed: Documents/AspIT/web-development/level-1/
What remains: Complete the final self-check, then practice the same process with one project folder.
Next action: Compare the VS Code Explorer with the self-check below.
If it does not work: If the wrong folder is at the top of the Explorer, use File > Open Folder and select level-1.

Self-check

Complete these checks against the required result.

Close VS Code, open it from the Windows Start menu, and confirm that the application starts.
Open Documents/AspIT/web-development/level-1 in File Explorer and confirm that it contains exercises, projects, and resources.
Use File > Open Folder in VS Code and select level-1.
Confirm that LEVEL-1 appears at the top of the VS Code Explorer.
Point to the workspace root and explain that it is the folder currently open in VS Code.

Explanation

Windows File Explorer manages folders on your computer. VS Code displays the same folders in its Explorer, but VS Code also treats the open folder as a workspace. The workspace gives tools, settings, searches, and later commands a clear project boundary.

In this lesson, you opened the whole level-1 folder to inspect the course structure. During development work, open the specific project folder you are working on. This keeps searches, terminal commands, and project settings inside the correct project.

The official VS Code workspace guide has more detail about single-folder and multi-root workspaces.

Optional extension: choose a color theme

The required lesson is complete before this section. A color theme changes the editor colors but does not change your project files.

In VS Code, select File > Preferences > Theme > Color Theme.
Use the arrow keys to preview the built-in themes.
Press Enter to choose a theme that keeps text and the active line clear for you.
If you need stronger contrast, try one of the built-in High Contrast themes.

You can also open the theme picker with Ctrl + K, followed by Ctrl + T. You do not need to install a theme extension for this task.

Next step or safe stopping point

Your setup is complete when VS Code opens and the Level 1 workspace shows the required folders. Continue to Practice: open a project workspace.

If you stop here, reopen Documents/AspIT/web-development/level-1 in VS Code when you return.