Make a Website:
The Definitive Guide | 2021

This is the most comprehensive online guide to building websites. In the following chapters, you will learn how to create your professional-looking website quickly and easily without any prior knowledge of coding.

Difficulty Level:
2.5/5

Price: $19.99 Free

Is it difficult to make a website?

In the past, it was difficult: It was requiring knowledge of languages like HTML, CSS, JavaScript, etc.

Today, with the help of various tools, it is neither complicated nor expensive.

Technically, all that is needed is a domain name and a hosting service.

In addition to this, web hosting services today are offering various tools and options that help you build your website quickly, such as Website Builders, CMSs like WordPress and Joomla, etc.

Web development, programmer engineering website
What do you mean by 
a Website Builder 
CMS... WordPress 
?
Wondering illustration

A website Builder is a tool by which you can create websites visually by a simple drag and drop of elements like pictures, text areas, forms, etc.

It is suitable for complete beginners who do not see any need for complicated functionalities in their websites.

A CMS, on the other hand, stands for Content Management System and WordPress is one of them.

WordPress helps you make a professional website in a short time without any coding knowledge.

We highly recommend this solution and this guide is going to be centered around it.

Chapters

Plan illustration

1. Plan a Website

Before doing anything, first, what kind of website do you want to create? What's your niche? Did you think about the content of your website and to which name it best corresponds? Answers to these question are very important for successful online business.

Hosting illustration

3. Choose a WEB Host

Once the domain name is registered, it's time to think about a hosting service. Choosing a good and a safe host is what this chapter is about.

wordpress logo

5. Install and Customize WordPress

Learn about WordPress, how to install it, and customize your website. This will teach you how to make a blog and a store step by step.

Domain Flipping abstract concept vector illustration.

2. Get a Domain Name

In this second chapter, learn how to come up with an original name using some secret tricks employed by the biggest brands online, you will also learn how to register a domain name from a good domain registrar.

Pen Tool

4. Make a Logo

A bad logo gives users the impression that they are dealing with an amateur service. This chapter teaches you how to avoid this, save money and make your own professional logo without the need for designers.

SEO illustration

6. SEO Your Website

The goal of this chapter is to show you the basic SEO requirements for a completely new website.

Get a Free Certificate

At the end of the page, you will find a quiz based on the information found in the next chapters. Try to read them carefully before answering the questions. To start the quiz, you need to register and enter the name you want to appear in the certificate.

1. Plan a website

Before starting an online business, the question that should be answered is to what category does my website belong?
 
The answer to this question is very important in that it will help a lot in finding a profitable niche.
 
There are many types, but here’s a list of the most important ones:
Plan illustration

1. Types of Websites

  1. A Personal Website: Personal websites are as the name suggests, centered on a person, their information, pictures, hobbies, families, etc.
  2. A Business Website is a website that showcases your business. It usually contains only a few pages detailing your business information.
  3. Online Storefront Website: Websites can also be used to sell products or provide services in return for a specified amount of money. The operation is known as E-commerce, short for electronic commerce.
  4. Content Publishing Website: blogs and magazines are a typical example of this category. Websites that publish information, update, and create relationships with readers can be categorized as content publishing websites.

Let’s suppose, the website you want to build is an online storefront website, the next question will be how to choose a niche for an online storefront (e-commerce) website?

B. How to Choose a Niche for an E-Commerce Website?

A niche is a specialized interest, that is limited to a specific area.

For an e-commerce website, it means a specialized market that contains specific products like car parts, athletic shoes, wedding rings, etc.
 
This is by contrast to a general store that gathers all sorts of categories of products within it like AliExpress, Amazon, eBay…etc.

Why it is not advised for a starter to choose a general store?

The biggest disadvantage of this is that it is difficult to control and master.
 
By choosing a general market, it’s going to be difficult for your website to compete with established e-commerce stores that are in business for many years.
 
Let’s say you are interested in Electronics (a general market) and you want to sell all types of electronics…
 

