How to Build a Website: The A-to-Z Beginner Guide

Stay calm and make a website!

In this article, I will show you the essential steps in creating a website.

  1. Register a domain name
  2. Signup for a web hosting
  3. Design your webpage
  4. Validate and test your website
  5. Finetune and grow

Creating a basic website is easy. The labor work itself shouldn’t take more than an hour. Understanding your choices and fitting them into your situation, however, is no easy feat. Due to the fact that some steps may require additional knowledge not in the scope of this article, I’ve included links to detailed resources where necessary.

Why are you creating a website

Before we begin, it’s important to first define your purpose.

We all know that a website can be an important part of your online presence – as a business entity or an individual. For an individual, it can be something as simple as a basic profile or as detailed as your entire portfolio. For businesses it should be considered as part of your assets and relate back to your profile, products, or the things you do.

Having a clear purpose in mind enables you to make better decision down the road – i.e. which platforms to use, which marketing channels to engage with, etc.

Some typical reasons why a website is built:

  • To sell products – If your primary goal is to sell products, your website should include product showcases, an online shopping cart, secured payment gateway, and preferably a point-of-sale system.
  • To display information – If your goal is to display company or personal information, consider building simple one-page website on an affordable platform.
  • To share current ideas and experience – A blog is usually the best for users who love to write and share their ideas with the world.

These reasons need not be mutually exclusive. For example, you can have a website which combines two or more of the above elements.

The Essential Steps to Build Your Own Website

Once you have sorted out your website objectives, it’s time to build! To get started, you need to first…

1. Register a domain name

What is a domain name?

To start a website, the first thing you need is a domain name.

A domain name is the address which identifies your website on the Internet. Some examples include Yahoo.com, Google.com, or BuildThis.io (the website you are reading right now).

Where to register a domain name?

To own a domain, you will have to register it with a domain registrar.

A domain registrar will help you to check if a domain name is unique before allowing you to proceed with a registration. GoDaddy and NameCheap are two popular domain registrars. I have been using them to manage my domains for a very long time.

How to choose a domain name?

Choosing a domain name is often the hardest part as it not only has to reflect your brand, but still be easy, simple, and memorable.

Your domain name must be unique – the name must not be owned by another person or organization in the entire world. A general rule of thumb that you should keep in mind for creating domain names are:

  • Keep it short and easy to remember
  • Don’t use trademarked names
  • Go for .com or .net when possible
  • Be creative and use compound or made up words
  • Try to make it keyword relevant

Actionable tips

 

2. Sign up for a web hosting account

What is a web host?

A web host is a big computer (aka server) that is used to store the files needed as part of your website.

Think of it as a house that stores furniture and home appliances – the house is your web host and anything that goes in the house is your website content. Website content generally includes text, images, videos and any other elements you think necessary.

What are your choices in hosting?

Web hosting comes in various packages today. Traditionally, a web hosting provider is only involved in leasing out the servers with basic software and technical support. Hosting your website with a traditional hosting provider is usually cheaper and more flexible; but require a little bit of extra work for you to setup a website.

Nowadays, companies are bundling different services together and allows users to build, host, and manage websites all from one service provider. We usually call these companies Website Builders or Online Store Builders. Hosting a website on these “bundle” platforms is usually expensive and less flexible; but you’ll get to build a website or online store easily.

Hosting platform for starters 

If you are just starting out – basic shared hosting is usually good enough. For that, I recommend the Hostinger Single Plan – which allows you to host one website at a low price of only $0.80/mo.

Hostinger Hosting
Hostinger Single Plan – Host one website with 10 GB SSD storage and 100 GB bandwidth (more than enough for starters) at $0.80/mo.

Go to Hostinger

 

Hosting platform for ecommerce / online stores

If you were planning to sell products directly from your website (an ecommerce store), then you should check out Shopify Basic (starting price $29/mo).

Shopify Platforms
800,000 ecommerce stores use Shopify, including NBA Lakers Store and Tattly.com. Shopify Basic starts at $29/mo.

Go to Shopify

 

Hosting platform for easy-to-make websites / small business

If all you need is a simple website to showcase your business portfolio and contact details, a bundled hosting option may be right. Wix and Weebly are the two site builders I like – we write extensively about the two and you can check out our reviews here – Wix review / Weebly review.

Wix as bundled options
Offered as an online service, Wix lets you work with a drag-and-drop visual editor to build your website even if you have zero coding knowledge. Wix Unlimited Plan starts at $12.50/mo.

