/ /

Online Code Editors

January 15, 2023

Replit
- Getting Started with Replit
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.

Replit

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

(I like Replit because it’s powerful enough for all of our projects, and the default code it gives you is less overwhelming than the default code that some other editors give you.)

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

After you login, click the blue + Create button in the upper-left corner. You should see a dialog like this:

Select the HTML, CSS, JS template. Optionally name your project (which Replit calls a Repl), and then click the blue + Create Repl button.

You should now see something like this:

Welcome to the Replit editor! Some of this might look similar to the p5.js editor. The left tab shows the files in your project- the only one you care about for now is the index.html file. The middle tab shows an editor for your code, and the right tab shows the result of your code.

Try clicking the green Run button at the top of Replit. You should see “Hello world” display in the right tab.

Getting Started with Replit

The default HTML code that Replit gives you can be a little overwhelming. So for now, delete all of the code in the index.html file. You should see an empty editor:

Next, copy this code into the index.html file:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to my first webpage!</p>
  </body>
</html>

This code is a little more manageable. Click the green Run button at the top, and you should see this:

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

CodePen

For these tutorials, I 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:

Code Editor ?

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

I use CodePen because it lets me embed code directly in these tutorials, and I recommend using CodePen for experiments and small test projects. But for bigger projects, I’d recommend using Replit.

Other Code Editors

There are many other online code editors. Here are a few worth checking out:

Glitch is similar to Replit. The main reason I recommend Replit over Glitch is because Glitch gives you slightly more complicated starter code. But if that’s not a concern (you usually delete the starter code anyway), Glitch is great.
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!

HTML Tutorials

HTML Tags

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!