How websites work pt. 2 — building your own

In a previous post, I covered how websites work. This covered the basics of what makes up a front-end, back-end and APIs. In this post, I’m going to cover what you need to do, to make a website.

Assumption: This article is written about how to build a website, once you know how to code HTML and CSS. I highly recommend CodeAcademy for learning. This article can help those pre-learning, but to be able to do build a website you will need to know HTML and CSS.

Step 1: Pick your domain name (or ‘URL’)

Basically: what do you want people to type into their browser, for your website to appear?

I normally use GoDaddy for this, but NameCheap is pretty good too. You need to choose your name, and then go to these sites to find which domains are available. Typically you shouldn’t be paying more than £10 per year, unless it’s an intense domain like www.freefastcars.com.

It typically doesn’t matter whether you pick .com, .co.uk, .net, but my personal gut feeling is the following:

  • .com makes you seem international/American
  • .co.uk (/similar) makes you appear local
  • .io makes you seem modern and tech-focussed
  • .net makes it appear like you use Windows 95
  • .info makes you look like a brochure
  • .org feels like David Brent chose your domain name

This is what it looks like when you find a domain name that is available:

Step 2: Get hosting

Hosting is basically storage space that the domain points to.

Imagine hosting as buildings that store information, some are huge warehouses full of loads of information (like Wikipedia), some are small buildings, like private homes. Someone online wants to access your information, and the internet needs to know where to find this. So the person types in your domain name, and the domain provider goes “cool, I know where this information is stored”, and brings back the information on your hosting. Makes sense in a convoluted way? Good.

I normally buy hosting and a domain name together, because it means they automatically hook up. With GoDaddy (who I use but they aren’t user-friendly) this normally involves checking a box saying ‘I want hosting too’. I highly, highly recommend always choosing the smallest package, unless your business is already set up and getting traffic. You can always upgrade later.

If you buy them separately, you need to hook up your domain name to your hosting. I genuinely don’t know how this works, so just get on live chat with either company, and they’ll walk you through it.

Step 3: Download a text editor

This is for coding in. You could use any text editor, but I recommend using a coding-specific one. Sublime Text is my favourite, and it’s very simple. Apparently it’s quite powerful in terms of add-ons, but I’ve never worked out how to use them.

Step 4: Create your files

So — you need a number of things here. Create a folder on your computer, and call it your website name.

Then, create a new file using your text-editor, name is ‘index.html’ and save it. Create another one called ‘style.css’ and save this. The .html/.css bit will tell your computer and text-editor what type of file it is.

Typically each page will be it’s on file (for basic websites), and the ‘index’ name will tell the browser: this is the homepage.

Create a folder called ‘images’ in your main folder.

Step 5: Link your files

When you write your HTML and CSS, you want them to know what the other is doing. You do this by linking your files, with one line of code. In the <head> section of your HTML, the following code tells it where your CSS is:

<link rel=“stylesheet” href=“style.css” />

Now, anything you do in your CSS can find it’s way to style your HTML.

Step 6: Write your code

Write your HTML and CSS as you learned. This is the bit I can’t help with.

When you use an image, store it in the ‘images’ folder, and refer to it as:

source=“/images/imagename.jpg”

At any point, you can test your site by opening ‘index.html’ with your browser (right-click, ‘open with’).

Step 7: Set up your analytics

Presumably, you’ll want to know how your website is doing.

So go to Google Analytics, and make an account. You’ll need to fill out a few details like timezone, type of website etc.

Then, find the tracking code. I can’t remember how to do this off the top of my head and it can change a bit, so just Google it. You’ll find a box of code, which you just copy, and then paste into the bottom of your HTML, just above the </body> tag.

This won’t affect your website at all, except to track what people do, where they’re from, etc. and send this to Google Analytics. You can check this at any time, but it can take a few hours to ‘switch on’ fully.

Step 8: Get your site online!

So you have your folder, and when you click on ‘index.html’ it loads like you expect. Great! You have a website working on your computer, or “locally”.

But you want it to work for people not using your computer. Go to your hosting, and find something called a ‘File Manager’ or ‘Uploader’ or similar. Once you get a bit more advanced, you can use FTP, but for now this will do.

Simply upload all your files, to the hosting. Test by visiting your domain name, and you should be able to see your site.

WELL DONE, YOU MADE A WEBSITE!

Cocktails all round.

Show your support

Clapping shows how much you appreciated Graham Paterson’s story.