Your first difficulty will be filling, selling, and maintaining hundreds of products, let alone marketing and customer service… 

Unless you have plenty of time and a big budget to hire people to do it for you.

 
The problem: a website with many categories and hundreds/thousands of products will not be an easy business to maintain.
The Solution: It’s wise then to start with a specific interest and then grow up as needed.
In the following steps, you will learn how to come up with a profitable niche.ch

1. Know the Categories

For a storefront website, It’s easy to know what is general and what is particular.

You can simply visit any well-known e-commerce website like eBay or AliExpress and then check the different categories available there.

2. Narrow it Down

Now that you know the categories, select a general one – let’s say “Electronics”, and narrow it down until it becomes controllable.

In the case of “Electronics”, let’s go for “Smartwatches” or a more specific keyword like “Chinese smartwatches”.

3. Competition Level

In this step, you need to check the level of competition in the specified niche.

Keyword Planner by Google Adword is a free tool that gives you an idea of how much difficult it is to advertise in the selected niche.

The goal here is to aim for a low to medium competition level niche, with a high search volume per month.

4. Keyword Tunning

What if the competition is high, what should I do?

A solution to this is to tune the keyword a little bit by reversing the words and adding other keywords such as “Smartwatches Made in China” or “Android Smartwatches Made in China”, etc.

Okay and what if the competition is always high? What should I do?

5. Make a Whole New Category

If you narrowed down your niche at a point that you’re able to master and control your business, but you always find that the competition is high, that doesn’t mean you will not succeed, but only that it’s going to be difficult to compete with others running ads and you need to spend more money to stand out.

For a low competitive business, you can make a whole new category for a set of products that have common features but aren’t gathered together by giant stores like Amazon, Aliexpress, and eBay.
 
What’s this entail is that creativity and good observation qualities are needed here.
 
As of now, if you look at AliExpress and eBay, it looks like there’s no category for products that turn an ordinary house into a smart house.
 
You can seize the opportunity now and start a niche with the keywords ‘’Smart Houses’’ or ‘’Smart Homes’’.

As of now, the keyword “Smart House” has a low competition and a high search volume. 

It’s a good niche for a new business.

smart house key word research on keyword planner by google ads

Let’s go for Smart House then!

2. Get a Domain Name

Every website has a unique name that identifies it on the World Wide Web.

They allow visitors to access their favorite websites whenever they want to by typing the website’s name dot extension which can be a .com .net or .org… such as google.com, facebook.com, etc.

In short, a domain name is the name of your website followed by an extension like .com, .net, .co.uk…, etc.

Domain Flipping abstract concept vector illustration.

1. About Domain Registration

Domain names are obtainable from accredited companies called domain registrars. 

A domain name is not a one-time purchase product, it can be registered for a period of time ranging from 1 and 10 years for an average price of $10 each.

After the period of registration, it expires and becomes available to others. 

That’s why it’s important to never forget to renew the registration before the date of expiration. 

To register a domain name, I recommend the following:

2. Registering a Domain Name

Domain Name Registration Illustration

Registration is straightforward, on the search bar of the tool, you can check for the availability of domain names, if they are not taken, click on next, and then follow the instructions.

Before starting, bear in mind that good domain names are the ones that are:

Registering a domain name is one of the most important steps toward a successful business.

Don’t rush, have a cup of coffee, take your time, and think about some words related to your website’s content and then try multiple times, multiple combinations, until you come up with a good name.

Here are some creative ideas used by the biggest brands online:

  • Putting words together: like Facebook, YouTube.
  • Writing short phrases: like MySpace, SecondLife, StumbleUpon.
  • Slogans: like justdoit.com(Nike).
  • Combining parts of words: Microsoft, Wikipedia.
  • Misspelling words: like Flickr, Digg.
  • Change or add letters to words: like iPhone, iTunes.
  • Invent new words: like Clevious, Etsy.
  • Words from other languages: like Joomla.

3. A Quick Example