Go to Wix

 

Actionable tips

  • There are different kinds of hosting available: shared hosting, dedicated server hosting, and cloud/VPS hosting.
  • If you’re a small website, it’s cheaper to go for shared hosting plans. Bigger sites are recommended to use either cloud or dedicated hosting.
  • Some key qualities that you need to consider before choosing a web host are their pricing, server speed, and uptime rates. Hostinger (for newbies) as well as InMotion Hosting and SiteGround (for bigger websites) are some of the popular names.
  • Learn the 16 key factors to consider when choosing a web host.
  • Consider using a store builder, such as Shopify or BigCommerce if you plan to sell products directly from your website.

 

3. Design your webpages

Once you have your domain name and web host ready, it’s time to put something out onto the Internet. To design your webpages, you can either hire a web developer or do it yourself.

We discuss in detail how to outsource a web development task here. You should skip the following steps and move on to that page if you plan to hire someone to develop your website for you.

For the DIYers, here are the three easy ways to design a webpage:

1- What-you-see-is-what-you-get (WYSIWYG) web editor

A WYSIWYG editor allows you to setup a website and design web pages from scratch without the need of coding. It works just like a normal word processor would – you start with a template or a blank page, then create your website pages. Once that’s done you fill them up with content and upload the entire folder to your web host using a file transfer protocol (FTP) program.

To go with this method, it’s best if you have basic HTML/CSS skills and some general knowledge on how the Internet works.

There are several WYSIWYG web editors available – some are free for non-commercial use while others may require a paid license. Microsoft Expression Web, Google Web Designer, BlueGriffon, and Open Element are some good ones to check out.

For an FTP program – FileZilla and WinSCP are the two best free options.

Microsoft Expression - WYSIWYG editor
Example – Here’s a screenshot of Microsoft Expression Web Editor. Folder List (left) – Structure your website using folders. Editor (center) – Write and format your text here. Styles / Toolbox (right) – Style and design your page using CSS (optional). Note that you will need to create a page name index (.html/.htm/.php/.asp) – it will work as the homepage of your website.

This option is only possible if you are using a traditional hosting (i.e. Hostinger). Using a WYSIWYG editor is flexible and fun if you enjoy learning web coding… but it’s not a feasible option for beginners who want a website instantly.

2- Using a content management system (CMS)

Most websites are built and managed with a CMS today. A CMS comes with many benefits from a site owner’s point of view. They are easy to manage, flexible in design and development, and cost effective (free!) – three key advantages.

If you haven’t heard of it already – WordPress, powering ~33% of the all websites on Internet, is the most popular CMS in the world.

For those who are opting for conventional hosting option in step #2, you can install WordPress with just a few clicks.

Installing WordPress in Hostinger
Here’s how you can setup WordPress at Hostinger. Login to your Hostinger account, go to Website > Auto Installer > WordPress > Setup a password and website name > Install.

You will get a basic website framework once WordPress is installed. You can then design your webpages using a WordPress template. Pre-built WordPress templates are available for free at WordPress.org (official themes directory). Or you can buy premium templates from professional developers like Elegant Themes or Artisan.

Disha explained how to create a blog or website using WordPress here. Please follow the instructions in case you need further information.

Note – You can’t use a CMS if you chose to go with “Bundle” platform like Wix or Weebly in step #2.

3. Using a drag-and-drop website/store builder

A drag-and-drop website/store builder is the easiest and fastest way to create a website.

You don’t need any web development skills – just pick a pre-built template, grab the necessary web elements from the builder (i.e. contact form, drop-down menus, Google Map, pay buttons, shopping cart, etc.), and a full-featured website is ready.

There are many website builders scattered over the Internet – Wix and Weebly are two of the most popular ones. And as mentioned above, Shopify would be a great choice if you are building an online store.

Wix demo

Creating and editing a website using Wix Editor
Designing your webpage at at Wix:  Site Menu (left) – Manage pages, choose site background, set site navigation, add texts and link, upload images, etc here; Alignment (center/left) –  Arrange and align website elements here; Preview (top right) –  Save, preview, and publish your website.
Desiging a website on Wix prebuilt templates
Wix templates – there are hundreds of pre-built templates at Wix (see all).

Go to Wix

Shopify demo

Creating and editing a website using Shopify editor
Design your online store front with a pre-built theme at Shopify. Menu (left) – Choose themes and add shop elements (slides, headlines, images, footers, etc) here; Preview (center/right) – Preview your store here.
Shopify templates
Shopify offers a wide range of free and premium themes (see samples).

