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.
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.
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.
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:
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.
There are many other online code editors. Here are a few worth checking out:
Don’t be afraid to try out a few different editors and see which one you like the best!
Now you should have a code editor set up. Next, you’ll start writing your own HTML!
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!