Intermission: upgrade your text editor

You’ve come a long way. Let’s take a second to appreciate that you opened up a simple text editor and created a freaking website by writing some HTML code. Way to go!

Speaking of simple text editors, keeping everything indented nicely in HTML can get annoying. It can also be challenging to distinguish HTML code from our written content.

A notepad window showing an HTML code for "Blake's Homepage". The page contains a heading, an image tag with the source "space.jpg" and alt text "Photograph of space with stars and stardust," and sections about hobby and teaching interests that use various HTML elements.

It’s not terrible, but we can do better. Let’s download an editor that’s made for writing code.

Download Visual Studio Code

Head over to https://code.visualstudio.com/. This free code editor from Microsoft works on Mac, Windows, and Linux. It can do many things, but we’ll keep it nice and easy for this book.

Don’t let the busy screenshot on the homepage scare you. We don’t need all those advanced features for what we’re doing.

Once you download and install VS Code, start it up. You may see a few instructional screens, but then you’ll be presented with a screen like this:

Screenshot of Visual Studio Code's welcome screen. The sidebar includes options like "Explorer," "Search," "Source Control," "Run," and "Extensions." The main screen displays options to "Open Folder..." with walkthroughs for starting with VS Code and learning fundamentals.

Open your project

On the VS Code welcome screen, click Open Folder, then select the folder containing your web project. You’ll see your website files in the sidebar. When you open the index.html file, you’ll see your code in a nice view with line numbers and what is called syntax highlighting—parts of the code are colorized to be more easily distinguished from other parts.

Screenshot of Visual Studio Code with HTML code for "Blake's Homepage." The left sidebar with the project's files. The main editor shows the same source code as before, but the code has been colorized to make it easier to distinguish the different parts of the code.

VS Code also helps by making it easier to write code. It understands HTML and many other languages. When you start to type, it will give you code completion suggestions, which you can accept by clicking or pressing enter. It’ll also automatically indent when you create a new line, so you don’t have to manually enter tabs or spaces.

VS Code opens your files in tabs. This is convenient later when your website has multiple pages.

Explore when you’re ready

There are many cool things VS Code can do, but what we have covered here is enough to get you started. Think of it as a fancier Notepad. At the end of the day, it’s still just text in a file. We started our journey with Notepad or TextEdit to show that you can make a website with simple tools you already have installed on your computer—no magic or expensive software required.

That said, using a code editor makes the HTML writing process nicer and more manageable. And when you’re ready, you can explore all the features VS Code offers. You can also try other code editors to see how you like them.

For now, let’s get back to making our website!

Up next

Now that we’ve leveled up our text editor, let’s learn how to add style to our website.