Skip to content

Introduction

This guide walks you through the essentials of writing HTML using Visual Studio Code (VS Code) a free code editor used by beginners and professionals. HTML is the foundation of every webpage on the internet; it is the language that tells a browser what to display and how to structure it.

As a Term 1 CST student, this guide is a practical starting point for your web development course. Starting from scratch, you will set up the same coding environment used by professional developers, write your first webpage, and back up your work to GitHub.

Is This Guide For You?

This guide is written for Term 1 CST students at BCIT who are new to web development. You are the right reader if you:

  • Are currently enrolled in the CST program and encountering HTML for the first time
  • Have never used VS Code before

If you are already familiar with HTML and VS Code from prior experience, this guide may cover material you already know.

By the End of This Guide, You Will Be Able To

  1. Download and set up VS Code
  2. Create a basic webpage using essential HTML tags
  3. Preview your webpage live in a browser as you write it using VS Code's Live Preview extension

Prerequisites

To follow these instructions, you will need:

  • A computer with Windows 10 or Windows 11
  • Google Chrome (Most consistent browser for Live Server)

Typographical Conventions

Format Meaning
Bold Actions The User Interacts With The UI (e.g., buttons, menus, labels)
[Code] Actions The User Types (e.g., <h1>, index.html)
Link Clickable links to other sections or resources

Admonitions

This guide uses success, warning, and note messages to provide additional information for instruction steps.

Success

Success provides information about the success outcome of instructions. It appears in a green box with a checkmark icon next to a context label.

Warning

Warning provides information about instructions that can cause errors. It appears in an orange box with a warning icon next to a context label.

Tip

Tips provides additional quality of life about a step. It appears in a turquoise box with a fire icon next to a context label.

Note

Notes provides additional information for a step. It appears in a blue box with a pen icon next to a context label.