website-building-visual-studio-code-setup

Website Building · Lesson 2 of 8

Set Up Visual Studio Code

Install and organise Visual Studio Code, create a dependable website project folder and preview your first saved page.

Complete beginner
60 minutes
Guided practical activity
Part of one website project

Course progressLesson 2 of 8Lesson 2 of 8

Lesson outcomes

By the end of this lesson, you can…

Install Visual Studio Code from the official source.
Organise index.html, styles.css and an images folder.
Use Explorer, editor tabs and Save confidently.
Open the saved page in a browser and recognise a file-path problem.

Prepare

Before you begin

What you need

A Windows or Mac computer with permission to install applications.
A modern browser and reliable internet connection.
The page plan created in Lesson 1.

Starter check

Create a folder named website-building-project inside Documents. Avoid Downloads because temporary files are easily misplaced.

Learn

Understand and demonstrate the skill

A website project is a normal folder containing connected files. Visual Studio Code helps you see that structure, edit the files and spot mistakes without hiding how the website works.

Key terms

Project folder

The main folder containing every file and subfolder for one website.

File extension

The ending that identifies a file type, such as .html, .css, .jpg or .webp.

Explorer

The Visual Studio Code panel used to create, rename and organise project files.

Relative path

A route from the current file to another project file based on their folder relationship.

Lesson 2 demonstration mediaAdd a current screenshot or short demonstration video before final publication when available.

Follow the demonstration

Install the editor. Use the official download and the recommended user-level installer when appropriate.
Open the project folder. Choose File → Open Folder and select website-building-project.
Create the core structure. Add index.html, styles.css and a folder called images.
Add and save starter HTML. Enter the example, use Save and confirm the tab no longer shows an unsaved marker.
Preview in a browser. Open index.html and check that the heading appears.

Worked example

<!doctype html>
<html lang="en-NZ">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Website</title>
</head>
<body>
  <h1>My First Website</h1>
  <p>The project is working.</p>
</body>
</html>

Your turn

Complete the guided activity

Create the project structure yourself, type the starter document and prove that the saved file opens in your browser.

Prepare. Visual Studio Code is installed from a trusted source.
Build. The complete project folder is open in Explorer.
Check. The starter HTML is saved without an unsaved marker.
Record. index.html opens successfully in a browser.

Activity checklist

Visual Studio Code is installed from a trusted source.The complete project folder is open in Explorer.index.html, styles.css and images are named correctly.The starter HTML is saved without an unsaved marker.index.html opens successfully in a browser.

0 of 5 tasks

0 of 5 tasks complete0%

Knowledge check

Check your understanding

Answer all three questions, then review any topic that needs another look.

Complete all three questions, then check your answers.

Complete the lesson

Review, reflect and continue

Success criteria

The correct project folder opens in Explorer.
The core filenames and extensions are correct.
The saved HTML page displays in a browser.

Reflection prompt

Which folder habit will help you avoid lost files, and which Visual Studio Code area will you use most often?

Continue to Lesson 3