---

---

Online Code Editors

---

• Glitch
• CodePen
• Other Code Editors
• Next Steps

---

Now you know, at a high level, that HTML is a coding language used for building websites. But to write HTML, you need an HTML editor!

This tutorial introduces a couple online code editors, which let you write HTML directly in your browser without downloading or installing anything.

Glitch

There are many online editors out there, but for now I recommend using Glitch.

(I like Glitch because it’s powerful enough for all of our projects, and its free tier lets you create as many projects as you want.)

To use Glitch, first sign up for a free Glitch account.

Glitch is a little unique in that it doesn’t use passwords by default. You can login using a GitHub or Google account, or you can have Glitch email you a login link. For now, I recommend that last option. click the Email Magic Link button on the signup page, then check your email for a link that lets you login to Glitch.

After you login, you can create new projects in Glitch. I personally believe the default projects Glitch gives you are a little too involved, so for now I recommend opening this project:

Remix Happy Coding's HTML Template

You can also open the template and then click the Remix button.

Either way, when you remix the template, Glitch copies the starter code over into a new project in your Glitch account.

You should now see something like this:

Welcome to the Glitch editor! The left tab shows the files in your project. Currently, you only have a single index.html file. The middle tab shows an editor for your code, and the right tab shows the result of your code.

Try changing the text Hello world! to include your name. The preview on the right side should automatically refresh.

Again, if you’re new to coding and HTML, I recommend using Glitch. But there are some other online code editors you’re likely to encounter.

CodePen

For the tutorials I post to Happy Coding, I often use CodePen to embed a code editor directly in the page. You can edit the code in the CodePen editor and see your changes directly. Try it now:

I use CodePen because it lets me embed code directly in these tutorials, but for most purposes I’d recommend using Glitch.

Other Code Editors

There are many other online code editors. Here are a couple you’re likely to encounter:

• JSFiddle is similar to CodePen. It’s great for small projects and sending small examples.
• W3Schools Editor is an embedded editor in a lot of W3Schools tutorials. It’s a great way to try out new HTML tags as you learn about them.

Don’t be afraid to try out a few different editors and see which one you like the best!

Next Steps

Now you should have a code editor set up. Next, you’ll start writing your own HTML!

---