Your first webpage with HTML and Netlify
This article is part of a series:
- Your first webpage with HTML and Netlify (you are here)
- Styling your first webpage with CSS
Ok, you have decided it would be cool if you knew how to code a webpage. Now what? This article is going to take you from nothing to having your own website on the internet. Provided you have a computer and an internet connection, the following guide will get you online with your very first webpage—for free.
Tools of the trade
To get started, you need two things:
- A web browser
- A text editor
Fortunately, essentially every computer comes with both of these! Modern web browsers are pretty awesome so it doesn’t really matter which one you choose. If you’re looking for a recommendation, I use and enjoy Firefox.
Although your computer does come with a text editor (like Notepad on Windows or TextEdit on Mac), coding webpages is easier if you get a text editor that’s made for coding. There are a lot of options in this space, which I encourage you to explore when you’re ready. But I recommend you download and install the free editor from Microsoft, Visual Studio Code (I’ll refer to it as VS Code).
The power to publish
The next thing to consider is what you want to say on your website. What do you want it to be about? We live in an amazing time when just about anyone can publish something and make it available to everyone. This is the number one reason I think everyone should have their own website.
Use whatever writing tool you’re comfortable with and literally write down some content for your website.
If you need some guidance, try this:
- Write a short paragraph about yourself.
- Make a list of your favorite interests or TV shows or music (or all of the above!).
- Write down one goal that you have.
Of course, feel free to write less or more. You can have several sections on the page if you would like, each with its own heading. You may even decide that you need multiple pages. That’s cool, too.
A website is just files and folders
Most of the big websites that you use every day are more complicated than that. But at its simplest, a website is just a collection of files that are linked together.
So your first step needs to be to create a folder on your computer. Usually, you use your web browser to connect to websites over the internet. But you can actually just open a website from your computer if you want—and that’s what we want to do here. We’re going to work on our website on our own computer before uploading it to a server on the internet.
Create a folder somewhere on your computer. Name it, for example,
my-website.
Now we are going to create a file for our homepage. Create a new file
inside the folder you just created. By convention, the name of our
homepage file should be index.html.
Open that file in your web browser 1. You should see a bright white page—an empty canvas. Don’t worry, we’re about to fill it in.
Writing your first HTML
If you chose Visual Studio Code, go ahead and open it. Otherwise use whatever text editor you prefer. If you’re using a different editor, your steps may differ slightly from those in this guide.
Once you start VS Code, click the “Open Folder…” link. Open the
my-website folder you created earlier. You should see your
file in the sidebar. Click it to open it.
The first thing we’re going to write is:
Hello world
Save it and open it in your browser. Congratulations, you made a webpage!
The browser displays this ordinary text because we haven’t told the browser anything about this text. We need to mark it up.
<h1>Hello world</h1>
Make this change and refresh your browser. The text should now be styled bold and a good bit larger. That’s because we’ve used HTML to describe this piece of text as a heading—specifically, a heading level 1.
HTML uses tags to describe content. In this case, we’ve wrapped
the text, “Hello world,” with the <h1> tag. Notice
that to close the tag, it’s written the same way but with a
/ right before the tag name.
Tagging your content
“Hello world,” was just a test. Obviously, we would like to use our own
content. Copy and paste your content from your writing tool into your
index.html file. Now you want to use tags to describe your
content to the browser. There are over a hundred tags in HTML. But
knowing just a handful of them is plenty enough to get you started.
For example, you can use the <h1> tag we used earlier
for the main heading of your website.
If you wrote an intro paragraph, you can surround it with the
<p> tag (“p” for “paragraph”). Don’t forget to put
the / in the closing tag like so: </p>.
If you included a list of any kind, you can mark it up like this:
<ul>
<li>My first thing</li>
<li>Another thing</li>
<li>The last thing</li>
</ul>
This is an example of nested tags. Each list item is marked up
using the <li> tag. All three list items are wrapped
by the <ul> tag, forming an unordered list,
which is just HTML-speak for a bulleted list. If we wanted them to be
numbered—that is, an ordered list—we could use the
<ol> tag.
Here’s a very basic example:
<h1>My awesome website</h1>
<p>My name is Blake. I enjoy making websites and writing articles. I think everybody should have a personal homepage.</p>
<h2>Favorite board games</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Monopoly</li>
</ul>
<h2>Favorite TV shows</h2>
<ul>
<li>Stranger Things</li>
<li>Cheers</li>
<li>Game of Thrones</li>
</ul>
When rendered in the browser, it looks like this:
The head and the body
Our HTML document isn’t technically correct. It’s missing some useful information about the document itself. For example, take a look at the title that is displayed in the browser tab. It’s pretty ugly and useless.
An HTML document actually consists of a few parts. First, every HTML file should start with the following line of code:
<!DOCTYPE html>
This lets the browser know that this is an HTML file.
Following that, there’s the <html> tag, which
contains two tags: <head> and
<body>. The <head> tag is for
information about the document that is invisible to the user. The
<body> tag is for the page content.
Our document structure should look like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...page content...
</body>
</html>
We can change that pesky tab title by adding one to our
<head> tag like this:
<head>
<title>My awesome website</title>
</head>
And as a good practice, we should tell the browser what character set we are using in the document (which, unless you are purposely doing something else, should be utf-8). We can do it like this:
<head>
<meta charset="utf-8">
<title>My awesome website</title>
</head>
You’ve just met the <meta> tag, which is one of the
tags in HTML that doesn’t need to be closed because it doesn’t contain
content. That said, HTML tags can have attributes. The most
famous one of those is probably the one that is required to make a
clickable link, the href attribute on the anchor,
or <a>, tag.
<a href="https://able-dev.com">This is a link to my website</a>
Have yourself a cookie, because you just coded your first webpage.
For reference, your entire index.html should look something
similar to this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My awesome website</title>
</head>
<body>
<h1>My awesome website</h1>
<p>My name is Blake. I enjoy making websites and writing articles. I think everybody should have a personal homepage.</p>
<h2>Favorite board games</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Monopoly</li>
</ul>
<h2>Favorite TV shows</h2>
<ul>
<li>Stranger Things</li>
<li>Cheers</li>
<li>Game of Thrones</li>
</ul>
</body>
</html>
Adding pages to your website
It’s totally fine for your website to consist of only one page. But chances are that you will want more. Let’s create a journal page and set up navigation between them.
First, create a new file in your my-website folder called
journal.html. Instead of typing the whole page structure
out, let’s copy and paste our homepage code over to this file and empty
out the <body> tag. It should look something like
this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My awesome website</title>
</head>
<body>
</body>
</html>
Let’s make a heading and our first entry:
<h1>Journal</h1>
<article>
<h2>My first entry</h2>
<time datetime="2019-09-25">September 25, 2019</time>
<p>I'm having a blast learning HTML and setting up my first website!</p>
</article>
We are introducing some new tags. We have several tags that we’re saying
makes up an <article>. We’re also using a tag to mark
up the date of the article—the <time> tag. Inside the
tag it contains the nice human readable date. But it also has a
datetime attribute that contains a machine readable
version.
Now that we have a journal page, we need to add a way to get to it from
our homepage. We’ll add a navigation list. Let’s put it right underneath
the <h1> in index.html:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
Okay cool, we’ve created a navigation list. We can just copy that in
paste it right under the <h1> in
journal.html. With this navigation list on both pages,
visitors to your website will have a way to move back and forth.
Your website isn’t doing much good just sitting on your computer. It’s time to get that thing on the internet!
Hosting your website
Hosting your website refers to putting your HTML files on a web server. There are a lot of options here, but for ease of use and cost, we’re going to use Netlify.
Go ahead and create an account at Netlify. Once you are logged in, make sure you are on the Sites tab. Toward the bottom of the page you should see an area where you can drag and drop your site folder. Go ahead and do that.
You will see that your website gets uploaded and assigned a randomized URL. Your site is now live! If you want, you can click the Site Settings button and change the Netlify address to something memorable. For example I changed mine to https://able-dev-example.netlify.com/.
You can also follow the instructions for adding a custom domain name.
You did it!
Take a moment to appreciate what you’ve accomplished. You started with a blank slate. You wrote some content and marked it up with HTML. You made two pages and linked them together. Then you uploaded your site to a web host. Your website is now live for anyone to visit.
There’s a lot that this guide left out. For example, our website looks pretty plain. Wouldn’t it be cool if we added colors and other styles? That’s for another day (but if you’re feeling adventurous, do a web search for “CSS”). Feel free to continue to work on your site locally on your computer. When you’re ready to upload your new changes, go to your site’s dashboard page in Netlify and click on the Deploys tab. You can drag and drop your folder there to replace the existing site with your updated one.
Have fun with your new powers—and only use them for good!
- On Mac, you can drag the file to your browser’s icon on the dock. On most systems you can also use the File menu. ↩