Resources

Using Visual Studio Code

Open and edit project files, preview your pages, use Chat to work with code, and arrange your editor windows.

Open your project’s site folder in VS Code first. If you have not set up the editor yet, follow Set up Visual Studio Code in step 1.1.

Open and edit a file

In the Explorer panel on the left, expand folders such as css or images by clicking their names or arrows.
Click a file, such as index.html or css/styles.css, to open it in the editor. If Explorer is hidden, choose View > Explorer.
Click where you want to make a change and type. The file name appears on a tab above the editor; a dot on the tab means there are unsaved changes.
Save with Cmd + S on Mac or Ctrl + S on Windows. Save before checking the page in your browser.

Open the HTML file you want to preview, such as index.html.
Integrated Browser: right-click the file in Explorer and choose Open with Integrated Browser. The page opens in a tab inside VS Code, so you can see it beside your code.
External browser: right-click the file in Explorer, choose Reveal in Finder (Mac) or Reveal in File Explorer (Windows), and double-click it. Use an external browser when you need Chrome DevTools.
After you save a change, refresh the preview to see it.

VS Code Chat can explain code and suggest or make edits. Chat features may require the GitHub Copilot Chat extension and signing in.

Open the HTML or CSS file you want to change. Select the relevant code if you want Chat to focus on a specific part.
Open Chat from the Activity Bar, or choose it from the View menu. If Chat is not available, install or enable GitHub Copilot Chat and sign in.
Ask for one specific change and name the file and section. For example: “In styles.css, make the topic cards stack on small screens. Keep the desktop layout unchanged, and explain the change.”
Read the proposed changes carefully. Review the file and any diff, then choose the option to keep/apply the changes or discard them. Chat suggestions can be wrong, so check the result yourself.
Save the edited file and check it in the browser. If the result is not right, ask Chat to adjust the code or undo your change.

Show or hide Explorer: choose View > Explorer, or click the Explorer icon in the Activity Bar.
Open two files side by side: right-click a file tab and choose Split Right, or drag the tab to the right side of the editor. Click a tab in each editor group to switch files.
Change the editor arrangement: choose View > Editor Layout and select a layout, such as side by side or stacked.
Show or hide the bottom panel: choose View > Terminal to open it, or close the panel with its close button. The panel can hold the terminal, problems, and output.

Quick tips: common problems

File not listed? Make sure you opened the project’s site folder with File > Open Folder, not just one file.
Browser still shows the old page? Save first, then refresh the Integrated Browser or external browser. Confirm you are viewing the right HTML file.
CSS change has no effect? Check that the HTML links to the correct CSS path, that you edited the CSS file used by that page, and that the selector matches the element.
Chat changed the wrong thing? Name the exact file and goal in your prompt, select the relevant code, and inspect the proposed diff before keeping it.
Editor feels crowded? Close extra tabs, hide panels you are not using, or choose a different layout under View > Editor Layout.