How to Make a Website
(2018 Ultimate Guide)

Hosting, Wordpress, Web Servers, HTML, CSS, JavaScript?
... Someone Please Explain This!

Let's Begin

A Brief Introduction

One of the most searched phrases on the internet is how to make a website. Believe it or not, it's searched a jillian times a second (totally made up), so it's no surprise there are thousands of articles trying to explain just that.

I thumbed through the first 2 pages of the search results and the word that came to mind was "lackluster". Most of the articles are aimed at selling something or are simply littered with horrible information.

If only we could bring back the good ol' days when you could learn something without a catch ...

We're gonna go ahead and make that now.

In this article, we're going to provide the world's most complete approach on building your own website (the right way) and will also explain a few simple concepts along the way.

Shall we?

Domain Stuff

Getting Started with Domain Registration

It's often stated, "you should choose a domain name that has your target keywords in it, this will help with SEO". Sound familiar?

Here's a small example for those of you who are raising one eyebrow right now 🤔.

You own a flower shop in your hometown, let's say Boise, Idaho. I know you don't really own a flower shop in Boise but stick with me.

You once heard from your brother's friend's cousin "you should buy 'boiseflowershop.com' because when people search 'boise flower shop', you'll show up number 1!".

Let's take a step back for a second. First off, it's not 1995 anymore and those "SEO Strategies" simply won't work. Google has become much smarter in recent years and they are able to recognize the desperation in keyword-heavy URLs.

Here's an article explaining it, in the rare case you don't believe me 😜.

The rules here are simple - well there really are no rules.

Find a domain name that means something to you - or means nothing at all. Maybe it's your business name, maybe not. Take fencepencil.com for example, what does that even mean?

It means ... Bagel (meaning "absolutely nothing" due to its shape, which resembles the number 0).