Go to Shopify

Hostgator Website Builder Demo

Gator Website Builder
Using Gator Website Builder – Menu (left) – Choose themes, add pages, and add page section here; Preview (center/right) – Move between pages at top navigation bar; save, preview, and publish your website.
Free themes at Gator Website Builder
Fully-customizable and responsive website templates offered at Hostgator Website Builder.

Go to Gator

Actionable tips

 

4. Validating and testing your website

Once your website is ready – it’s time to validate and test how it works in major browsers (Chrome, Firefox, Safari, Microsoft Edge, IE 11, etc.) as well as on different screen sizes.

We can run these tests with the help of free tools online.

Markup Validation

W3C - Validate your website once you are done with your creation
Validate your website markup easily using W3C Markup Validation Service.

What is markup validation? Coding languages or scripts such as HTML, PHP, and so on each have their own formats, vocabulary and syntax. Markup validation is the process of verifying whether your website follows these rules.

Browser Test

Test your website in different browsers
Cross test your website for up to 115 different browsers in one shot at BrowserShots.

Screen Test

Test your website in different screen sizes
Use Screenfly to preview your webpage on monitors, tablets, smart phones, and other different screen sizes.

 

5. Fine-tuning and growing your website

Publishing your website on the internet is stage one. There are still many other things to do to ensure the success of your website. Here are a few tasks to begin with…

Fine tune website speed

Google has stated clearly that site speed is one of its ranking factors. This means your site may rank higher if it loads quickly.

Also – the faster your website loads, the happier your website visitors will be. It is proven, in countless case studies and experiments, that a slow loading website will damage user experience and affect website revenue. Amazon would have lost an estimated $1.6 billion in revenue if its site slowed down by even one second.

If your current website speed is slow, learn how to improve it.

Improve website search visibility

You don’t need to be a master in search engine optimization (SEO) to get your website noticed. But some basic search engine optimization skills are always good to have.

Create a webmaster account at Google Search Console to submit your website to Google and to identify any SEO issues. Do basic keyword research and then optimize your page title and headings for your primary keywords. Implement schema markup on your site to stand out from search result pages.

For more SEO tips, read our SEO dummies guide.

Implement HTTPS

Ever since Google Chrome started to label HTTP websites “Not Secure”, SSL certificate has become a big deal. To make sure that your website is “trusted” by users – a HTTPS connection is a must.

Add essential pages

No two website is ever the same as they might serve a different purpose and/or function. However, there are three standard pages that every website should have: Index (homepage), About Page, and Contact Page.

Homepage

The homepage is often the first place where most visitors will go see after they landed on your website. Your homepage should deliver the right pitch and drive your visitors deeper into your site.

Example of website - Haus
Example – Haus homepage comes with a clear navigation menu and gallery-style design (which is perfect for product showcase).

About page

About Page is all about building a rapport with your visitors. It lets you introduce yourself and give detail information (well?) about your website. Usually it's recommended to include photos of the people who own and run the website.

Example of website - Bulldog Skincare
Example – Bulldog Skincare's About Page sends a lovable and memorable message.

Contact page

It's important to communicate with your users and potential clients. Hence – the contact page. Include all possible communication channels (social media profiles, contact forms, email address, etc) to make sure that your visitors are able to reach you.

Example of website - Survicate
Example – Survicate’s contact page is beautifully designed with large form fields, clear call-to-action; and consists of all necessary information.

Expand your reach on social media platforms

Your website should also have a presence on social media platforms where most of your targeted audience hang out. For BuildThis.io that means Facebook and Twitter. For others it may be LinkedIn, Tumblr or Pinterest.

Here are some social media marketing tips for beginners.

Add favicon

Did you see the letter “B” in a yellow circle that appeared on the left of your browser tab? That’s known as “favicon”.  Like a logo, the favicon is a smaller visual element that represent a website.

The Favicon is a nifty little branding technique that’s often overlooked by website owners. If that sounds like you – make use of these free favicon generator to help you.

Get It Done, Now!

You now know more than enough to create and build a successful website. It’s time to put your knowledge to work. Go start now and rock the internet!

* Translation: EN ID

About Jerry Low

author avatar

Geek dad. SEO junkie. Web marketer. Investor. Jerry developed a passion for web dev and SEO in his early 20's. He has been building Internet assets and making money online since 2004

Connect with Jerry Low: Linkedin . Twitter .