For this guide, we first tried the name “smarthouse”. We found that it is already taken.
 
One of the ways to resolve the problem is by adding suffixes, prefixes, or even words.
 
Register a domain name example animation
 
By adding the word “future”, our domain name is now available and ready for purchase.

3. Choose a Web Hosting Service

web host is where your website’s files are stored. 

A web host is like a computer that is connected to the internet 24/7.

Each time a user asks to view your website, the host responds to their request by sending them your website pages to their browser.

Buying a web host is like buying a computer: It has speed, storage size, pre-installed apps, etc.
Hosting illustration

1. What You Should Look for When Choosing a Host

The following list will assist you in choosing a good web hosting service:

  1. It must be capable of running PHP and MySQL in order to run WordPress.
  2. It should contain a one-click-install for WordPress for a quick easy installation.
  3. It must offer 24/7 technical support.
  4. It must have a great uptime record of 99 – 100% of the time, which means that your site will always be available on the World Wide Web.

On top of these, you should also look for the following:

  1. It should provide a big storage space: so that your site can grow and can support a big number of images if needed.
  2. FTP support: it allows you to upload your files through FTP using FileZilla.
  3. Unlimited bandwidth: You can receive thousands of visitors monthly without limits.
  4. Unlimited databases: You may need to install more than one WordPress website on the same host.
  5. Supports email addresses: to create a custom email address such as: [email protected]’sname.com

To make it short, one should go for a serious and very well-known company. 

Also, be aware of free web hosting services, they may delete all of your data without any reason, or add sneaky advertisements without your consent.

If you are looking for a cheap, professional, and reliable host, we recommend you our top 3 hosting services for 2021:

Bluehost

Top Recommendation
$8.99
$ 2
95
Monthly
  • Free Domain Name for First Year
  • Easy WordPress Installation
  • Website Builder Available
$8.99
$ 2
95
Monthly
Recommended

InterServer

Recommended
$7.14
$ 2
50
Monthly
  • $0.01 First Month Coupon
  • Easy WordPress Installation
  • Unlimited bandwidth and storage
$7.14
$ 2
50
Monthly

WHP

Recommended
$4.49
$ 1
99
Monthly
  • Free Domain Name for First Year
  • Easy WordPress Installation
  • Unlimited bandwidth and storage
$4.49
$ 1
99
Monthly

2. Link the Domain Name With the Host

If you used the suggested tool above or chose one of the hostings we recommend, there’s no need for these extra steps.

By getting a domain name with a web hosting from the same place, they get automatically linked.

If you still want to get the host and the domain name from different places for some reason,

you should know that the configuration differs from one website to another, but the general steps to be taken are common. 

They can be summarized as follow:

1) Find the nameservers of your hosting. They look like the following:

  • ns1.nameserver.com
  • ns2.nameserver.com

2) Copy the name servers and search for DNS settings in your domain name.
3) Paste your name servers into the “name server fields” of your domain name.

You may probably need to do more configurations depending on your hosting and domain name service providers.

What you’re going to read in the following pages is probably what some designers do not want you to know, because designing for some designers today is more of knowing what to do than having the innate qualities of a designer.

Here’s what you are going to learn:

Pen Tool

Step 1: Get Ready

If we look at the well-known online brands, we can observe two categories of logos: those that are made with a special font and those that are made with a special font and a shape in front of them.

The shape can be used for many purposes and one of them is to make the name, the service, or the website content more expressive.

Here are some examples:

The question that needs to be answered now is how would you like your logo to look? Do you want it to be with or without a shape?

For illustration purposes, let’s make a logo for a virtual website called “Smarthousefuture“. 

The goal of the website is to sell devices that turn an ordinary house into a smart house.

Also, let’s make a logo with a name and a shape that has meaning.

Something like a gable on top of it.

Step 2: Download the Right Tools

Here is a list of the tools needed:

To make use of custom shapes, they must be installed into Photoshop as follows:

1. Open Photoshop. On the left side, click with your right mouse on the square shape and select Custom Shape Tool.

