Explain like I’m five: How to make a website

Last weekend I asked my sister’s kid what she thinks my job is. I was hoping for something funny and wonderful, like when someone asked her what her dad does, and she said, “He sells clouds”.

Instead, she said, “You take things people make, and put them on the internet.” Which is pretty accurate, if not totally boring. I take things that people make — web designs, photos, illustrations, words — and I put them on the internet.

I was really hoping for something funny because it makes my blog more popular if I can tweet a hilarious quote alongside the link. Luckily she provided a total gem later, in the form of a joke she wrote herself.

What’s furry and floats in the sky? A hairy bum.
– My sister’s kid.

She’s a riot.

But you’re not here to read about bewhiskered buttocks. You want to know how to make websites. Well, here’s how I do it: I write some words, and I tell the internet where I saved them 🤷🏻‍♀️

If you didn’t read my last ELI5 blog post yet, you might want to read that one first. It’s where I explain the meaning of some words that I’m about to use to talk about websites and how to build them. And if you don’t read it, you’re not going to have a clue what I’m talking about.

I tried explaining websites to this cat before he’d read my last blog post.

Write some words

Computers don’t speak our language, and we don’t speak the computer’s language. So people have invented some new languages that help us talk to computers. We can use these languages to tell computers what we want them to do.

To make a website, you only really need to know ONE of these languages, and it’s called HTML. We can write some HTML on our computer that says what the website should look like.

We have to write these words in a text editor so that the computer understands them.

1. Find and open the text editor on your computer

All computers come with a text editor. Yours might be called TextEdit, WordPad, NotePad or something similar. If you can’t find one on your computer, or you decide you want a fancy one, you can download the one I use which is called Visual Studio Code.

Before we start, you might have to make sure your text editor is in plain text mode. Plain text means “no fancy fonts or colours please”, so that we don’t confuse the computer. When you open your text editor, if you see anything that looks like it’s for changing the font, colour or font size, look in the menu for something about switching to plain text.

You might need to Google this bit. That’s okay. Googling things you don’t know is a MASSIVE part of being a web developer.

(When cats allow you.)

2. Copy this code

Remember when I said that we have to write in a way computers understand? Well it looks like this.

<!DOCTYPE html>
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>ADD YOUR OWN TEXT HERE</h1>
<p>AND ALSO HERE</p>
</body>
</html>

The words between the angle brackets < and > help us tell computers which bits are which. Like labels. Or signposts. They’re called tags.

I won’t explain every word or line in this code block because it’ll take far too long and you don’t need to know right now. But if you want to learn more, Mozilla explain it really well. (And they too use cats in their examples.)

So copy the code inside the grey box above, and paste it into your text editor.
Don’t know how to copy and paste? Watch this video. (Sorry, it’s not cats 🐱)

3. Add your own words

Do you see the bit in the code where it says “ADD YOUR OWN TEXT HERE” ?
Delete those words and type something — anything — you want to. Like your name.

And then on the line below, where I wrote “AND ALSO HERE”, type something else. If you can’t think of anything, maybe you could write your age, or where you live.

It’s really important you don’t delete anything else, especially not any of the angle brackets < > !

4. Save the file as index.html

Save the file, and when you name it, make sure you type index.html as the name. Your computer might ask you if you’re sure. You’re sure.
Make sure you know where you saved it, because you’re going to need it in a minute.

Tell the internet where you saved them

When you want to go to a website, you might type something into Google and then click on it. Or, if you know exactly where the website is, you might type in the web address, or URL. This tells the computer where to look for the website. It’s a bit like your home address. It tells people where you are.

Web addresses

When we’re making the website, it lives on our computer. That means that only people on your computer can see it.

For everyone else to see it, we have to choose an address (a URL) and tell everyone what it is.

It’s like the difference between the people on your street knowing that you live in ‘the house by the big oak tree’. That’s enough for the people who know your street, but someone who lives in a different town won’t know where that tree is. And there might be another big oak tree somewhere else. So you have to give them your whole address.

Well, we’re going to worry about the full address for your website next time. This time, you’re just going to look at it privately on your computer. No-one else will be able to see unless you show them your computer.

Looking at your website

Remember that file we made a minute ago? The one called index.html? Do you remember where you saved it on your computer? Good.

Go to where you saved it, and then open it!

It should open in your browser (like Chrome, Firefox or Safari). If it doesn’t, you can make it open there by dragging it onto your browser icon and dropping it.

And there’s your website!

These parakeets just saw it, and they’re so proud of you!

You should see the first line you wrote in BIG letters, and then the line under it in small letters.

But it looks kinda horrible, doesn’t it?

So next time, I’ll show you how to start making it look nice, and how to put it on the internet so that OTHER people can see it. Won’t that be exciting.

--

--

--

Learning to code is not difficult, but we could all use a simpler explanation from time to time.

Recommended from Medium

Challenge 2 — Play Fetch

Install Redis Cluster with Ansible

NFC Based Attendance System

Intel is Preparing Wi-Fi 7 / 802.11be / EHT Support

patch updates Intel Linux kernel

Deconstructing Data Structures: Linked List

NoSQL Databases: Understanding the What? Why? When? How?

Progate Co-Founder Kenta’s “Egotistic” Beliefs in The Best Learning Experience for Coding Newbies

A Tactical Automation Case Study

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bekah McDonald

Bekah McDonald

Web developer. Talk to me about goats.

More from Medium

5 Useful HTML Tags You Never Knew Existed

Bootstrap: learn more than just making pretty websites.

Code screen

Gamify your learning

What I’ve Done So Far Pt. 1 (HTML)