Projects and Completion

One-Page Website Project

Learn to build a responsive HTML and CSS page in VS Code and demonstrate core editing skills in this beginner-friendly Visual Studio Code lesson.

Learning outcomes

Explain how to build a responsive HTML and CSS page in VS Code.
Complete the guided activity safely.
Check that you can demonstrate core editing skills.

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.

Open official guidance ↗

Step-by-step instructions

Open the intended practice workspace in Visual Studio Code and confirm its folder name and Workspace Trust state.
Create a fictional local-service landing page.
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 demonstrate core editing skills, 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

Create a fictional local-service landing page. The expected result is to demonstrate core editing skills.

Completion checklist

I used the intended safe practice workspace. I completed, saved and reviewed the activity. I checked errors, paths, browser behaviour and the saved result.