Select Custom Shape Tool in Photoshop.

2. On the top, next to Shape, open the Custom Shape Picker.

Open Custom Shape Picker in Photoshop.

3. Click on the wheel, then Load Shapes.

Load shapes in Photoshop.

4. Search where you downloaded the file, select it, and click Load.

Select the file with .csh extension and click Load.

Custom shapes have been successfully installed.

Step 3: Draw and Edit the Logo

1. Draw the Shape

Using the newly installed custom shapes, let’s draw a house, then edit it so to keep the roof only.

1. Open Photoshop
2. On the top left, click File and then New.

Open a new document in Photoshop.

3. In the new window, set the width to 700 and the height to 350, then click OK.

Set width and height in Photoshop.

4. On the left side, click Custom Shape Tool, then on the top open the Custom Shape Picker, and find a shape that represents a house, and select it.

Search for a shape that represents a house in Custom Shape Picker.

5. In the top, next to Fill, choose any color other than white.

Choose another color, for example red.

6. To draw the shape, just click on shift + left button of your mouse, the more you drag the mouse, the more the shape gets bigger. Here’s the result.

Draw the house in Photoshop.

7. Now it’s time to delete everything except the roof. To do this, be sure that the layer of the created shape is selected.

Select the layer in Photoshop.

8. On the left side, with the right button of your mouse, click on Lasso Tool and select Polygonal Lasso Tool.

Choose Polygonal Lasso Tool in Photoshop.

9. With Polygonal Lasso Tool select the house, except the roof just like in the picture below:

Select everything except the roof, Photoshop.
 
 

10. On your keyboard, Click Del to delete the selected part.

 
 

We have successfully edited the custom shape, the next step is to write the name of the website and adjust it under the roof.

1. Draw the Name

1. On the left side, click on Horizontal Type Tool, then on the top, select the font and its size.

select a font in Photoshop.

2. Click on the white space under the roof and then type the name of the website.

The created logo in Photoshop.

3. You can also adjust the website name or the roof by clicking on them and displacing them with your mouse.

1. Change the colors

With gradient, colors will look great, here is how to do it in Photoshop.

On the right side, double-click the layer of the roof.

Double click the layer to see the options.

2. A new window will appear, activate Gradient Overlay, and click on the color next to Gradient. A new window will appear, select the third Preset and pick two varieties of the same color. The varieties should be very close to each other. See the following picture.

Set Gradient Overlay to get a more than one variety of the same color.

As you can see, I’ve chosen the Blue Ocean.

The color on the left side looks a little bit darker than that in the right side.

In this tutorial, I decided to use only one color for both the shape and the font.

Here’s the final result:

 
Here's how the logo looks now.
 
 

Step 4: Save the Logo

One of the characteristics of a professional logo is that it can fit any website’s background,

i.e. if the website’s background is gray, the logo’s background will be gray, if it is black, the logo’s background will be black, etc.

To do this, you should delete your logo’s background and save the file as a .png extension.

1. On the right side, with the right button of your mouse, click on the layer of the background, then with the left button, click on Delete Layer.

important step: delete the background of the logo.

2. Click on File then Save.
3. Next to File Name type the name of your logo, in the drop-down next to Format, select PNG and click Save.

save the file as .png in Photoshop.

The logo is now ready to be used!

You can now save many copies for many purposes with different sizes: for your website, Facebook profile, Twitter profile, etc.

5. How to Install and Customize WordPress

WordPress is a free tool that can be used by anyone to create and maintain websites very easily.

Many web hosting services including Bluehost, provide a way to install it and configure it easily using an App Installer.

For instance, Softaculous is a cPanel App Installer that makes installing WordPress an easy task.

wordpress logo

1. Install WordPress

To install WordPress, locate Softaculous in your cPanel.

Your cPanel will look like this:
 
Image of cPanel
 
Click on the Search bar and type: Softaculous. As you are writing, it will appear under the software tab, click on it:
 
