Skip to content
Laviyx Learn

Try

HTML course menu

Getting Started with HTML: Code Editor, Browser and Developer Tools

Set up everything you need to write HTML: choose a code editor such as VS Code, create and open an .html file in your browser, reload to see changes, and inspect pages with browser developer tools.

Beginner3 min readUpdated
On this page

HTML needs no compiler and no installation. You need two things you probably already have: a text editor to write the file and a web browser to view it.

1. A code editor#

Any plain-text editor works, but a code editor colours your code, auto-completes tags and catches typos. Popular free choices:

EditorNotes
Visual Studio CodeFree, runs on Windows, macOS and Linux, and has built-in HTML support. The most common choice.
Sublime TextFast and lightweight; free to evaluate.
Notepad / TextEditAlready installed. Fine for a first try, but no help with mistakes.

2. A browser#

Use a current version of Chrome, Edge, Firefox or Safari. All modern browsers display standard HTML the same way.

3. Create and open a file#

  1. Make a folder for your practice files, for example html-practice.
  2. In your editor, create a new file and save it as index.html inside that folder. The .html extension is what tells the computer it is a web page.
  3. Type this line and save:
index.html (HTML)
<h1>It works!</h1>
  1. Open the file in your browser. Double-clicking index.html usually works; you can also drag the file onto a browser window.

The browser shows a large heading. The address bar starts with file:///, which means the page came from your own computer, not a server.

4. Edit, save, reload#

This is the loop you will repeat all the time:

  1. Change the HTML in your editor.
  2. Save the file (Ctrl+S on Windows and Linux, Cmd+S on macOS).
  3. Reload the browser tab (F5 or Ctrl+R, or Cmd+R on macOS).

5. Developer tools#

Every desktop browser includes developer tools. Right-click anything on a page and choose Inspect, or press F12 (Cmd+Option+I on macOS).

  • The Elements panel (called Inspector in Firefox) shows the page's HTML as a tree. Hover over an element to highlight it on the page.
  • You can edit HTML there to experiment. Changes are temporary and disappear on reload.
  • The Console panel shows errors and is where you will run JavaScript later.

Try it on any website: right-click a heading and choose Inspect to see the HTML behind it.

Using this site#

Every example in this course shows the code and a Result frame. The result is rendered live by your browser, so it is exactly what you would see if you saved the code in a file and opened it. Copy any example with the copy button and try changing it.

Practice#

Practice exercise

Create about.html in your practice folder containing <h1>About me</h1> followed by <p> with one sentence about yourself. Open it in your browser, then change the sentence, save and reload.

Show solution
about.html (HTML)
<h1>About me</h1>
<p>I am learning HTML so I can build my own website.</p>

Key takeaway#

Finished this lesson?

Related lessons

HTMLIntroduction to HTML: What It Is and How Web Pages WorkA beginner-friendly introduction to HTML: what HyperText Markup Language is, how browsers turn HTML into web pages, how HTML works with CSS and JavaScript, and what you will learn in this course.Beginner4 min readHTMLYour First HTML Page: The Basic HTML Document TemplateWrite your first complete HTML page step by step: the DOCTYPE, html, head and body elements, the title, the charset and viewport meta tags, and a heading and paragraph. Includes a copyable HTML5 boilerplate.Beginner5 min read