BeingXpert Learn & Build Future

2. HTML Editors and Setup

What you will learn

  • Which tools you need to write HTML
  • How to create an HTML file on Windows
  • How to open it in a browser and see changes

What you need

HTML needs only two free tools:

  • A text editor to write the code. Visual Studio Code (free) is a popular choice. Windows Notepad also works.
  • A web browser to view the result, such as Chrome, Edge, or Firefox.

You do not need to install a server or buy anything.

Step 1: Show file extensions on Windows

In File Explorer, open the View menu, choose Show, and tick File name extensions. This prevents a file called index.html from secretly becoming index.html.txt.

Step 2: Create a folder and a file

  1. Create a folder called my-first-site in your Documents folder.
  2. Open Visual Studio Code and choose File → Open Folder, then pick that folder.
  3. Click the New File icon and name the file index.html.

Step 3: Write some HTML

Example: index.html

<p>My first web page.</p>

Save the file with Ctrl+S.

Step 4: Open it in a browser

In File Explorer, double-click index.html. It opens in your default browser.

What the browser shows

My first web page.

The edit and refresh routine

  1. Change the text in your editor.
  2. Save with Ctrl+S.
  3. Switch to the browser and press F5 to refresh.

You will repeat these three steps hundreds of times while learning.

Common mistakes

  • Saving the file as index.html.txt. Turn on file extensions to check.
  • Forgetting to save before refreshing, so the browser shows the old version.
  • Using a word processor such as Microsoft Word. It adds hidden formatting that breaks HTML.

Tip: use lowercase file names without spaces, for example about-us.html. This avoids problems when you publish a site later.

Exercise

Create a file named hello.html that contains a paragraph saying Hello from my computer. Open it in your browser.

Show solution 
<p>Hello from my computer</p>

Knowledge check

1. Which file extension does an HTML file use?

.html

2. What do you press to save a file in most editors?

Ctrl+S

3. Why should you avoid Microsoft Word for HTML?

It adds hidden formatting. HTML files must be plain text.

Summary

  • You need a text editor and a browser.
  • HTML files are plain text saved with the .html extension.
  • Save, then refresh the browser to see changes.

Next lesson: HTML Basic Structure.

Scroll to Top