Code Editors

You can build your first webpage with a simple text editor. As your projects grow, a code editor can make it easier to read your code, find mistakes, and work with several files.

This guide compares three options: Windows Notepad, called Kladblok in Dutch, Notepad++, and Visual Studio Code (VS Code). Each can edit HTML, CSS, and JavaScript. The right choice depends on how much help you want while learning.

What does an editor do?

An editor is where you write and save your code. Your browser reads that code and displays the webpage. These are two different jobs: saving an HTML file in an editor does not publish it online.

For a basic webpage, the routine is simple: edit, save, switch to the browser, and refresh. You can use the same files in all three editors without converting them.

Kladblok (Windows Notepad): start with the basics

Kladblok is the Dutch name for Windows Notepad. It is useful for a small exercise because you can concentrate on the code and the save-and-refresh routine.

Try writing a heading and a paragraph, saving the file as index.html, and opening it in your browser. That is enough to see how an HTML file becomes a webpage.

Pay attention to the filename when saving. If the Save As dialog offers a file-type choice, choose All files and enter index.html. Use UTF-8 encoding, and check that Windows has not added .txt to the filename.

Choose it for: your first short HTML experiment or a quick text edit. For regular work across HTML, CSS, and JavaScript files, a dedicated code editor provides more guidance.

Notepad++: a focused code editor for Windows

Notepad++ is a separate application from Windows Notepad. It is a free, open-source source-code editor for Windows. See the official project information.

It is a useful next step when you want a code-focused editor for small local projects. Keep your HTML, CSS, and JavaScript files together in a project folder, then edit and test them in small steps.

Choose it for: learning web development on Windows when you prefer a focused editing tool. You do not have to move through every editor in order; you can start here if it suits you.

VS Code: work with a complete project

Visual Studio Code supports working with a project folder and its files in one workspace. It includes support for HTML, CSS, and JavaScript, with features such as code completion and formatting. Its JavaScript tools also include debugging and code navigation. See VS Code language support and JavaScript features.

Open your project folder rather than just one file. This makes it easier to see how index.html, style.css, and script.js belong together.

Start with the core editor and add extensions when you have a specific need. You can use the core editor without an account, and AI features are optional. VS Code FAQ

Choose it for: projects with several connected files, or when you want to learn debugging and a broader development workflow. Give yourself time to learn the interface; you do not need to understand every panel on day one.

Which one should you choose?

Your goal A practical starting point
Understand how a saved HTML file becomes a webpage Kladblok / Windows Notepad
Edit small web projects with a focused Windows tool Notepad++
Organize a growing project and learn development tools VS Code

My recommendation for the exercises on Playcode123.com is to use Notepad++ or VS Code for regular practice. Try Kladblok once to understand the basic process, but there is no need to stay with it before moving on.

Try the same webpage in your editor

Create a folder called editor-practice. Inside it, save the following code as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Editor Practice</title>
</head>
<body>
  <h1>My first webpage</h1>
  <p>I can edit, save, and preview my own HTML.</p>
</body>
</html>
  1. Save the file and open it in your browser.
  2. Return to your editor and change the heading.
  3. Save again, then refresh the browser.
  4. Check that your new heading appears.

If you want to compare editors, open this same file in another editor. The webpage should look the same: changing the editor does not change the HTML.

When your changes do not appear

  • Check that you saved the file before refreshing.
  • Make sure you are editing the same copy that the browser has opened.
  • Check for an accidental filename such as index.html.txt.
  • Save code as plain text, rather than as a Word document.

Once this routine feels familiar, follow Building Web Pages Locally: A Beginner Workflow to connect separate HTML, CSS, and JavaScript files. For a quick experiment without creating files first, use the Playcode123 Sandbox.

Choose an editor that helps you practise regularly. Learning what your code does matters more than learning every feature of the tool.