Let’s make a website.

For realsies.

Yanis Vieilly

Follow

Published in

codeburst

5 min readMay 17, 2017

Picture of some random code so you know I mean it.

A short introduction

Introduction to the introduction

I was bored at home tonight and wanted to write something. So I tried to continue my still-in-progress science-fiction short story before realizing that all I had written up to this point was terrible.

Then I realized that I could just talk about anything else. It didn’t have to be a story. A technical subject maybe? Why not write about web development? That’s my job, after all.

Back to the 90s

The best thing the 90s brought us. Also, Armageddon.

As a kid, I remember having a lot of fun making websites with a free version of Dreamweaver. This software let you create websites the same way you would write a Word document. You didn’t need any programming skills, the code was typed for you while you placed the elements on the page. You could see the generated code and even modify it, which was perfect for me as I had just started learning about programming. That and a book about BASIC (another story for another day) had a big role in me wanting to become a developer.

By today standards, these websites were of course terrible (think yellow text in Comic Sans, starry background, Star Wars theme playing as soon as you load the page). But I was proud of having made them myself.

2017

I don’t know how you arrived on this page. Although something tells me you’re here to learn about website building. Or as we call it to sound super serious: web development™.

I needed a picture in this wall of text so we’ll just pretend he’s a web developer and his laptop is actually powered on.

You might have been on Facebook, or just read your favorite blog, and thought to yourself: “I’d like to make my own website”. There are actually already lots and lots of tutorials on the web to learn about it. I’ll try to keep this one as “human” as possible. Less “do this, type that”, more tips and terrible jokes. That might not be what you prefer. In this case, feel free to check one of the 100 000 other tutorials that might suit you better.

The most important thing is that you enjoy learning about developing websites, no matter which course you follow.

This is my first technical blog ever, I’ll do my best.

Requirements

None.

I mean, you need a computer. With a keyboard. Mouse is recommended but not required.

Other than that, I don’t expect you to know anything about code. The only thing that matters is that you want to learn how to build a website.

For this series of articles I’ll be developing on Windows. If you’re on macOS or Linux, the screenshots might be a little different, but the concepts and code you’ll learn will stay the same.

The editor

To develop, you need an editor. It’s a software which lets you write code. And, lucky you, you already got one installed on your computer.

drum roll…

That’s right. You can code with Notepad (on macOS, you can code with TextEdit).

It’s very basic, but it’ll get the job done for your first code. Later (probably in the next article), we’ll install another editor. Don’t worry, I’ll help you with that. For now, I just want to keep things as simple as possible.

Alright then! You’re all set. Let’s write some code.

Some code

Copy the following code to your Notepad:

<html>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

And save your file anywhere you want with the name hello.html. Important: just below the file name, in Save as type:, select All Files (*.*).

OK, are you ready? This is gonna be epic as f*ck.

Go to the folder where you saved the hello.html file and double-click on it. Your browser should open, and you should see something like this:

And just like that, you created your very first website!

I mean, holy sh*t right?

wait wtf

You might be wondering: what does the code mean? Alright, I’m not trying to create a terrible cliffhanger here, but this is actually the subject of the next article.

In the meantime, you could try to change Hello, World! with whichever text you want, save the file, and refresh the page in your browser (by pressing F5 on your keyboard). See what’s happening there? :)

Alright, I’m off, see you next time!

The next article is available here!

Note: This post is part of a series.

If you liked this article, feel free to like and/or share it to your friends who might be interested in web development. It would mean a lot to me!

I mean I won’t know if you shared it or not but it would be cool I guess.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.