1. Install and Setup MS VSCode for HTML Editor

Learning Objectives

By the end of this lesson, you will be able to:

• Download and install VSCode on your computer
• Open VSCode and create a new project folder
• Configure VSCode for working with HTML files
• Understand the basic VSCode interface

What is VSCode?

Visual Studio Code (VSCode) is a free, powerful text editor made by Microsoft. It’s perfect for writing HTML, CSS, JavaScript, and Python code. Many professional programmers use VSCode!

Step 1: Download VSCode

1. Go to https://code.visualstudio.com/ in your web browser
2. Click the big Download button
3. Choose your operating system:
   • Windows: Click “Windows”
   • Mac: Click “Mac”
   • Linux: Click “Linux”

Step 2: Install VSCode

On Windows:

1. Find the downloaded file (usually in your Downloads folder) named VSCodeUserSetup-x64-*.exe
2. Double-click it to start the installation
3. Click “I accept the agreement” checkbox
4. Click Next several times
5. Click Install
6. When done, click Finish

On Mac:

1. Find the downloaded .zip file and double-click to extract it
2. Drag the Visual Studio Code app to your Applications folder
3. Open Applications and double-click Visual Studio Code to launch it

Step 3: Open VSCode

After installation, double-click the VSCode icon to open it. You should see a Welcome screen.

Step 4: Install HTML Extensions (Optional but Recommended)

Extensions add extra features to VSCode. For HTML coding, these are helpful:

1. Click the Extensions icon on the left sidebar (looks like 4 squares)
2. Search for “Live Server” and click Install
   • This lets you see your HTML changes instantly in the browser!
3. Search for “HTML Snippets” and click Install
   • This gives you shortcuts for common HTML code

Step 5: Create Your First Project Folder

1. Click File → Open Folder
2. Click New Folder to create a folder called MyWebProject
3. Click Select Folder

Now VSCode is ready to use! You can create and edit HTML files here.

Key Concepts

Term	What it means
VSCode	A text editor for writing code
Extension	A tool that adds features to VSCode
Project Folder	A folder where you store all your HTML, CSS, and JavaScript files
Live Server	A tool that shows your website changes instantly

🎯 Try It Yourself

1. In VSCode, create a new file called test.html
2. Type this code: ```html

Hello! My name is ___

```

1. Replace ___ with your name
2. Save the file (Ctrl+S or Cmd+S)
3. Right-click on the file and choose “Open with Live Server”
4. A browser window should open and show your page!

✅ Success! You’ve created your first web page and VSCode is working!

---

Next Step

Ready to build your first real web page? Go to Lesson 2: Build Your First Web Page