Your First HTML File
Enough theory. Let's build something real right now.
You are going to create your first webpage in VSCode. It will take about five minutes, and by the end you will have a real page open in your browser — one you built yourself.
Step 1 — Open VSCode
Open VSCode. Go to File → Open Folder and open (or create) a folder where you want to keep your frontend work. Something like a folder called frontend on your Desktop works perfectly.
Step 2 — Create a new file
In the Explorer panel on the left side of VSCode, click the New File icon at the top.
Name the file:
first.html
The .html extension is important — that is what tells the browser this is a webpage, not a plain text file.
Step 3 — Type your HTML
Click inside the file and type this:
<h1>Welcome</h1>
<p>This is my first webpage.</p>
<button>Click Me</button>
Save with Ctrl + S.
Step 4 — Open it in your browser
Open your file manager, navigate to the folder where you saved first.html, and double-click the file. It will open in your browser.
You should see:
- A big heading that says Welcome
- A paragraph of text underneath it
- A clickable button
That is a real webpage. You built it.
What just happened?
The browser read your file from top to bottom. Each tag told it what to draw:
<h1>→ a large heading<p>→ a paragraph of text<button>→ a clickable button
You did not tell the browser how to draw them — the browser already knows. Your job is just to say what they are.
You do not need the internet for this
You are opening a file directly from your computer. No server, no uploading, no internet connection needed. This is how you will build and test all your HTML while you are learning.
Challenge
Go back to your first.html in VSCode. Add two more things:
- Another
<h1>with your name - Another
<p>with one sentence about yourself
Save the file (Ctrl + S), switch to your browser, and press F5 to refresh.
Do you see your changes appear?