Practice: Open a project workspace

Course

Level 1 · Web Introduction

Module

Getting started

Required-path effort

30–60 minutes

Submission

Show the completed workspace to your teacher

Assignment type

Individual setup check

Estimate assumptions: VS Code is installed and the Level 1 course folder from the lesson exists. Optional extensions are not included.

Outcome

Create a small project folder, open that folder as its own VS Code workspace, and add one text file from the VS Code Explorer.

What you will practice

• Create a project in the correct course folder.
• Open the project folder as the workspace root.
• Create, name, edit, and save a file in VS Code.

What is new and what is reused

• New: Creating a file from the VS Code Explorer and saving an edit.
• Reused: The course folder structure and File > Open Folder… from the setup lesson.

Starting point

Before you start

• VS Code is installed.
• Documents/AspIT/web-development/level-1/exercises exists.
• The setup lesson self-check is complete.

Current state

The course folders exist, but the workspace-check project and its file do not exist yet.

First action

In Windows File Explorer, open Documents/AspIT/web-development/level-1/exercises.

First checkpoint

A folder named workspace-check exists inside exercises.

Help trigger

Open Assistance 1 or ask for help if you cannot find the exercises folder or if VS Code shows a different workspace root.

Requirements

The required assignment is complete when every applicable criterion below is met.

Required result

• The folder exercises/workspace-check exists.
• The workspace-check folder contains a saved file named setup-complete.txt.
• VS Code shows WORKSPACE-CHECK as the workspace root.
• The text file contains the three required lines.

Technical constraints

• Create setup-complete.txt from the VS Code Explorer so you practice working inside the current workspace.
• Use the exact folder and file names shown in the task.

Out of scope

• You do not need to write HTML, install extensions, or change VS Code settings.
• You do not need to complete an optional extension.

Create and open the project folder

1. In Windows File Explorer, open Documents/AspIT/web-development/level-1/exercises.
2. Create a folder named workspace-check.
3. Open VS Code.
4. Select File > Open Folder….
5. Select the new workspace-check folder.
6. If VS Code asks about Workspace Trust, confirm that this is the folder you created. Then trust the folder.

Check

The top folder in the VS Code Explorer should be WORKSPACE-CHECK. No files appear below it yet.

Checkpoint: The project workspace is open

What now works

VS Code shows WORKSPACE-CHECK as the workspace root.

Files changed

Documents/AspIT/web-development/level-1/exercises/workspace-check/

What remains

Create and save setup-complete.txt inside the workspace.

Next action

Select the New File button in the VS Code Explorer.

If it does not work

If another folder appears at the top of the Explorer, use File > Open Folder and select workspace-check.

Create the setup check file

1. In the VS Code Explorer, point to the WORKSPACE-CHECK heading.
2. Select the New File… button.
3. Enter setup-complete.txt and press Enter.
4. Type these three lines:

setup-complete.txt

VS Code opens my project folder.
I can identify the workspace root.
I know where this project is stored on my computer.

5. Press Ctrl + S to save the file.

Your completed project should have this structure:

• Directoryworkspace-check/

  • setup-complete.txt

Check

Close the setup-complete.txt editor tab. Select the file again in the Explorer. The three lines should still appear. If the text is missing, enter it again and press Ctrl + S before closing the tab.

Self-check

Complete these checks against the required result.

1. Confirm that WORKSPACE-CHECK is the top folder in the VS Code Explorer.
2. Confirm that setup-complete.txt appears directly below the workspace root.
3. Close and reopen setup-complete.txt, then confirm that all three lines remain.
4. In Windows File Explorer, locate the project at Documents/AspIT/web-development/level-1/exercises/workspace-check.

Assistance

The required result and steps are visible above. Open the type of support that helps with your current checkpoint.

1Assistance 1 — Find the correct parent folder

Start in Windows File Explorer. Read the address bar from left to right. Stop when it shows Documents > AspIT > web-development > level-1 > exercises. Create workspace-check there.

2Assistance 2 — Check which folder VS Code opened

Look at the first folder name in the VS Code Explorer. It must be WORKSPACE-CHECK. If it is not, select File > Open Folder… and select workspace-check itself rather than exercises or level-1.

3Assistance 3 — Follow the project setup sequence

Use this order: create workspace-check in File Explorer, open workspace-check in VS Code, create setup-complete.txt from the VS Code Explorer, enter the three required lines, save, then reopen the file.

Optional extensions

The required assignment is complete when the project passes the self-check. These extensions do not change the required finish line. Choose any option that gives you useful practice.

1. Choose a color theme: Open File > Preferences > Theme > Color Theme. Preview the built-in themes and choose one that keeps text and the active line clear for you.
2. Practice Open Recent: Close the VS Code window. Start VS Code again and open workspace-check through File > Open Recent.
3. Add a project asset folder: Create an empty assets folder inside workspace-check. Explain what images, fonts, or other project files could go there later.
4. Apply the structure to another subject: Create one subject folder inside Documents/AspIT and give it a clear, stable name. Do not move existing files unless you know where they belong.

Submission

Submission destination: Show the completed workspace to your teacher.

Show your teacher the VS Code Explorer with WORKSPACE-CHECK as the root and setup-complete.txt below it. Open the file so the teacher can see the three saved lines.

Safe stopping point

The required work is complete when the self-check passes and your teacher has seen the result. If you stop before then, leave workspace-check open in VS Code and record the next incomplete self-check item.