Setting Up HTML

You know what HTML is now. You know it uses tags. You know it is the foundation of every webpage on the internet.

Now it is time to actually write some.

But before we do, we need to get you set up. You need somewhere to write your code and somewhere to see it come to life.

I am going to give you three options. Pick the one that works best for you right now. You can always switch later.

Option 1 — Start Right Now With the Online Compiler

No setup. No downloads. No installation. Just open it and start writing.

The online compiler lets you type HTML in one panel and see the result appear instantly in another. It is perfect for following along with lessons and trying things out as you go.

Open the Compiler

If you are not ready to install anything yet, start here. Come back to Option 2 whenever you feel ready.

Option 2 — VS Code

This is the one I recommend for building your project properly.

VS Code is a free code editor that runs on your computer. It is what most professional developers use every single day. It is not complicated. It is actually much easier than writing code in a basic text editor.

Here is what makes it so good for beginners:

When you start typing a tag it finishes it for you. Your code shows up in different colors so it is easy to read at a glance. It catches small mistakes before they cause problems. And with one free extension your browser updates automatically every time you save your file. No more refreshing manually.

Think of it like this. Writing HTML without VS Code is like trying to cook a proper meal with only a spoon. You can do it. But give yourself the right tools and everything becomes so much easier.

Let me walk you through the setup step by step. It will take about five minutes.

Step 1 — Download VS Code

Open your browser and go to code.visualstudio.com

You will see a big Download button right on the homepage. Click it. The website will automatically detect whether you are on Windows or Mac and give you the right version.

Once the file finishes downloading, open it and follow the steps. Just keep clicking Next on Windows or drag it to Applications on Mac. When it says Finish or the install completes, you are done.

Step 2 — Create a Folder for Your Project

Before we open VS Code, let us create a home for all your HTML files.

On Windows:

Go to your Desktop. Right click on any empty space. Choose New then Folder. Name it html-practice and press Enter.

On Mac:

Go to your Desktop. Right click on any empty space. Choose New Folder. Name it html-practice and press Enter.

This folder is your project. Everything goes in here. Your HTML files, your images, everything. Think of it as your workspace.

Step 3 — Open the Folder in VS Code

Now let us open that folder inside VS Code so we can start working in it.

On Windows:

Open VS Code. Click File at the top left. Then click Open Folder. Find your html-practice folder on the Desktop and click Select Folder.

You can also right click the html-practice folder on your Desktop and choose Open with VS Code if that option appears.

On Mac:

Open VS Code. Click File at the top. Then click Open Folder. Find your html-practice folder on the Desktop and click Open.

Once you do this you will see your folder name appear in the left sidebar of VS Code. That sidebar is where all your files will live.

Step 4 — Create Your First HTML File

Look at the left sidebar in VS Code. You will see your folder name at the top. Hover your mouse over it and some small icons will appear to the right of it. Click the one that looks like a piece of paper with a small plus sign. That is the New File button.

A small text box will appear asking you to name the file. Type:

index.html

Then press Enter.

Your first HTML file is ready. Click on it to open it. You will see a blank white editor on the right side of the screen. This is where you write your code.

Step 5 — Write Your First Line of HTML

Click inside the editor and type this:

<h1>Hello World</h1>

Now save it. On Windows press Ctrl and S at the same time. On Mac press Cmd and S.

Now go to your Desktop, open the html-practice folder, and double click index.html. It will open in your browser and you will see this:

Look at that. You just wrote an HTML file and opened it in a real browser. That is your first webpage. It is simple but it is real.

Step 6 — Install Live Server

Right now every time you make a change to your code you have to save the file and then go to the browser and refresh the page manually to see the update.

That is fine for now. But it gets tedious fast.

There is a free extension for VS Code called Live Server that handles this for you. Every time you save your file the browser refreshes automatically. It is a small thing that makes a big difference when you are learning.

Here is how to install it:

Look at the left sidebar in VS Code. At the bottom of the sidebar icons there is one that looks like four small squares. That is the Extensions icon. Click it.

A search bar will appear at the top. Type Live Server.

You will see a result called Live Server by Ritwick Dey. Click the Install button next to it.

Wait a moment for it to install. Once it is done you will see a small button at the very bottom of the VS Code window that says Go Live.

Go back to your index.html file and click that Go Live button. A new tab will open in your browser showing your page.

Now try making a change to your code. Change Hello World to something else. Save the file. Watch the browser update on its own.

That is Live Server. You only have to set this up once and it will be there every time you open VS Code from now on.

Option 3 — Notepad or TextEdit

You can also write HTML in the basic text editor that already comes with your computer. Notepad on Windows or TextEdit on Mac. Nothing to download, nothing to install.

It works. But it is the bare minimum. No colors, no autocomplete, no live preview. You will spend more time dealing with the tool than actually learning.

We are mentioning it here because you might be curious. But if you have five minutes, go with VS Code. You will thank yourself later.

If you want to use it anyway here is how:

On Windows — Notepad:

Press the Windows key, type Notepad and open it. Type your HTML. Go to File then Save As. In the Save as type dropdown choose All Files. Name the file index.html and save it to your Desktop.

Go to your Desktop and double click index.html. It will open in your browser.

On Mac — TextEdit:

Open TextEdit. Before you type anything go to Format at the top and choose Make Plain Text. This is important. If you skip this step TextEdit will add invisible formatting that breaks your HTML.

Type your HTML. Go to File then Save. Name it index.html. Make sure when you save it the extension says .html and not .txt.

Go to your Desktop and double click index.html. It will open in your browser.

You Are All Set

You have a place to write code. You have a browser to see it in. Everything is ready.

In the next lesson we start building Nadia's page for real. The very first thing we add is a heading. One tag. And the page begins to take shape.

I will see you there.