What is an IDE & VS Code?

Your workshop has separate tools

A code editor is where you write files. A runtime executes programs. A version-control tool records checkpoints. VS Code is a code editor with IDE-style features; Node runs JavaScript tools outside the browser; Git tracks project history. Installing one does not automatically install all three.

An IDE means Integrated Development Environment: editing, running and debugging tools together. VS Code gains much of its support through built-in features and extensions. Syntax highlighting colours tokens; autocomplete offers suggestions; neither proves your code is correct. You still need to save, run, inspect and test.

Install from the actual publisher

Use code.visualstudio.com for VS Code and your machine-setup activity for Node LTS and Git. Choose the installer for your operating system. Avoid lookalike download sites and unnecessary extensions. After installation, reopen VS Code so its terminal sees updated PATH entries.

PATH is a list of locations searched to find a command such as node or git. A command-not-found message can mean the program is not installed or the current terminal cannot find it. Restarting the terminal is a first check, not proof every installation problem is solved.

Orient yourself in the editor

1. Use File → Open Folder and choose your practice/studio folder. Opening a single file is not the same as opening the project folder.
2. In Explorer, confirm the folder name at the top. The file tree should belong to that project, not your entire home directory.
3. Create notes.md using the New File control. Enter a short sentence and save with Ctrl+S on Windows or Cmd+S on Mac.
4. Close and reopen the file. Confirm the saved sentence remains. An unsaved-tab marker means disk and editor may differ.
5. Open Terminal → New Terminal. Confirm the location with Get-Location on PowerShell or pwd on Mac; do not assume it matches the project just because the file is open.

Explorer manages files; the editor shows a file's contents; the terminal runs commands; Problems reports diagnostics supplied by language tools. A preview/browser shows what your product does. Learn which area supplied an error so you investigate the right layer.

Make a tiny edit and inspect the result

In a disposable HTML practice file, type a heading and observe colouring/autocomplete. Save it and open the file in a browser. Change the heading and refresh after saving. If the browser doesn't change, check file location and saving before installing another extension.

A formatter can make spacing consistent but does not fix incorrect behaviour. An extension can read or modify workspace files depending on its permissions. Choose a known publisher and install only support you actually need; a long extension list is not a more capable learner.

Verify the other tools separately

In the integrated terminal, run these separately:

node -v
npm -v
git --version

Read the actual results. A version response confirms that command is available; it does not create a project or a Git repository. If a command is missing, return to its installation step and restart the editor/terminal as needed. Do not paste fixed example version numbers as your own evidence.

Prepare for your machine activity

Show the correct folder in Explorer, a file that is saved on disk, an integrated terminal in the intended folder and your own tool-version output. Explain which tool edits, which runs and which records history. If you can locate those three jobs, the next lessons' commands will have a place and purpose instead of being unexplained text to copy.