Complete HTML Course Module 1: Beginner: Getting Started with HTML

Setting Up Your Tools: Code Editor and Browser

  • Beginner
  • Lesson 1.2
  • 4 min read
  • 2 of 69 in the course

In short

To write HTML you need just two free tools: a code editor and a web browser. In this lesson you will set up VS Code, create your first HTML file and open it in a browser. What is a code editor and why use VS Code? A code editor is a program for writing code.

To write HTML you need just two free tools: a code editor and a web browser. In this lesson you will set up VS Code, create your first HTML file and open it in a browser.

What is a code editor and why use VS Code?

A code editor is a program for writing code. It is like a word processor, but made for code. It does not add hidden formatting, and it helps you with colours, auto-complete and error hints.

We recommend Visual Studio Code (often called VS Code). It is free, works on Windows, Mac and Linux, and is used by millions of developers.

  1. Go to the official VS Code website at code.visualstudio.com.
  2. Download the version for your computer.
  3. Install it like any other program and open it.

Common mistake: Don't write HTML in Microsoft Word or Google Docs. They save extra formatting that browsers can't read. Always use a code editor, or at least a plain text editor like Notepad.

Which browser should you use?

Any modern browser works: Chrome, Firefox, Edge or Safari. Many developers use Chrome or Firefox because their developer tools are very good. Keep your browser up to date so it supports the newest HTML features.

How to create a project folder and an index.html file

Every website lives in a folder on your computer. Let's make one.

  1. Create a new folder on your desktop called my-first-website.
  2. Open VS Code. Choose File > Open Folder and select my-first-website.
  3. In the left sidebar, click the New File icon and name the file index.html.

Why index.html? Web servers look for a file with this name first when someone visits a folder. It is the "front door" of your website.

Now type this into index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>I made this page myself.</p>
  </body>
</html>

Save the file with Ctrl + S (or Cmd + S on a Mac).

Tip: In VS Code, type ! on an empty line in an HTML file and press Tab or Enter. VS Code writes a full starter page for you.

How to open an HTML file in your browser

Find index.html in your folder and double-click it. It opens in your default browser. You should see "Hello, world!" as a big heading and your sentence below it.

Look at the address bar. It starts with file:///. This means the browser is reading a file from your own computer, not from the internet.

The save and refresh loop

This is how you will work for the whole course:

  1. Change something in VS Code.
  2. Save the file.
  3. Go to the browser and press F5 (or Cmd + R on a Mac) to refresh.

If your change does not appear, the most common reason is that you forgot to save. VS Code shows a white dot on the file's tab when there are unsaved changes.

Try it now. Change your paragraph to this, save, and refresh:

<p>I made this page myself. Today I am learning HTML!</p>

You should see the new sentence in the browser straight away.

View Source and DevTools: looking inside any web page

Browsers let you look at the HTML of any page. This is a great way to learn.

  • View Source: right-click on a page and choose View page source (or press Ctrl + U). You see the HTML file exactly as the server sent it.
  • DevTools: right-click on any part of a page and choose Inspect (or press F12). A panel opens. The Elements tab shows the HTML, and the part you clicked is highlighted.

In DevTools you can even edit the HTML and see the change live. Don't worry, you are only changing your own copy. When you refresh, everything goes back to normal.

Note: DevTools has many tabs, like Console and Network. For now you only need the Elements tab.

Practice exercise

Add a second paragraph to your index.html that says where you live or what you like to eat. Save and refresh. Then right-click your new paragraph and choose Inspect to find it in DevTools.

Hint: copy the existing <p> line, paste it below, and change the words.

Key takeaways

  • You need a code editor (like VS Code) and a modern browser. Both are free.
  • Keep each website in its own folder, and name the main page index.html.
  • Always save, then refresh the browser to see your changes.
  • View Source shows a page's original HTML, and DevTools (Inspect) lets you explore it live.