how to make your own website from scratch
i believe that everyone should have a website. not only that, but i believe anyone can make one. HTML is nothing more than plain text with extra instructions to tell a computer how to show it to people nicely. if you know how to use Microsoft Word, you can learn HTML. this tutorial will teach you how to create a basic landing page from scratch if you just don't know where to start when it comes to HTML.
prerequisites
this tutorial is primarily designed for people who are on a computer. it also assumes you know the basics of how to use that computer, like how to manage files and stuff.
on that computer, you'll want a text editor installed that doesn't suck. i recommend VSCode as it is free and available on Windows, Mac, and Linux. you can use whatever you want though if you prefer another editor already. if you are on a Chromebook or a computer you're not able to install software on, there's an online version of VSCode available at vscode.dev as well.
part 1: HTML
HTML is a markup language for text. it tells the computer what to display, but not necessarily how to display it. we will tell the computer how to display our content later.
create a folder on your computer; i recommend inside your Documents folder, but it can be anywhere. create a file inside called "index.html", and open that file in your text editor (like VSCode).
once you have the file open, we're going to need to start with a bit of boilerplate code. all this does is make sure the web browser knows you're actually giving it a well-formatted modern HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
</body>
</html>now it's time to start making this an actual website. in the <head>, start by adding a title. you can make this say anything you want, and you can do the same for the rest. the provided text is just an example.
<title>My Amazing Website</title>in the <body>, we're going to need a few extra tags to keep everything nice and organized semantically. these will come in handy when you want to add some CSS flair to your site.
<article>
<header>
<h1>My Amazing Website</h1>
</header>
</article>feel free to save the file now and open it in your web browser of choice. you won't need to put it on a server just yet, just double click it! once it opens, it should look something like this:
okay, okay, that obviously isn't a good website. let's add some actual content now. let's add a horizontal rule underneath our header text, and a paragraph of text underneath all of that.
<header>
<h1>My Amazing Website</h1>
<hr>
</header>
<p>
This is an example of what a basic website can look like. This paragraph only exists to pad things out more so you can see what the text formatting looks like. You don't need to read all of this, but you can if you want. You can put whatever you want on your own website; your imagination is the limit!
</p>now, save the file again, and reload the page in your web browser.
now we're getting somewhere! how about some more text and an image?
<p>
Here is a picture of my cat:
</p>
<img src="cat.jpg" alt="a black cat">
<p>
Her name is Stoneteller. Isn't she cute?
</p>if you try to open the page now, you'll just see the alt-text we provided instead of the image, since the web browser can't find the image.
make sure to add the image in the same folder as your index.html file, and then it'll show up. if you want to use an image with a different name, just change the name in the HTML, just make sure it matches with the image you want to embed. as long as the file is in the same folder, you don't need to specify its location, just its name.
you may notice the image is currently a bit too large. don't worry, we'll fix that later. now, let's add a bit more text and list of links.
<p>
Here are some links:
</p>
<ul>
<li>
<a href="https://example.com">Example Link</a>
</li>
<li>
<a href="https://google.com">Google</a>
</li>
<li>
<a href="https://wikipedia.org">Wikipedia</a>
</li>
</ul>the <ul> says we're making an unordered (bulleted) list, and the <li> defines each element of the list. the <a> tag is your link (for some reason it's called an anchor) and the href can be replaced with the URL you'd like the link to go to. the text between the <a> tags can be replaced with whatever you want the link to show up as, since it doesn't change where the link goes to.
part 2: CSS
you may notice that this website currently looks terrible. we can fix that rather quickly, so don't worry. we can use a CSS stylesheet to tell the browser exactly how to show our webpage and make it look good. note that CSS is completely separate from HTML and has different syntax. this is because of complicated and stupid historical reasons.
you'll need to start by telling the browser to look for a stylesheet.
<link rel="stylesheet" type="text/css" href="style.css" />now, create a file in the same folder as your index.html called "style.css", and put this in it.
article {
text-align: center;
}now, everything is centered! how amazing!
oh wait, it still looks terrible. maybe even worse. let's tell the browser not to center our text elements.
article p, article ul {
text-align: left;
}now things should look a bit better.
let's make sure the image displays at a reasonable size now.
article img {
width: 80%;
max-width: 35rem;
max-height: 30rem;
object-fit: contain;
}if you're wondering what an "rem" is, it's short for "root em". it's a unit which is equal to the width of the letter m before you change the font size; it's good for basing layouts around as it won't get messed up by changing the font size, and is independent of the device's physical pixel density. the exact numbers are pretty arbitrary and chosen based off what i think personally looks good. feel free to fiddle around with them.
the "object-fit" property defines how an object (like an image) should be displayed. by selecting "contain", it will make we don't stretch or crop the image by accident.
having the "width" set to a percentage (of the parent) and the "max-width" set to a fixed size ensures that things look good on both wide and narrow displays.
finally, it's a good idea to give everything else a reasonable maximum width as well. this will ensure your website shows well on wide displays, and will fully wrangle in the image on exceptionally narrow displays as well.
max-width: 45rem;
margin: auto;the "margin" property is a shorthand which allows you to specify all the margins of an element faster. when given one parameter, it sets all margins equally, and when given two, the first parameter is the top and bottom, while the second is the left and right.
width: 85%;
max-width: 40rem;
margin: 1em auto;note the usage of em, as the margins should be dependent on the font size here. this will give a paragraph with bigger text more room to breathe.
now that you've gotten a good basic layout, feel free to mess around some more with it. change the colors and sizes and fonts, change the layout however you want! it's your website, have fun! MDN is a great resource for finding out more about how HTML and CSS work, and finding out what specific properties do and how to use them properly. don't be afraid to mess around with it!
part 3: making it a real website
in order to turn what is currently a couple of files on your computer into a website, you need someone to host them for you. thankfully, neocities provides such a service for free! simply register an account, then upload all the files in the folder you made. you'll end up with a link like this, which leads to your page: mothdotmonster.neocities.org
now you can go and share the link around to all your friends, basking in the glory of your amazing new website.