Code Editors

HTML & CSS: Level 1 Hypertext Markup Language Code Editors

💡

Essential Question: What code editor will you use to write HTML?

If you’re going to start writing HTML, then you’ll need something to write it on. That’s where code editors come into play. A code editor allows you to write generally any type of code you’d like — including HTML, CSS, JavaScript, PHP, Python, etc. — then save your work as a file that is placed on your web server for a browser to read and render a webpage.

You might think a code editor is some fancy piece of software. That’s true! For example, here are a few popular code editors that are made specifically for writing code: Click on each logo to navigate directly to that code editor’s website.

VS Code Logo

VS Code

Sublime Text

Atom

If you check any of those out, you may notice something odd… none of them actually describe themselves as code editors. Instead, they tend to call themselves text editors. And that’s for good reason because any ol’ text editing software is capable of writing code. That includes TextEdit for Mac and Notepad for Windows, which are installed by default. They’re perfectly fine to use for writing code, as they allow you to save your work as an HTML file (e.g. contact.html).

Which code editor should you choose? The answer is totally up to you! The three editors outlined above are free, so cost isn’t a factor. They all let you customize the appearance and how your code is written. It’s really whatever you feel most comfortable using. I personally use VS Code because it has a big community behind it with lots of free plugins that make the editor extremely powerful, like autocompletion, syntax highlighting, support for additional code languages, and even the ability to connect directly to a website or code repository.

▶️ Video: HTML Code Editors

Please watch the following video for a recorded lecture on the concepts presented in this lesson.

Give it a try!

Before moving to the next lesson, download and install VS Code (or another code editor of your choice) on your computer.

  • Download the application from the VS Code website.
  • Open the application and follow the installation instructions.
  • Open the application.
  • Create a new file called index.html and save it to your desktop.
  • Add the following HTML code to your index.html file:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Learning HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is your very first HTML file! Hang onto it and use it to experiment with the upcoming lessons</p>
  </body>
</html>
  • Save the HTML file.
  • Open the file with your favorite web browser (e.g. Firefox)

This is a very simple example of an HTML web page. It’s OK if the code looks foreign to you at this point in time. We’ll get to what each of those tags means in upcoming lessons. The important thing for you to know right now is that HTML is written in software called a “code editor” and that you can use a code editor to create HTML files that are capable of running in a web browser.

Previous Module
Back to Module
Next Lesson