HTML Editors & Your First File

Set up VS Code, save an .html file and open it in your browser.

Lesson 2 of 44Beginner11 min read

To write HTML you only need two things: a text editor to type the code and a web browser to view the result. You already have a browser. In this lesson you'll choose an editor, save your first .html file and open it on your own computer.

Setting up a proper editor early is worth the ten minutes it takes. A good editor colours your code so mistakes stand out, fills in closing tags for you and keeps all the files of a website together in one folder view.

Not ready to install anything yet? That's fine. Every example on Codevra runs right here in the page, and the Playground is a full editor in your browser.

Which HTML editor should you use?

Any plain text editor works, but a code editor makes life much easier. It colours your code, closes tags for you and points out typos.

EditorPriceWhy people like it
VS CodeNo costThe most widely used code editor. Good for beginners and professionals.
Sublime TextTrial, then paidVery fast and lightweight.
Notepad (Windows) / TextEdit (Mac)Built inWorks, but no colours or help. TextEdit must be set to plain text.
Codevra PlaygroundOnlineNothing to install, so it's handy for quick practice.

We recommend Visual Studio Code (VS Code). It runs on Windows, Mac and Linux, and it's what most professional web developers use day to day.

Avoid word processors such as Microsoft Word or Google Docs. They save hidden formatting and replace straight quotes with curly ones, and both of those break HTML.

Create your first HTML file in 5 steps

  1. Install VS Code from code.visualstudio.com.
  2. Create a folder on your desktop called my-website.
  3. In VS Code choose File → Open Folder and pick my-website.
  4. Create a new file and save it as index.html. The name index.html is special: web servers show it automatically as the home page of a folder.
  5. Type ! and press Tab. VS Code writes a complete HTML page skeleton for you.

Now right-click index.html in your file explorer and choose Open with → Chrome (or any other browser). That's your page, running from your own computer.

Why saving your file matters

The browser shows the saved version of your file. If you change the code but don't save (Ctrl + S, or Cmd + S on Mac), the browser still shows the old page. Forgetting to save is the most common "why isn't it working?" moment for beginners.

VS Code marks unsaved files with a white dot on the file's tab. If you see the dot, save before you check the browser. You can also turn on File → Auto Save so you never have to think about it.

Naming files and folders

Web addresses are built from file names, so choose names that work well in a URL:

  • Use lowercase letters: about.html, not About.html. Many web servers treat upper and lower case as different files.
  • Use hyphens instead of spaces: contact-us.html, not contact us.html.
  • Always end HTML files with .html.

Following these rules from day one saves you from broken links when your site goes online.

HTML Editor Syntax

A file name that works everywhere

index.html
about-us.html
contact.html

Use lowercase letters, hyphens instead of spaces, and always end with .html.

HTML Editor Summary

  • You need a text editor to write HTML and a browser to view it.
  • VS Code is a popular code editor that highlights code and helps you type faster.
  • Save files with the .html extension. index.html is the default home page.
  • The browser only shows changes after you save the file.
  • Use lowercase file names with hyphens instead of spaces.

HTML Editor Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

The page VS Code creates for you

This is what you get when you type ! + Tab in VS Code. You'll learn what every line means in the next lesson.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>It works!</h1>
</body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Tells the browser "this is a modern HTML page".
  2. Line 2The root element that wraps everything. lang="en" says the page is in English.
  3. Lines 3 to 7The head holds information about the page, like its title. It isn't shown on the page itself.
  4. Line 6The text shown in the browser tab. Change "Document" to something meaningful!
  5. Lines 8 to 10The body holds everything you can see. Here, one heading.
Example 2

Linking two pages together

Real websites have several files. Here's what index.html might link to. (Links between your own files use just the file name.)

<h1>My Website</h1>
<p>Welcome! Find out <a href="about.html">about me</a>.</p>
<p>Or <a href="contact.html">get in touch</a>.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2href="about.html" points to a file called about.html in the same folder.
  2. Line 3Same idea for a contact page. Clicking it in this preview won't navigate, but on your computer it would.

Common HTML Editor Mistakes

Saving as a .txt file

Don't
index.html.txt
Do
index.html

Windows sometimes hides file extensions and adds .txt. In Notepad choose Save as type: All files. In VS Code this never happens.

Spaces and capitals in file names

Don't
My First Page.HTML
Do
my-first-page.html

Web servers treat Page.html and page.html as different files, and spaces become ugly %20 in links. Lowercase and hyphens avoid both problems.

HTML Editor in Real Projects

What professionals use

Professional web developers use the same setup: VS Code (or a similar editor), a browser with DevTools open, and a live-reload tool. The only difference is they add extras like Git for saving versions and a build tool for big projects. You're starting with the real workflow.

HTML Editor Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Multiple choiceeasy

You edit your HTML file but the browser still shows the old version. What's the most likely reason?

Multiple choiceeasy

Which file name is best for your home page?

Fill in the blankseasy

Complete the link so it opens the gallery.html file in the same folder.

<a ="">See my photos</a>

HTML Editor Quiz

3 questions to check what you learned.

  1. Which of these do you need to start writing HTML?

    • A paid program
    • An internet connection
    • A text editor and a browser
    • A web server

  2. What does the VS Code extension Live Server do?

    • Publishes your site on the internet
    • Reloads the browser automatically when you save
    • Checks your spelling
    • Converts HTML to CSS

  3. Why should you avoid spaces in HTML file names?

    • Browsers can't open them at all
    • HTML forbids spaces anywhere
    • They make the file larger
    • They become %20 in links and are easy to mistype

HTML Editor Challenge

Change the tab title

The page below has the boring default title "Document". Change the <title> to My First Website and change the heading to say hello to you.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Hello!</h1>
</body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The title is "My First Website"
  • The heading has changed from just "Hello!"

Related HTML topics

01HTML IntroductionWhat HTML is, how browsers read it, and your very first web page.03Page StructureThe DOCTYPE, html, head and body elements that every web page is built on.11CommentsLeave notes in your code and switch parts off without deleting them.
Esc
↑↓ to navigateEnter to open