Softaculous in cPanel
 
After that you have clicked on Softaculous Apps Installeryou will see a list of applications, choose WordPress:
WordPress under Softaculous
 
On the page that will appear, there will be fields and sections to fill.
 
The first section Software Setup will be used to choose the version of WordPress to install, the URL of your website, and the folder where your installation will be. You can leave them as default.
 
WordPress, Softaculous, Software Setup Section
The second, third, and fourth sections are very important.
– Under Site Settings, you can set your website’s name and description.
– Under Admin Account, choose the username and the password you want to use to log into your WordPress Dashboard.
– And be sure, to add your email to receive updates on your WordPress installation.
 
 
Click on install and wait for a moment for the installation to complete…
 
After a few minutes you will get:

Installation Complete

You can now visit your website and start customizing it by following the Administrative URL and logging into your website’s dashboard.

WordPress Installation Complete, Softaculous.

2. Customize WordPress

In WordPress, you don’t have to learn programming languages, nor spend a long time coding your website’s appearance.

All you have to do is searching, and activating the right theme and there you are!

In the following lines, I’ll show you how to install and customize your WordPress website.

1. Install a WordPress Theme
1. On WordPress Dashboard, point your cursor to Appearance, then click on Themes.
 
WordPress Dashboard Appearance
 
2. To view a list of the available themes, click on Add New.
 
Add New Button Example
 
3. In the search bar let’s try e-commerce.
 
Search bar Example
 
4. In the list of themes, the theme of New Shop seems to be good, let’s try it.
 
WordPress Themes

5. We can install it by clicking on Install and then waiting until it finishes.

Installing WP Theme
 
6. Once installed, it must be activated, click on Activate.
 
Activating WP Theme
 
7. It’s possible now to start customizing the site by clicking on Customize.
 
Customize WP Theme
2. Customize a WordPress Theme

Go to Appearance > Customize. A live preview will open up; the website will look empty and very basic.

On the left side, there’s a sidebar, we can use it to customize our website.

WordPress site
1. Upload a Logo

Let’s start by uploading a logo image by clicking on Site Identity > Select Logo > Select Files.

The following image shows you how it looks on the site.

logo wordpress customization

As you can see, there’s a tagline and a title under the logo. Let’s delete them by unchecking the boxes Display Site Title and Tagline.

uncheck the box Display Site Title and Tagline
2. Create a Menu

Let’s add a menu to our site by clicking on Menus, then Create New Menu.

Under Menu Name, enter the name of the new menu, let’s name it Main Menu. Let’s also check the box Top Menu, and then click on Next.

This theme supports three types of menus: Top MenuCategory menu, and Secondary Menu.

three types of menus

Let’s add HomeAbout Us, and Contact Us pages to the Top Menu. Click on Add Items, and under pages click on + sign next to them to add them. If they don’t exist, type the name of the page in empty field and click Add.

Pages menu, WordPress

The top menu has been created successfully! Click on Publish to save the modifications.

Top menu
3. Create Categories

Let’s create the following categories: Sensors, Security & Cameraskits & hubs, and Lights & Appliances.

We can create categories by opening up a new WordPress Dashboard (don’t close the first one and be sure to have clicked on Publish). Point your cursor to Posts and click categories.

Under Name, type the name of the category. Under Slug, type the name that should be in the URL: Slug is just that name appearing in the URL, it should be written in lower case without spaces.

For SEO purposes, it’s recommended to write a description for each category.

Add New Category, WordPress
4. Create a Menu for Categories

After creating the categories, come back to the first window and refresh it.

Follow the same procedure as before, but, this time, select Category menu.

Menu name, category
 

Click on Add Item > Categories and click on the + sign next to each category to add it to the new menu.Click on Publish to save the changes.

Add categories to menu, WP

3. Turn the Website Into a Storefront Website

With the customization that we have done until now, the website is getting better, but it is still not ready to sell products yet.

To be able to sell products, we need to install an e-commerce plugin.

