ITIAN Knowledge Hub
Technology Simplified — Solutions That Work

Visualstudio-quick-start

ITIAN Visual Studio Code Academy

Technology Simplified — Solutions That Work

Lesson 1 — Quick Start

Visual Studio Code Quick Start

Set up Visual Studio Code, create your first project folder, write your first HTML page, run it with Live Server, and learn the basic workflow used for building ITIAN website pages.

Academy Home Downloads Resource Library Keyboard Shortcuts Student Dashboard

Lesson Overview

This quick-start lesson is designed for complete beginners. By the end, you will have opened Visual Studio Code, created a basic website file, previewed it in your browser, and understood the basic code-editing workflow.

What You Will Do

  • Open Visual Studio Code.
  • Create a project folder.
  • Create an HTML file.
  • Write your first webpage.
  • Run the page using Live Server.

What You Need

  • A computer with Visual Studio Code installed.
  • A web browser such as Chrome or Edge.
  • The Live Server extension.
  • A folder for your practice files.

Skills You Will Learn

  • File organisation.
  • Basic HTML structure.
  • Saving files correctly.
  • Previewing pages.
  • Fixing common beginner mistakes.

Visual Studio Code Workflow

This is the basic workflow you will use again and again when building ITIAN pages.

Create Folder → Write Code → Save → Preview → Fix → Publish

Create Folder→ Open in VS Code→ Create HTML File→ Save→ Live Server→ Improve

Step-by-Step Instructions

Step 1: Open Visual Studio Code

Open Visual Studio Code from your Start menu, desktop icon, or taskbar.

ITIAN Tip: Pin Visual Studio Code to your taskbar so it is easy to find when working on ITIAN pages.

Step 2: Create a Website Folder

Create a folder somewhere easy to find, such as your Desktop or Documents folder.

Suggested folder name:

itian-practice-site

Inside this folder, you will store your HTML files, CSS files and images.

Step 3: Open the Folder in VS Code

In Visual Studio Code, go to:

File → Open Folder → select itian-practice-site

The folder should appear in the left Explorer panel.

Common mistake: Do not just open a single file. Open the whole folder so VS Code can manage your project properly.

Step 4: Create Your First HTML File

In the Explorer panel, create a new file called:

index.html

The name must be lowercase and should end in .html.

Step 5: Add Your First HTML Code

Copy and paste this starter code into index.html.

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>My First ITIAN Page</title> </head> <body> <h1>My First ITIAN Webpage</h1> <p>This page was created in Visual Studio Code.</p> </body> </html>
ITIAN Tip: HTML uses opening and closing tags. For example, <h1> opens a heading and </h1> closes it.

Step 6: Save the File

Press:

Ctrl + S

This saves your file. Get into the habit of saving often.

Step 7: Format the Code

To realign and tidy the code, press:

Shift + Alt + F

This is the shortcut for Format Document on Windows.

ITIAN Tip: If formatting does not work, install the Prettier extension and set it as your default formatter.

Step 8: Install Live Server

Click the Extensions icon on the left side of VS Code, then search for:

Live Server

Install the extension by Ritwick Dey.

Step 9: Run Your Page

Right-click your index.html file and choose:

Open with Live Server

Your browser should open and display your first webpage.

Step 10: Edit and Refresh

Change the heading text in your HTML file, save it, and watch the browser update.

<h1>Welcome to My ITIAN Practice Page</h1>

This is the basic edit-preview workflow used for website building.

Picture and Video Guide Placeholders

Replace these placeholders with your own screenshots or YouTube tutorials later.

Screenshot 1: VS Code Interface

Add screenshot showing Explorer, editor, tabs and status bar.

Screenshot 2: Extensions Panel

Add screenshot showing Live Server extension search.

Screenshot 3: Open with Live Server

Add screenshot showing right-click menu on index.html.

Video Tutorial Placeholder

Beginner Mistakes to Avoid

Wrong File Name

Use index.html, not index, index.txt or Index.HTML.

Not Opening the Folder

Open the complete project folder, not just one file.

Forgetting to Save

Press Ctrl + S before checking changes in the browser.

Missing Closing Tags

Many HTML problems come from missing closing tags such as </div>.

Broken Image Paths

Images must be stored in the correct folder and linked with the correct file path.

Copying Too Much Too Soon

Start small. Test simple code before building large pages.

Practical Exercise

Complete this activity before moving to the next lesson.

Your First ITIAN Practice Page

  • ✔ Create a folder called itian-practice-site.
  • ✔ Open the folder in Visual Studio Code.
  • ✔ Create index.html.
  • ✔ Add a heading and paragraph.
  • ✔ Save the file.
  • ✔ Format the file using Shift + Alt + F.
  • ✔ Open it with Live Server.
  • ✔ Change the heading and save again.

Knowledge Check

Answer these questions to confirm you understand the quick-start workflow.

What should your first HTML file usually be called?

Answer: index.html

What shortcut saves your file?

Answer: Ctrl + S

What shortcut formats or realigns your code?

Answer: Shift + Alt + F

What extension lets you preview your page in the browser?

Answer: Live Server

Why should you open the whole folder in VS Code?

Answer: So VS Code can manage all project files, folders, images, CSS and HTML together.

Lesson Summary

You have now completed the Visual Studio Code Quick Start. You know how to create a project folder, create an HTML file, save your work, format your code, use Live Server and preview a webpage.

Back to Academy Home Next Lesson: Interface Tour Downloads Resource Library Student Dashboard