In the previous topic, we learned what an IDE and code editor are and why developers use these tools while building websites.
For this HTML course, we will use Visual Studio Code, commonly called VS Code, as our primary code editor. It gives us a comfortable environment where we can create files, organize our project, write HTML, and later work with CSS and JavaScript.
Before we start writing HTML, let's get VS Code installed and ready.
But first, let's understand why setting up the right tool matters.
🧰 Imagine a Carpenter Preparing a Workshop
Imagine you are a carpenter and you have received an order to build a beautiful wooden table.
Before starting the actual work, you need to prepare your workshop.
You need a proper workbench, a measuring tape, a saw, a drill, screws, and other tools.
You could technically start cutting wood without organizing anything, but the process would be slow and frustrating.
A professional carpenter prepares the workspace first so that when the actual work begins, the required tools are ready.
The same idea applies to web development.
We are about to start building webpages using HTML. Instead of repeatedly worrying about where to write code or how to organize files, we will first prepare our development environment.
Our main tool will be VS Code.
💻 What Is VS Code?
Visual Studio Code (VS Code) is a free, lightweight, and powerful source-code editor developed by Microsoft.
It supports many programming and web technologies, including:
-
HTML
-
CSS
-
JavaScript
-
TypeScript
-
Python
-
Java
-
C++
-
And many others
For beginners learning web development, VS Code is particularly useful because it provides features such as syntax highlighting, code completion, file management, extensions, integrated terminal, and debugging support.
You don't need to understand all of these features right now.
At this stage, our goal is simple:
Install VS Code and prepare it for writing HTML.
🌐 Step 1: Visit the Official Website
Open your web browser and search for Visual Studio Code.
Make sure you download it from the official Microsoft website.
The official website provides versions for different operating systems, including:
-
Windows
-
macOS
-
Linux
Choose the version that matches your computer.
If you are using Windows, select the Windows download option.
The installer will then be downloaded to your computer.
📥 Step 2: Run the Installer
Once the download is complete, open the installer.
You will see the VS Code installation setup.
Follow the installation instructions shown on the screen.
You will generally need to:
-
Accept the license agreement.
-
Choose the installation location.
-
Select the required installation options.
-
Start the installation.
For most beginners, the default installation settings are perfectly fine.
You don't need to change advanced options unless you have a specific reason to do so.
Once the installation finishes, you can launch VS Code.
🚀 Step 3: Open VS Code
After installation, open Visual Studio Code.
You will see the VS Code interface.
The exact appearance can change slightly between versions, but you will generally find areas such as:
-
Activity Bar
-
Explorer
-
Editor
-
Extensions
-
Source Control
-
Terminal
Don't worry if these names seem unfamiliar.
We will gradually understand the important parts as we build our projects.
At this stage, think of VS Code as our web development workshop.
📁 Step 4: Create Your First Project Folder
Before writing HTML, let's create a dedicated folder for our course projects.
For example, create a folder named:
HTML-Course
Inside this folder, we can create files for our webpages.
For example:
HTML-Course/
│
├── index.html
├── about.html
└── contact.html
Keeping your files organized from the beginning is a good development habit.
Imagine our carpenter again.
Instead of throwing all tools and materials randomly around the workshop, they keep everything organized so that it can be found quickly.
Developers follow the same principle with project folders and files.
📂 Step 5: Open the Folder in VS Code
Now open VS Code and select File → Open Folder.
Choose the HTML-Course folder that you created.
The folder will appear inside the Explorer panel.
From here, you can create new files, rename files, delete files, and organize your project.
Create a new file called:
index.html
The .html extension tells us that this file contains HTML.
We are now ready to start writing our first HTML code.
🎯 Why Are We Using VS Code?
You might be wondering:
"Why don't we just use Notepad?"
You absolutely can.
HTML does not require VS Code specifically.
However, VS Code provides many features that make development easier as your projects become larger.
For example, it can automatically highlight different parts of your code, suggest code while you type, help you navigate between files, and provide extensions that add additional functionality.
It is similar to the difference between doing woodworking with a basic knife and working in a properly equipped workshop.
Both can accomplish certain tasks, but the right tools can make the work significantly more comfortable and efficient.
✅ Our Development Environment Is Ready
At this point, we have:
Browser
↓
VS Code
↓
HTML Project Folder
↓
index.html
The browser will allow us to see the result of our webpage.
VS Code will be our workspace for writing and managing code.
The HTML project folder will keep our files organized.
And index.html will be the first HTML file we work with.
We don't need to become experts in VS Code before learning HTML. We will learn the editor naturally as we use it.
Now that our development environment is ready, it's time to write our first HTML document and see how the browser turns our HTML code into an actual webpage.