WooCommerce is a free and popular plugin, let’s add it.

1. Click on Plugins > Add New, on the search bar type “WooCommerce”.

Search plugins, WP

2. Install it and activate it.

WooCommerce Plugin

3. When activated, WooCommerce will need to be configured. Fill in all the required information: Location of the storeaddresscurrency, whether you sell digital or physical productsPaymentshipping fees.

After completing the configuration, the site becomes ready to sell products.

Here’s how to add products to the store:

1. Hover your cursor over Products, and then Add New.

2. Add your product information: Titledescriptionpricecategoryfeatured images…etc.

 

3. Click Publish.

If you want your shop on the homepage, do this:

1. Hover your cursor over Settings, and then click on Reading.

2. Set Homepage as Shop.

3. Set Posts page as Blog.

Set Homepage to Shop, WooCommerce.

3. Click Save Changes.

The website is now complete and ready to sell products.

Preview website product category WooCommerce

6. SEO Your Website

The newly built website needs to be optimized for search engines.

This process is known as SEO.

SEO helps your website rank on search engines that will bring you a lot of visitors.

The technical side of it may seem difficult, but in WordPress, most work can be done using ready-plugins and well-structured themes.

In the following lines, I’ll share with the first SEO actions that should be completed to optimize the new website.

SEO illustration

1. Join Google and Bing Webmaster Tools

Since Google and Bing are the most popular search engines, it’s important to join their webmaster tools by creating an account on Google Webmaster Tools and Bing Webmaster Tools.

Webmaster tools help site owners optimize their websites with the detailed reports and technical suggestions offered.

2. Optimize Your Website With Plugins

  1. WP Super Cache: it will speed up your website by caching your pages.
  2. Jetpack: it will speed up your images load times with the help of their fast and secure servers around the globe.
  3. Yoast SEO: a plugin that fixes most of your website’s basic SEO issues.

3. Submit a Sitemap to Search Consoles

A sitemap is a file that contains a bunch of links to your websites’ content.

It informs search engines of how your site is structured and notifies them of new publications.

Yoast SEO plugin handles it for you. It creates a complete and detailed sitemap, ready to submit to search engines. 

4. Check Your Website Loading Speed

Google and other search engines love websites that load fast.

The PageSpeed Insights tool is made to help you understand different types of loading problems.

It gives you a complete overview of all issues hindering your website’s load speed with a list of suggestions to fix them.

5. Use External Tools to Diagnose Your Website

Other tools on the web can also provide you with detailed reports of your website for free.

The Clevious SEO Checker Tool, for instance,  analyzes your website and shows you a list of suggestions that will help you fix your website’s SEO errors.

In addition to this, I suggest the  Bing Webmaster Tools. It has a powerful SEO tool as well.

To get a better understanding of your website, it’s very important to try both the main URL and any single post URL.

6. Check Your Website Structured Data

A website with a good structure helps search engines identify its different parts: The headlines, the content, the author, the date in which a post or a page was published, and all the necessary pieces of information.

The Structured Data Testing Tool checks on this and tells you whether your site is well structured or not.

In case it finds many errors or shows a blank page, it means that it is not very well coded.

You’d better change it.

Conclusion

Making a website is a very easy thing to do.

All that is needed is a domain name, a hosting service, and a tool like WordPress.

But, the most important step of all, as you may have noticed, is planning and optimization.
 
If you have any questions or suggestions, don’t hesitate to use the comment box below.

Get a Free Certificate of Accomplishment

Read the guide carefully and try to answer the questions to get a free certificate that you can showcase in your LinkedIn profile to show that you love learning new things and that you have the knowledge of how to build websites from scratch using WordPress.

You will have 30 minutes to answer 9 questions, and you need at least a 90% passing score to get your certificate.


Make a beautiful website

It has never been easier to create pages and websites on WordPress

Pin It on Pinterest

Subscribe toour newsletter!

Sign up Here With Your Email Address to Receive Updates From This Website in Your Inbox.