How to Use VS Code for Beginners

Visual Studio Code, usually called VS Code, is a free code editor. It gives you one workspace for writing code, organizing project files, searching, running terminal commands, installing extensions, tracking changes, and debugging problems.

VS Code is not a programming language. You can use it while learning HTML, CSS, JavaScript, Python, and many other technologies.

Download VS Code from the official Visual Studio Code website. The website normally recommends the correct installer for your operating system.

On a Mac, open the downloaded file and move Visual Studio Code into the Applications folder if prompted. On Windows, run the installer and follow its setup steps. Then open VS Code normally from Applications, Launchpad, or the Start menu.

You do not need to memorize every button. Start with these areas:

• Activity Bar: The vertical row of icons on the left.
• Explorer: Displays the folders and files in your current project.
• Editor: The main area where your files open.
• Tabs: Let you move between open files.
• Status Bar: Shows information about the current file and workspace.
• Panel: Holds the terminal, problems, output, and debugging information.

The Activity Bar also gives you access to Search, Source Control, Run and Debug, and Extensions.

One of the most important beginner habits is opening the complete project folder in VS Code. The folder becomes the workspace, so VS Code can understand how all of its files belong together.

Create a folder named My First Project, then choose File → Open Folder in VS Code and select it. If VS Code asks whether you trust the authors, you can trust a folder that you created yourself.

The project name should now appear at the top of the Explorer.

Use the New File button in the Explorer to create these three files:

My First Project/
├── index.html
├── style.css
└── app.js

• index.html contains the structure and content of the page.
• style.css controls how the page looks.
• app.js contains the JavaScript behavior.

This same three-file structure is used by many beginner projects on 100 JS Projects.

Open the Extensions view, search for Live Server, and install the extension. Then open index.html, right-click inside the editor, and choose Open with Live Server.

Your page opens in the browser using a local address. After editing and saving a file, Live Server refreshes the page so you can see the result quickly.

For a comfortable learning setup, place VS Code on one side of the screen and the browser on the other. This makes the relationship between your code and its visible result much easier to understand.

Inside index.html, enter an exclamation mark and press Tab. VS Code uses Emmet to create a basic HTML document. You can then add a heading, paragraph, and button inside the body:

<h1>My First Project</h1>
<p>I am learning VS Code.</p>
<button>Click Me</button>

Connect the CSS file inside the document's head:

<link rel="stylesheet" href="style.css" />

As you work, VS Code suggests HTML elements, CSS properties, filenames, and other completions. This assistance is commonly called IntelliSense.

Formatting keeps spacing and indentation consistent without changing what the code does. Install the Prettier - Code formatter extension, open the Command Palette, and run Format Document.

To format files automatically:

1. Open Settings.
2. Search for Format On Save.
3. Enable the setting.
4. Select Prettier as the default formatter if VS Code asks you to choose one.

Now saving a supported file can clean up its formatting automatically.

Choose Terminal → New Terminal to open a command line inside VS Code. When you have opened a project folder correctly, the terminal normally starts in that same folder.

On macOS, you can confirm the current folder and list its files with:

pwd
ls

On Windows, the comparable commands are cd and dir.

You do not need to memorize many terminal commands at the beginning. The important idea is that tutorials and development tools often use this panel to install packages, start applications, and display messages.

You only need to remember the shortcuts you use regularly. Command Palette is especially valuable because it lets you search for actions whose shortcuts you have forgotten.

The Source Control panel works with Git to show which files changed. Git can also help you save meaningful checkpoints and synchronize projects with GitHub. You do not need to understand branching or advanced Git workflows before using VS Code for your first project.

Debugging helps you discover why code is not behaving as expected. A breakpoint is a marker beside a line of code where a debugger can pause. When your projects become more complex, pausing lets you inspect values and follow the program one step at a time instead of guessing.

For now, remember the distinction:

• Source Control helps track changes.
• Debugging helps investigate problems.

Use the Command Palette to search for Color Theme and choose a theme that is easy for you to read. You can also adjust the editor font size in Settings and enable Auto Save if you prefer it.

Avoid installing a large collection of extensions immediately. Start with the tools you genuinely need, such as Live Server and Prettier, then add language-specific extensions when a project requires them.

Keep every project in its own folder. A clean folder structure makes the Explorer, terminal, Live Server, and Source Control much easier to understand.

Live Server does not appear

Confirm that the Live Server extension is installed and enabled. Open index.html, then try right-clicking inside the editor again.

The CSS does not change the page

Check that the filename in the href matches your actual CSS filename exactly. Also confirm that the link element is inside the HTML document's head.

The terminal opens in the wrong folder

Close the current workspace and use File → Open Folder to open the complete project. Then create a new terminal.

Format On Save does nothing

Make sure Prettier is installed, Format On Save is enabled, and Prettier is selected as the default formatter for the file type.

You do not need to master every VS Code feature before you start coding. Build a few small projects and let the editor become familiar through repetition.

If your goal is web development, begin with HTML and CSS, then add JavaScript. When you are ready, choose your first beginner project from the 100 JavaScript Projects collection, create the required files in a new folder, and run index.html with Live Server.

VS Code is your workspace. The real skill develops as you repeatedly open a folder, build something, test it, fix small mistakes, and improve it.