And we rank very high for terms such as SEO company (pssst, look at #1).

Moving on!

Domain Registration

Find and purchase your domain name.

The time has come to get your domain name registered (a fancy way of saying "paid for").

Click this link to sign up for AWS. Just do it. Don't worry, all the links in this article open up in another tab.

Pause ... What's AWS?

It's short for Amazon Web Services, which is one of the most powerful toolsets on the internet. We're going to use Amazon to register a new domain using one of their many tools called "Route 53".

Once you are done with the initial signup, let's head over to Route 53, which will act as the home for your new domain name.

Click the link above or just search "route 53" in the main section.

Once inside, you'll find a section which allows you to search. Just type in your desired domain name in the search box to check availability.

Here's my example:

AWS will let you know if the domain name you aspire to own is already taken and will give you some suggestions. Keep searching until you find something that you'd like to use on the internet.

I'd walk you through the process of purchasing the name, but it's fairly straight-forward. I have faith you'll reach the finish line.

Side Note: There are now lots of different TLD's (top level domains - .com, .net, etc...). Some of the newer ones, such as .io are a bit more expensive. Just something to keep in mind.

Once this is complete, we're ready to go through some hosting options ...

Web Hosting

Ready to find out what "The Cloud" is all about?

Just a small FYI ... "The Cloud" is nothing more than someone else's computer. Simple as that.

Confused? Let's elaborate.

In this scenario, that someone else's computer happens to be a "web server". A web server is nothing more than a powerful computer with special software installed to serve your website files to folks who request it via a web browser.

You may be wondering, "how does all this work?".

Here's my most basic explanation.

1. You type facebook.com into your browser and hit enter.

2. The browser contacts DNS to lookup the IP address of facebook.com (don't worry about DNS and IP for now, we'll cover that later).

3. An HTTP 'GET' request is sent to the IP address it finds, basically asking the web server if it can view a copy of the web page.

4. The web server responsible for facebook.com sends an 'OK' message of sorts along with the files to display the website to you.

If the website uses HTTPS, a VPN tunnel will be created and all the traffic will be encrypted. This is why banks and other places with sensitive material are required to use HTTPS.

Now that you are a cloud and web server expert, it's time to choose our hosting environment.

Hosting Environment

What to look for.

The options here seem endless and can be very overwhelming, especially to a newcomer. Here's all you need to know about hosting.

Rule #1

Never, I mean NEVER use anyone but a third-party solution. Let me explain what I mean.

Sometimes people want someone else to build them a website. Nothing strange here, business owners are busy people so they hire a web design company such as fencepencil (shameless plug) to do it.

Please keep this in mind. "Not all web design companies are created equal". What do I mean by this?

A web company who says "After we're done building the site we can also host your website, using our servers" - I want you to slowly start backing away, quickly turn around and then sprint to safety.

Here's why.

What happens when you and your web design company have a difference of opinion and you want to start looking for someone else to manage your website?

I'll tell you what happens.

Since you agreed to have them host your website on-premise, they have full control over it. There's nothing you can do but beg them to give you your files back.

Often they'll "hold it for hostage" if they are hanging on to a grudge. Trust me, avoid it.

The other reason relates to security. If they don't keep all the necessary patches on their web servers, you could lose everything to a malicious attack (something that happens multiple times a day).

Rule #2

Cheapest isn't always the best option.

Just like anything else in this world, there are roughly 657 choices when it comes to web hosting environments.

Most people will think, "I don't want to put all my money into the hosting of my website". I understand your thought process.

Here's why it's not the best idea.

One of the top 10 Google ranking factors (items Google considers of high importance when ranking websites) is site speed.

What do I mean by "site speed"?

I'll answer with an example.

Click on this link, which will open up our homepage in another tab...

Notice anything? If you noticed the site took less than 1 second to load, you'd be correct. This is because our website has been optimized to increase overall loading time.

Why is this important?

Besides Google loving it, think about your own web browsing experiences. If you land on a website that doesn't load quickly, do you stay on that site and wait or do you hit back and click the next link down the page?

Come on, you know you've done it. We've all done it. Nobody likes to wait.

Site speed has everything to do with user experience. And after all, we create these fancy-looking websites for our visitors. I'm doing this for YOU. How about a little appreciation!

If you want people to enjoy their time on your website, then site speed better be near the top of your importance ladder.

I could go on for several hours on this topic alone but I'll spare you the agony of my endless rants.

Rule of Thumb; more speed = more happy people. We like happy people 😄.

Choosing a Hosting Provider

Make the right choice for you or your business.

If you want my opinion (most people don't), I'd say there are only a few good choices for website hosting.

This decision also boils down to static vs. dynamic websites (which we'll get to).

Here is a list of my top 4 choices (not in order).

1. Bluehost

2. SiteGround

3. Amazon Web Services

4. GitHub Pages

You might be thinking, "what about GoDaddy or Wix?". Those would fall under the category "what to stay away from".

The list here includes Wix, GoDaddy, Squarespace, Weebly etc ... basically, companies that have their own commericials on TV.

Why?

The way these companies implement their platform makes it very difficult to rank for anything. These big names rely on a technology called AJAX (asyncronous JavaScript and XML) which basically means auto-generated permalinks and limited SEO best practices functionality.

Here's an article on it in detail. Lot's of juicy comments as well.

Yes, your website will look like it's been professionally built (sometimes) but will lack where it counts most - showing up in search results.

I've used the 4 companies mentioned above for different projects over the years and it's really the only way to go.

Any other avenue taken is simply a waste of time.

Dynamic Websites

Server-Side Dependancy

Bluehost and SiteGround fall under the "dynamic website" category.

Oh boy, here we go again. Hang tight, I'll keep it short.

On your journey before finding this article, you might have stumbled across a platform called Wordpress.

Wordpress is by far the most popular dynamic website platform on the internet. I think it's somewhere around 30% of all the websites on the internet use Wordpress. That's insane.

But, It's for good reason.

Wordpress is very powerful and the size of the community behind it (people building things to make it better) is huge.

The biggest downfall of Wordpress and the like is the server-side dependancy that I mentioned. This basically means your website has to be rebuilt every time the page needs to be loaded.

The backend has to talk to a database and load the site "dynamically" every single time. Needless to say (but I'll say it anyway) there is a big issue with page speed.

With that being said, there are many options to increase speed for your Wordpress website.

Static Websites

ZERO Dependancy

Now we have the notion of a static website.

Take this website for example. fencepencil.com is a static website. It was written using HTML, CSS, and a little JavaScript. And it depends on ... nothing (other than AWS uptime, which is like 99.9999%).

The major difference is speed and freedom, but developing a static website takes some time learning a few new programming languages.

We'll get to the details of static websites in a bit.

Dynamic Website Hosting

Shared, VPS and Dedicated

Bluehost and other dynamic hosting companies offer hosting packages with fancy names.

Some of these terms include Shared, VPS and Dedicated.

Now, before you go "Googling" all these new words I've just introduced, please allow me to explain.

Here's the "human-friendly" version of what all that means...

Shared Hosting

Shared hosting is the simplest form of website hosting there is. It means exactly what it sounds like. You and a bunch of other websites share ONE server and its resources (CPU, Memory, Storage) and are divided amongst the group.

Shared hosting is also the slowest option. If you have a simple blog or a small restaurant in which doesn't require a lot of resources, then this option will be just fine.

Don't worry, we can help with the speed - as much as possible. We'll touch on that a bit later.

VPS Hosting

VPS stands for "Virtual Private Server". This is a fancy way of saying "Shared Hosting but Segregated".

How about an example!

Without diving too deep into the world of Virtual Computing, imagine a gigantic computer - like as big as your house. Now imagine 500 normal-sized computers inside of it...

Ok, horrible example but it gets the point across. VPS simply means you get one of those normal-sized computers inside the giant one, all to yourself. Sort of a Shared/Not-Shared environment of sorts.

In other words, you get dedicated resources but still share the outer-shell.

All said and done, you'll get a faster website and a better user experience.

Dedicated Hosting

Last but not least is the notion of dedicated hosting.

Back to the giant computer analogy, dedicated hosting is the house-sized computer.

You get all the resources dedicated to you. See what I did there 🙄. Don't roll your eyes at me!

Static Website Hosting

The best of the best

AWS (yes, Amazon Web Services)

I know what you're thinking. "Amazon isn't a hosting company".

While that might be true, it is also true that Amazon can host your website.

In fact, Amazon hosts our website (along with a few other small companies such as Pinterest and Instagram). Check out this link, then come right back, I'll wait...

What you just saw might be a bit mind blowing but it's actually a simple concept.

AWS has a service called "S3". Simple Storage Service (3 S's!) is just a place in "the cloud" to store files. They have buckets (think of them as folders), which you setup to store files in.

It's as easy as creating a bucket with your domain name and giving that bucket the ability to act as a tiny web server.

And when I say 'tiny', don't take this literally. Those buckets have the power of AWS behind them which is powerful enough to serve The Netflix library to the entire world (yes, Netflix uses AWS) 🤯.

The Beauty here is price. For a fraction of what you'd pay at Bluehost you can utilize Amazon to host your website.

What's the catch?

There really isn't one, excpet for a small learning curve and you won't be able to use the beloved Wordpress.

I know what's going through you mind right now. "That sounds good, I'll have that".

Wait a minute, I have another article on that! Clicky HERE; it goes in to the why's and the how's of a static website.

... You're welcome 😎

Be sure to come back or save that for later, because we ain't finished yet.

Don't you want to learn HOW to build your site? Yes, thought so.

Let's take a journey that way now ...

Web Development

Let's build us a website

Web development comes down to 2 basic categories, static and dynamic. Yes, I know we've already covered it. Bare with me here.

Aforementioned above, static websites use HTML, CSS, and JavaScript.

Do dynamic websites use them, too?

Yes, but differently.

First, let's understand how these languages work. Don't worry, I took the technical jargon out and tossed it in the trash.

What is HTML?

HTML is quite simple, don't let it scare you. Basically, it's a computer language that web browsers use to display items such as text, images and video on web pages.

Let's think of it as the STRUCTURE of the site.

What you see below is a snippet of this page, in HTML.

<!DOCTYPE html>
<html>
<head>
<title>How to Make a Website - The Complete Guide</title>
</head>
<body>
  <p>Let's think of it as the STRUCTURE of the site.</p>
  <p>What you see below is a snippet of this page, in HTML.</p>
</body>
</html>

Look inside the body above. Those 'p' tags are what hold the 'p'aragraphs for the page. Simply put, you wrap text, images, and links in "tags" like this and that's how your browser delivers you what you see on the screen.

On a high level, that's really are there is to it. Becomming more familiar with the different kinds of tags will take some further reading.

Learn more about HTML from Mozilla, they do a great job explaining it.

What is CSS?

If HTML is the structure, CSS is the VISUAL and is used to style HTML.

You might want to Bold something or give it some Color.

This is all done with CSS - from layout to font-family and everything in-between.

The example below shows how that sentence was styled.

The CSS
.text-bold {
  font-weight: 700;
}
.text-pink {
  color: #EF4E7B;
}
The HTML
<p>
You might want to
<span class="text-bold">Bold</span>
something or give it some
<span class="text-pink">Color</span>.
</p>

CSS-Tricks is a great place to learn all about CSS. I suggest you bookmark the website and visit often.

What is JavaScript?

JavaScript is the language which interacts with CSS.

How about a small example.

Scroll this page up and down and look at the words below - you'll see them jump in and out of the screen ...

Watch me appear and disappear when you scroll

JavaScript has the ability to make CSS do things, based on scroll or click. Pretty cool, eh?

We're not going to get too heavy into JavaScript, that could go on for several days.

I simply wanted to show you that it can make your website "pop".

Let's move on to getting started with Wordpress.

Wordpress

How to get started

Until you learn how to write HTML, CSS, and JavaScript we're going to stick with Wordpress.

Let me give you some examples of websites that use Wordpress, so you can see what they look like ...

Sony Music

Microsoft News

Disney

Are you surprised?

Like I said before, Wordpress is powerful and there are a lot of big name brands using it.

Setup Hosting

Let's head on over to BlueHost to setup some hosting for your new domain name.

Clicky Here to sign up, and then click the "get started now" button.

Pro tip: you don't need to register your domain at the same place you host it.

The process is fairly simple, just pick a hosting plan that suits your needs and fits with your budget. You can always change this later.

The trick here is to NOT fall subject to any "add-ons". No, we don't need domain privacy, and we also don't need "spam expert", whatever that means.

My advice is to stick with the base hosting package and don't worry about everything else they have to offer.

Install Wordpress

Installing Wordpress on your web server is very simple and should only take about 10 minutes.

Once you login for the first time, you'll see hundreds of options to choose from.

Just ignore everything else and search for Wordpress.

Installing Wordpress comes down to a few options, basically creating a username/password and a database.

Follow the steps to setup the overall framework.

Once this is done, head over to your url followed by /wp-admin.

For example, https://mynewdomainname.com/wp-admin

Once in, you'll be inside your Wordpress Dashboard. This is where you can do things such as create new pages and posts or change your website theme.

To get familiar with Wordpress in general, I suggest learning the basics. Here's a good link to get you started.

Conclusion

This is only the beginning

I hope this article helps you springboard your web development career ... or at least helps someone who is curious about how websites are built and the work involved.

Let us know if you get stuck on something, we are here to help. Contact us anytime.