This post is more than three years old so may contain incorrect information, or opinions I no longer hold.

Making A Website - 01 The Basics

09 Jan 2020 | ~6 minute read

Welcome to the first post in my series Making A Website. This series of posts will take you through all the steps needed to make your very own website from scratch.

It will have multiple pages including a blog, a modern, clean design, beautiful typography and a raft of other features.

I have made a dedicated website that follows this series. It will accompany these posts, so head over to mylightwebsite.kevq.uk to check it out.

Neocities

The first thing we need is somewhere to host our website. There are literally thousands of places you can host your website, but Neocities makes it super simple.

Once you're signed up, login to your Neocities account and navigate to your dashboard. Here you should see a very basic website that Neocities automatically creates:

Delete all the files within the dashboard apart from index.html. This is done by hovering the mouse over each file and selecting delete.

Now click on index.html to edit it and replace all of the contents of the file with the following HTML code:

<!DOCTYPE html>
<html>
<head>
<title>mylightwebsite.kevq.uk</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to the first stage of my <i>Making A Website</i> series. As you can see, this page is extremely basic ans is covered in more detail on my first blog post in the series, <a target="blank" href="/making-a-website-01-the-basics/">01 - The Basics</a>.</p>
<p>You can download the raw files for this step (and all other steps) from the <a href="/downloads.html">downloads page</a>.
<p>OK, let's move on to step 1.1, where we start looking at some basic CSS coding.</p>
<a href="step1.1.html">On To Step 1.1 --></a>
</body>
</html>

Breaking It Down

Let's break the site down to it's different parts and explain what they all are. After all, what's the point in making a website if you don't learn something new.

For now, the only thing you need to edit is the line that starts with <title>. Replace my name with whatever you want the title of the webpage to be. The rest you can edit as you see fit. Just play around and have fun with it.

Challenge: see if you can work out how to add a bulleted list to your webpage.

These humble beginnings will eventually grow into a pretty nice looking website. But for the time being, this is what your little website should look like:

Adding CSS

Now we have a really simple (and quite ugly) website, let's look at adding some basic CSS so we can make things look a little nicer. Return to your Neocities dashboard and create a new file called style.css.

Edit the file and add the following CSS code to it:

body {
  background: #fff;
  color: #333;
  font-family: sans-serif;
  display: block;
  text-align: left;
  width: 800px;
  margin: 0 auto;
}

This CSS, or Cascading Style Sheet, will tell your webpage how you would like the <body> element of the site to be rendered. We have picked some colours (#fff is white and #333 is dark grey), a font and also told the body to display in a block that is 700px wide.

Challenge: See if you can change the colour of hyperlinks to red.

The next step is to edit the index.html file so that we tell it to use the stylesheet we just created. We do this by adding the highlighted <link> element on line 4 to the <head> of the website:

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<title>mylightwebsite.kevq.uk</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Woah! Things are looking a lot different already, right?</p>
<p>We have a better looking font, and the content is now displayed in a nice block on the page.</p>
<p>We've now added a basic Cascading Style Sheet (CSS) file which has formatted the site a little to make it more appealing. <b>No <i><span style="font-family:TimesNewRoman;">Times New Roman</span></i> here!</b>
<p>Just like Step -01, This page is covered in more detail on my first blog post in the series, <a target="blank" href="/making-a-website-01-the-basics/">01 - The Basics</a>.</p>
<p>You can download the raw files for this step (and all other steps) from the <a href="/downloads.html">downloads page</a>.
<p><b>Step 02 hasn't been published yet. If you want to know when it's release, <a href="/feed">subscribe to my RSS feed</a>. Once it has been released, this page will be updated.</b></p>
<a href="/index.html">Go Back Home --></a>
</body>
</html>

Save the index.html file and reload your website. It should now look a little nicer than it did before. The font should have changed and the page's contents should be displayed in a nice block.

Get a domain (optional)

Once you're all setup using Neocities, your website address will be username.neocities.org. I personally think it's best to have a custom domain for your website, but this is totally optional. If you do decide to get a custom domain, make sure you choose the right one.

I personally use and recommend NameCheap for domain registrations. I've been with them for many years and I think they're great.

In order to use a custom domain with Namecheap, you will need to upgrade to their supporter plan.

A great start

That's it for this post. We're making good progress, but there's still a long way to go. In the next Making A Website post, we will look at the following:

If you want to download the raw files for this series, you can do so here. I will update the page after every post with latest website files.

Reply by email

← The one before
How To Add A Custom Colour Palette To The Gutenberg Editor

Up next →
Excerpt vs Full Content?

Want more?

So you've read this post and you're still not satisfied? Ok then, here's some other stuff for you to do: