A complete website workflow
Organise project files, write HTML, CSS and JavaScript, preview locally, debug carefully and preserve changes with Git.
Setup and Interface
What Is Visual Studio Code?
Learn to understand the editor's role in a web workflow and choose VS Code for an appropriate task in this beginner-friendly Visual Studio Code lesson.
Learning outcomes
- Explain how to understand the editor's role in a web workflow.
- Complete the guided activity safely.
- Check that you can choose VS Code for an appropriate task.
Before you begin
Use a non-sensitive practice folder, inspect unfamiliar code before trusting it, and never place passwords, tokens or private information in project files.
Step-by-step instructions
- Open the intended practice workspace in Visual Studio Code and confirm its folder name and Workspace Trust state.
- Identify editing, terminal, debugging and source-control areas.
- Save the relevant files and review the Problems panel, terminal, Source Control view or browser preview as appropriate.
- Check filenames, relative paths, console messages, keyboard use, mobile layout and privacy before continuing.
- Confirm that you can choose VS Code for an appropriate task, then create a clear commit, backup or saved checkpoint.
Ian's practical tip: Work in one named project folder, preview after small changes, read the actual error message and keep a recoverable version before broad edits.
Practical activity
Identify editing, terminal, debugging and source-control areas. The expected result is to choose VS Code for an appropriate task.