HTML Editors

In this lesson, you will learn about available code editors and online playgrounds, how to install them, and how to use them effectively during development.

What is a code editor?

A code editor is a program that makes it easier to write HTML, CSS, and JavaScript. It offers syntax highlighting, autocomplete, linting, and other development tools.

Popular Desktop Editors

The following editors are either free or offer free trials and are widely used among web developers:

• Visual Studio Code: Our favorite is VS Code because of its extensive extension system and built-in terminal.
• Sublime Text: Fast and lightweight with minimal resource usage, and supports plugins.
• Atom: Developed by GitHub, customizable and extendable editor.

All modern editors come with the following essential features:

• • Syntax highlighting and themes
• • Intelligent autocomplete
• • Real-time linting
• • Support for snippets and macros
• • Built-in terminal for quick commands
• • Git integration and version control

Editing HTML in Visual Studio Code

Visual Studio Code (VS Code) is one of the most popular code editors, especially for web development. The following steps show how to get started editing HTML files in it.

1. Download and Install Visual Studio Code

Visit the official website (https://code.visualstudio.com/) and download the version for your operating system. The installation is straightforward: follow the on-screen instructions.

2. Create and Open a New Project Folder

Create a new folder on your computer, for example: 'html-practice'. Then launch VS Code, go to 'File' → 'Open Folder...', and select the folder you just created.

3. Create a New HTML File

Right-click the folder in the file explorer on the left and select 'New File'. Name it something like 'index.html'.

4. Enter a Basic HTML Template

Type a basic HTML structure manually or type '! + Enter' using the built-in Emmet extension to generate a template automatically.

5. Open the HTML File in Your Browser

Right-click the file and select 'Reveal in File Explorer' or 'Show in Finder'. Then double-click the file to open it in your default browser.

Extensions and Add-ons

Most editors have a marketplace where you can install additional features, themes, and language packs.

Online Editors and Playgrounds

If you don’t want to install anything, these web-based tools are ready to use instantly:

• • ReadyTools – ReadyTools offers multiple HTML editors, including a free built-in editor integrated with the Academy.
• • CodePen – Interactive environment for testing HTML, CSS, and JavaScript.
• • CodeSandbox – Project-based environment with module and package support.