HOW TO MAKE A WEBSITE
A detailed and complete step-by-step guide
Topics covered
STEP 1: Technology selection
Do you have the perfect website idea?
Your first step on the journey of creating a good-looking, interesting, and responsive website, is to decide which technology you should use.
There is one exception, if you have a great business idea and a great name in mind already, secure the domain name first, and then come back to this section.
Anyway, there are quite a few technology/tool options to choose from, but there is no option that is perfect for everyone in every case.
I could, of course, do a wild guess without knowing anything about what kind of website you want to make. If you want me to make that guess, I recommend that you try to create a website with WordPress, the most popular Content Management System in the world.
If you do want to decide on your own, I will go through the different options, their strengths, and weaknesses, so that you can make the best possible choice for your website.
I’ve divided the options into four groups:
I have sorted them by the amount of effort it would take to create a basic responsive website, where Website Builders would be the easiest and From ‘scratch’ the most time-consuming.
That doesn’t mean that Website builders are best, they have their drawbacks like the rest of them.
Let’s have a closer look.
Website Builders
To avoid confusion, I’m talking about online website builders.
When working with website builders you will be editing your website directly in the browser, so you don’t have to install anything on your local computer.
The editing will mainly be through drag-and-drop functionality in order to easily build websites without knowing how to code.
Website builders are usually provided as a bundle-deal together with domain registration and hosting, which makes this the easiest option for beginners.
The best part? Some website builders will let you create a website for free. This is the only option where it’s possible to create completely free websites.
What are the drawbacks?
Who should consider website builders?
If you are looking for a way to create a completely free website, then this is the only option you have.
It’s also great if your planning on creating a basic blog or portfolio, you want to have the site up and running right away, and you don’t mind paying some extra dollars for the ease of use.
Sounds interesting?
If you are willing to just spend a bit more time in order to save some dollars and have even more flexibility, then read the next section about Content Management Systems.
Content Management Systems(CMS)
This category refers to free open source Content Management Systems (CMS) that does not enforce any particular domain registrar or hosting provider.
Content Management System is a computer application that allows users to easily create, modify and publish content on the web without knowing how to code (HTML, CSS, JS, etc.).
Since they make it so easy to create an update content, a CMS is a really good option for websites that frequently update their content. That would typically be websites such as blogs, news sites, portfolios, and online stores.
Compared to the website builders, it usually also provides the user with more flexibility and customizability, and there are two reasons for that:
So, if you want drag-and-drop functionality like the website builders have, don’t worry, just install a drag-and-drop plugin.
Furthermore, if you go for a CMS (or any of the more advanced options) you get the possibility to separate domain and hosting, which is something I recommend if you’re a bit serious about the website you’re making.
Any drawbacks?
There are still limitations to what a CMS could (or should) do with regards to flexibility and customizability. E.g. you would not want to use a CMS if you intended to create a website/application like Twitter, because it would require a lot of new custom functionality.
Security can sometimes be an issue, but it’s mostly because people forget to keep their CMS and plugins up to date.
Who should consider Content Management Systems?
Anyone making a website that requires frequent updates of website content (text, pictures, products) like blogs, portfolios, and online-stores should have CMS on the shortlist of possible options.
Anyone that values the ability to easily switch to the best hosting/domain/email providers at any time, but still requires a tool that doesn’t require coding or hiring a developer.
Want more info?
If you’re thinking of making a website that has a lot of unique features (like Facebook), could have been a mobile app (like Instagram), or is very interactive (like Netflix), then you should probably read about Web frameworks instead.
Web Frameworks
Now it’s getting a bit more advanced because here you will actually have to write a lot of code (HTML, CSS, JS etc.) by yourself.
If you have never coded before, it can feel a bit overwhelming.
Web frameworks can make that journey a bit more manageable, but it will still require quite a bit of effort if you’re a beginner.
A Web framework is a software framework that intends to ease website development by providing code libraries, structure, and tools that simplify common development tasks.
Examples of such common development tasks could be user authorization, creating a responsive layout or interacting with a database.
The idea is at least to save time and avoid frustration by not “reinventing the wheel” every time you’re making a new website.
The benefit compared to website builders and CMS, is that you’re now the one writing the code, so there’s no longer any limitations to what kind of functionality you can add or create.
Some drawbacks
Should you choose a Web framework?
If you’re considering making a website that has a lot of interactive or unique features, web frameworks should at least be on your list.
Facebook, Instagram, Twitter, and Netflix are just a few websites that have chosen this path, simply because they were making something unique with a lot of custom features.
Starting out on a new development project? Make sure you have the developers required and enough time to invest.
Are you considering a job as a website developer? Learning one of the more popular frameworks can definitely increase your chances on the job market.
A beginner? Creating your own website with a framework can be a great learning experience, and some of the frameworks have a lot of really good tutorials to get you started.
Ready for a small website journey?
If your goal is to create a website/application that needs to be as lightweight and fast as possible, where every byte counts, and you don’t manage to find a framework that is a perfect fit, then you might have to consider writing everything from scratch.
From 'Scratch'
Doesn’t coding scare you? This option has a lot of it!
The truth is that not that many developers create websites entirely from scratch anymore. Most of them use one or more of the options above, or they have made a framework/coding library of their own through many years of developing websites from scratch.
But it’s possible to start entirely from scratch, and sometimes it might even be necessary. It would typically be to ensure that every single bit of code is as optimized as it can be for that specific site or application.
There are several benefits:
And of course, there’s nothing stopping you from reusing code that you’ve found on trusted online sources, or even from web frameworks. After all, the goal is to be in control of all the code, not spending the most amount time.
Drawbacks
The most obvious drawback is that you will most likely spend more time developing your site than you would have with the other options.
It will also require a lot more research to ensure that you’re doing things correctly, such as:
- Ensuring that you’re creating a responsive site
- Ensuring that you’ve taken all necessary security considerations
- Ensuring that you’ve covered all browser incompatibilities
Should you create a website from scratch?
Does every byte count? Have a read about why MeetSpace decided to code from scratch and see if that might help you decide.
Are you a beginner that is serious about getting into web development? Creating a website from scratch can be a good way to learn how it all works if you’re willing to put in the effort. But be prepared for a few frustrating moments when your website doesn’t act like you want on a mobile phone, or in a certain browser.
Ready for the challenge?
STEP 2: Domain Name
The next thing you need to do is to get yourself a domain name.
Note that if you decided to go for Website builders, you will probably get a domain as part of the bundle. But the tips below on how to select a good domain name is still worth reading.
Domain name: A name that uniquely identifies your site (like thewebsiteroad.com)
Finding a good domain name is however not an easy task, here are some pointers to consider:
Keep it short and memorable – Keeping it short will reduce the risk of mistyping and misspelling. If you can find one that is catchy and easy to remember as well, then you have a winner!
Avoid hyphens – It doesn’t look good and will be harder to remember. It also takes away the uniqueness, so people that want to visit Your-Site.com ends up visiting YourSite.com, which is not your site…
Avoid numbers – Numbers are easily misunderstood. Especially if people hear your site name, they wouldn’t know if it’s numerical (2) or spelled out (Two)
Use a common extension (like .com) – People tend to trust sites with familiar extensions more. .com is by far the most popular one, but if your target audience is only within one country a local extension might very well be better suited (like .no for Norway)
Do you have a name in mind already? Check if it’s available
As you might experience coming up with a good name that is not already taken can prove to be a tricky task. However, don’t give up just yet, maybe one of these domain name generators can spark some ideas
LeanDomainSearch.com – My personal favorite when I need name ideas.
NameMesh.com – A good alternative.
Where to buy a domain?
Once you have found an available domain name suitable for your site, you need to buy it from a domain registrar.
Domain registrar: A company that manages the reservation of domain names
There are a lot of domain registrars to choose from but here are some factors to consider:
Customer support – You’ll want a friendly support team that is actually available when you need it. Give them a call or send a support request to check their response time.
Domain transfer – It should be free and easy to transfer domains to and from a registrar. A good registrar will not need fees and troublesome transfer procedures to keep their customers.
User friendliness – The domain management system should be easy to use and well documented, ensuring that everything from buying new domains to configuring DNS servers is a breeze.
Personally, I’m using NameCheap as my domain registrar.
They offer competitive prices and an intuitive user interface, but most importantly they provide great customer support – so it’s worth checking them out.
Already have a domain? Go ahead and skip to hosting, where I’ll explain what hosting is and where to buy it.
As you’ll discover, a lot of domain registrars also provide website hosting but it’s important to note that the registrar managing your domain names do not have to be the same as the one hosting your site. In fact, my suggestion would in most cases be to keep domain and hosting separate.
If you have read the article on separating domain from hosting, but still want to keep them with the same company for convenience, I recommend that you continue with the article on how to setup domain and hosting with Siteground.
If not, keep on reading.
Enter your preferred domain and click “Search”.
Click the shopping cart and choose View Cart.
Signing up for more than one year gives a very limited discount, so my recommendation is usually to start off with 1 year.
WhoisGuard is included for free for one year and is a privacy protection service that prevents people from seeing information such as your name and email when they do a Whois search on your domain
To create a new account, you just have to
- Create a username and password
- Provide your real name
- Provide your email address
- Click “Create Account and Continue”
Once you’ve created an account, you’ll be asked to provide some additional contact information.
You’ll need to add your first name, last name, street address, city, zip code, country, phone number, and email address
On the next page, you’ll have the chance to review the contact information and add additional contacts if required.
Click “Continue”
In order to complete the purchase, you just have to
- Enter your payment details
- Click “Continue”
- Review your order details
- Click “Pay Now”
That’s it, you now own your first domain.
But before you move on, remember to verify your contact details in the NameCheap Dashboard or Domain List
STEP 3: Website Hosting
Once you have secured yourself a domain name, it’s time to select a host.
Website host: A company that stores all the files related to your website and allows your website to be displayed to the public.
Here’s what to look for in a good web host:
Uptime – When you’ve first spent a lot of time and money on creating your website you’ll want a web host that actually keeps it online for people to see. Aim for a web host with uptime scores at 99,9% and above.
Loading speed – If your site spends ages on loading, people will just leave before they’ve seen the content. Another important part is that Google has a tendency to give sites with poor loading speed a bad ranking in their search results, leaving you with even fewer visitors.
Cost – Don’t get blinded by a small startup cost, some hosts bump up their prices quite significantly when it’s time for the renewal of your hosting plan.
Refund policy – You should choose a host that would refund your money if you change your mind and would like to cancel the hosting
Support – As always, having a friendly support team that is actually available when you need it is worth quite a bit.
When searching for the right hosting provider you also have to consider which hosting option that suits you the best. For most of you, shared hosting will be more than sufficient enough in the beginning.
Shared hosting
Shared hosting is the most popular hosting option by far, and usually also the cheapest one.
Shared hosting is exactly what it sounds like, your website will be sharing the same server and the same resources like CPU and RAM with quite a few other websites. Basically, that means that if another website on your shared server is using a lot of resources, this might affect the performance of your website and the other way around.
But since you’re sharing resources, you’re also sharing the cost which usually makes this option very affordable. And the truth is, a lot of us don’t actually need that much resources.
This option is well suited for your website if:
- You’re new to web hosting and want to get started with your first website
- You expect less than ~100,000 visitors per month
- You’re looking for the cheapest hosting option
- You need a hosting plan that requires no technical knowledge
If you would like a more detailed look at the other hosting options that exist, check out the more detailed web hosting article.
Where to buy hosting?
I’m currently running this site on the cheapest shared hosting option Siteground has to offer, and Siteground is my preferred host.
Not only do they offer good speed and uptime, their customer support really stands out, which is something I value highly.
Lastly, they provide a free SSL-certificate for your domain, which is a huge bonus!
I selected the StartUp package when i first started out, it’s a great choice for anyone starting a new website.
The GrowBig and GoGeek plans are great as well, but they become more relevant once your visitor count grows, or you want to host several websites on the same hosting plan.
Select “I already have a Domain” and enter the domain you purchased in Step 2 Domain Name.
Click “Proceed”
To create an account and complete the purchase, just enter your personal information and credit card details in the “Review & Complete” section.
You’ll have to add email, a new account password, First Name, Last Name, Country, City, Street Address, Zip Code, Phone Number and your payment information.
The last part you have to go through before the account creation is complete is to review the selected plan and sign-up period.
Note that the 1-month trial setup has a rather expensive setup cost. Besides that, the monthly hosting cost is the same regardless of which duration you choose.
Once done, click “Pay Now”.
Great, the hosting account is set up, but we are not done just yet.
You will get a setup wizard right away, giving you a few options:
Start a new website: If you decided on Content Management Systems in the technology selection section, this option will take you through the necessary installation steps for the CMS of your choice.
Transfer a website: Choose this option if you already have a website, but you need help to transfer it to Siteground for free.
Don’t need help now: Select this option if you know how to proceed on your own (Don’t worry, I have guides telling you what to do)
I do not want to set up now. Remind me next time I log in: This option is at the very bottom and if you select this, you will get this same setup wizard the next time you log in.
With a domain name and hosting in place, there’s one last thing you have to do to make this work. You will have to connect the domain you bought at NameCheap with your new hosting account on SiteGround.
Ok, so how do we do that?
That’s done by pointing the domain to SiteGround’s DNS Servers.
Wait, what is DNS??
Domain Name System (DNS) is a system that translates easy-to-read web addresses (e.g. TheWebsiteRoad.com) into their respective IP addresses (e.g. 181.224.152.122).
I’ll attempt to briefly explain how it works, by using my website as an example
- When you type in TheWebsiteRoad.com, the DNS Server will send 181.224.152.122 back to your browser.
- The browser then asks the hosting server, “Show me the site with address 181.224.152.122”
- The hosting server will then respond by sending the website-files to your browser so that you can see the website you asked for.
How to point your domain from NameCheap to SiteGround
First, you should login to both your NameCheap and SiteGround account
1. Log into your SiteGround account
Under the My Accounts tab, click “Manage Account” and go to the “Information & Settings” tab.
In the “Account DNS” section you’ll find two nameservers and their corresponding IP.
Copy the two nameservers.
2. Log into your NameCheap account
Click the “Domain List” tab, and you will see all your domains. Choose the domain you want to point to SiteGround and click “Manage”.
Here you should find a section called “Nameservers”, click the dropdown and select “Custom DNS”.
Paste in the nameservers you copied from SiteGround and click the green check-mark.
That’s it, you’re done with your domain and hosting setup.
The only minor downside is that you now have to wait for a few hours for the DNS settings to get updated so that your site becomes visible (This could take up to 48 hours)
That being said, waiting a few hours to get started on your website is truly worth all the benefits of keeping hosting and separate.
Optional steps while waiting
While you’re waiting for the DNS to update, there’s still plenty of things you could do.
First, you could start getting familiar with Siteground and go through the steps described in my Siteground guide. It will cover things like how to access cPanel, setting up SSL-certificate and e-mail.
If you decided that Content Management Systems was the right choice, you could already start the installation. I explain how in the following articles
Creating a website with WordPress
Creating a website with Joomla
Creating a website with Drupal
Alternatively, you could just set up Content Management Systems locally on your computer and play around with the different systems while waiting.
