How to make a website from scratch in 2022: Step by Step

If you are planning to make your website in 2022 it may seem overwhelming at first, especially if you are not familiar with coding.

But actually it is not that difficult these days.

In this free guide, you will learn how to make a website from scratch step by step even if you don’t have any coding knowledge.

If you follow the steps outlined here I can promise you by the end of this guide you will have your first working website.

But if you do get stuck at any point just give me a nod here will be happy to help you out.

So are you ready for the ride? Let’s do this together…..

The best platform for building a website for beginners is WordPress.

Because more than 37% of the websites on the internet are using WordPress.

The reason is –

It is free: WordPress is free, you can download and install it as many times as you wish it won’t cost you anything, in addition you will get free updates from time to time which is very important from a website security perspective.

User friendly: WordPress is very user-friendly even a first time user can understand the workflow very quickly. It has a very intuitive back-end where you can easily update your content even without any coding knowledge.

Highly customizable: WordPress is highly customizable and extremely flexible, almost any type of website can be built with WordPress.

Active community: One of the biggest reason why WordPress is so popular because of its huge active community which you may not get in any other CMS platform. There are many websites and forums where you can get answer to almost any question related to WordPress.

Suitable to almost all: From a small website to a large one WordPress is suitable for all, if you are wondering how big it can be then check these famous sites using WordPress.

A domain name is the name or address of your website, this is the name people will know your website with (like www.YourWebsite.com).

The domain name you choose will be the identity of your website so you need to choose it carefully.

A simple rule of thumb is-

• If you are making a personal website then choose something like www.YourName.com.
• If you are making a business web site then choose it like www.YourBusinessName.com.

There is a whole list of domain name extensions you can choose from but you shouldn’t go too crazy about choosing one, you better of sticking with .com, .net, .org because they are more recognizable to people.

Few more additional things to remember while choosing the name-

Keep it simple– Keep the name easy and simple to remember so a visitor can remember your domain name, try to avoid using “hyphen –” in the name because a visitor can easily forget to put the “–” in the URL.

Brandable– Try to use a name that you can use as a brand.

Domain name generally costs around $10 – $15 per year.

But you don’t need to buy a domain separately if you haven’t bought it already.

In the next step, I’ll show you how to get a domain for free for the first year. 

Web Hosting is the place where your website’s file will be stored it is like your website’s home on the internet.

Without a web host, your website will not be accessible by anyone.

Now how to choose a good WordPress hosting company?

A decent shared WordPress hosting costs around $3 – $10 per month, like in any other business you have to make this small investment for your business.

There is a wide range of options to choose from.

But in general, a good WordPress hosting company should have the following features –

• 24/7 Support (Live Chat / Phone) for any issues.
• Free SSL certificate
• One-click WordPress installation
• Daily Backup
• Unlimited Emails
• Litespeed / Nginx server-based for higher speed.

Most of the good WordPress hosting companies will have these features.

But if your hosting company doesn’t have them then it’s time to change your hosting company.

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

I personally recommend GreenGeeks it has a great balance between price and performance.

With GreenGeeks you will get all the features mentioned above besides that you will get a free domain for the first year.

Their plans start at $2.95 per month with up to 70% discount.

Let me show you how to get started.

1. Click the link above or visit GreenGeeks and click on “See Our Plans”.

2. Next, choose the plan. I would recommend you to go with the Pro plan where you can host multiple websites.

Click on “Get Started”.

3. Next, here you can register your free domain or if you already have a domain somewhere else you can link it to GreenGeeks.

Then click on “Next”.

For free domain, you will get only standard domain extensions like “.com“, “.org“, “.net“, “.info“, “.biz” for other extensions you can buy it from places like Godaddy or Namecheap.

4. Now fill up the registration form including payment details.

Then click on “Create Account”.

5. Once the payment is done you will get an email with your GreenGeeks account details, wait for your account activation it can take around 30 mins – 2 hrs.

Once your account is activated you are all set to go.

Since we have already decided to build our website on WordPress its time to install it.

Installing WordPress is very easy, most good hosting companies will provide one-click WordPress installation so you don’t need to worry about any technical aspects.

If you’re not using GreenGeeks don’t worry most cPanel hosting will have similar settings.

Since we are using GreenGeeks we’ll install the SSL certificate first but this step can vary for other hosting providers.

SSL certificate makes your connection secure and it is the common web standard now.

To install it –

1. Login to your GreeGeeks account.

2. Go to – Security > Add SSL Certificate

3. Choose your Service and Domain respectively 

4. Click on Continue

5. Next, choose “Select Let’s Encrypt” and follow the steps to install the SSL certificate.

Now once our SSL certificate is installed its time to install the WordPress.

1. From the GreenGeeks dashboard click on “Cpanel” 

2. On the next screen scroll all the way down to Softaculous Apps Installer section and click on WordPress.

3. Click on “Install“.

4. It will open an installation wizard, choose the WordPress version.

Make sure to choose “https://” or “https://www.” as the protocol since we have an SSL certificate.

Choose the domain and leave the directory blank if you want to install it in the main domain. 

5. Give a unique username and a strong password and make sure to copy the admin details.

Add a working email id because that will be used for password recovery in case you forget your login details. 

6. Scroll down and click on “Install” and WordPress will be installed. 

Now go to your website URL, if everything went well you should have a live site looking something like this, you will also see a lock icon beside the URL which indicates the secure connection.

Congratulations!! Your website is live now and don’t worry about the look will customize it in the next step. 

Now your site is live, its time to make it look beautiful.

Let’s do it

A WordPress theme will determine how your website will look so you need to choose it wisely.

There are many free and paid themes out there in the market.

The best place to find free WordPress themes is the WordPress theme library itself.

Here you will find hundreds of themes.

I personally recommend Astra and Kadence theme, both are free and powerful themes, you can’t go wrong with either of them.

Note:  Kadence theme is not available in the WordPress library you have to upload the theme manually to use it.  

For this guide, we’ll use the Astra theme.

Now to install a new theme

1. Go to your WordPress dashboard by typing YourWebsite.com/wp-admin

Log in with your username and password that you provided at the time of WordPress installation. 

2. From the dashboard go to Appearance > Themes and click on “Add New“.

3. Now type “Astra” in the search box and click on “Install“.

4. After installation click on “Activate“, with that, your theme is installed successfully. 

Astra allows you to import complete website designs to speed up your website creation.

So once the theme is installed you will get an option to install the Starter Template.

1. Click on the “Get Started” button.

2. It will install a plugin once done you will need to choose a page builder, for this guide we will choose Elementor.

3. Next, you will see an entire library of templates with more than 100 designs, some are totally free and some are available with Astra Pro plan.

You can use the filter or search bar at the top to find the suitable template, but for this guide, we’ll go with the first one “Outdoor Adventures” template.

Click on it.

4. Now on the next screen, you can preview the template.

Here you can see how the template looks and the number of pages it has etc.

You can either select an individual template and import it or you can import the entire site. 

For this guide we’ll import the entire site, so click on “Import Complete Site“.

5. You will see a popup where you can see what will be imported.

Just click on “Import” and it will automatically install all the required plugins, widgets and import the content all at once. 

6. Once everything is done you will see a success message. Click on the “Visit Site” button to see your new website.

Now it’s time to customize the theme according to your brand.

Talking about brand the first thing you want to add is your logo.

You can watch this tutorial on how to create a free logo in case you want to create a logo for yourself.

Once you are on the front-end of your site click on “Customize” at the top.

It will open the theme customizer.

Now click on the blue pencil icon beside the logo.

It will open the logo settings click on the image to add your logo from the media library.

Once you select your logo it should replace the old logo.

Now click on the back arrow twice to get back to the main customizer settings.

Note: Wherever you see the pencil icon it means you can customize it from the customizer settings. 

Now the next thing you want to do is to match the website color with your brand color.

To do that from the main customizer settings go to 

Global > Colors > Base Colors

Now change the colors according to your brand colors, the changes will instantly reflect on your site in the right panel.

Don’t forget to click on the “Publish” button at the top to save the changes. You have to do this every time you make any changes to the customizer settings. 

If you want to change the typography of your site the process is very similar.

From the main panel go to

Global > Typography 

From here you can change the base i.e. the body and content font and your heading fonts as well.

Here you can adjust the fonts of each heading individually.

Always click the back arrow at the top to get back to the main settings.

In a similar way, you can adjust other global settings like buttons and the container.

Now if you want to adjust your header and footer you can do that too.

To adjust your header go to

Header > Primary Header 

Here you will find different header layouts to choose from along with some other settings.

Play with it to explore more.

For footer just click on “Footer“.

You will find two options

• Footer Widgets
• Footer Bar

Where you can add some text and widgets according to your requirements.

Once all the changes are done click on the “Publish” button and click on the “X” icon to close the customizer.

Note: I have covered the most common customization options only feel free to explore more to make your website unique.

Widgets in WordPress are ready-made content blocks that can be used in different places like sidebar, header and footer depending on your theme.

To add a widget go to

Appearance > Widgets

Here you can see all the available widget areas where you can add widgets, just drag and drop any elements from the left side to any of the widget areas.

Once you add a widget you can configure some basic settings.

Note: Remember the number of widget areas and available widgets depend on themes.

Now that we have customized the site it is time to add content to it.

In WordPress, we can divide the content into two types

• Pages: are static type content of your website.
• Posts: are your blog contents which are listed according to the date.

A standard website would have the following pages

• Home Page: It is the front page of your website where the visitors will land typing your domain name.
• About Page: It is the page that tells what your website is about.
• Contact Page: From where people can contact you.
• Blog: It is the page where all your post articles will show.
• Service Page: If you do business, consulting, or offer any kind of service then this page is to show them.

Now let’s see how we can create the pages, once you learn the process you can create any type of page.

If you have followed along so far and used the “Outdoor Adventures” template then it has already created all the pages mentioned above for you except the Blog will do that later.

So the home page should look something like this

You can edit everything you see on this page like the content, structure, style, text, image, button everything with the power of elementor page builder using simple drag and drop.

To edit the page just click on the “Edit with Elementor” button at the top.

It will open the elementor editor, it has all the widgets on the left panel and the canvas i.e. working area on the right side. 

For texts just click on it and start editing it’s as simple as that.

You’ll find more styling options on the left panel.

For other elements just click on the element you want to edit and all the editing options will show on the left panel.

From there you can change the content, style and add some advance styling as well.

The best thing about this is that you can see all the changes live.

Now to add any new widget or element on the page just click on the small square icon at the top.

It will show all the available elements.

Just drag the element you want to add and drop it to the section you want.

Similarly, you can even drag and drop to re-arrange any element on the page and even re-arrange rows and columns.

The ideal way to edit any template is to start from the top and replace the content, block by block.

Once the changes are done click on the “Update” button at the bottom to save the changes.

This is the exact process you can follow to edit other pages as well.

We are using the free version of Elementor here, as you can see it is extremely powerful and easy to use.

It should be good enough for most basic websites but for creating more complex websites you can try Elementor pro.

So far whatever pages we have on the site is automatically created by the Astra Starter Template plugin.

Now let’s see how we can add a new page.

To add a new page go to

Pages > Add New

The WordPress editor will open.

Add a “Page title” for example we are creating a portfolio page name it as “Portfolio”. 

Then click the “Edit with Elementor” button at the top.

It will open the elementor editor.

From here you can either create the page from the ground up using the drag and drop method shown above.

Or you can import an elementor template.

To import a template click on the folder icon.

Now you will see lots of pre-designed templates in a popup.

Templates with the “Pro” badge at the top are only available with the pro version but there are free templates as well.

Choose the template you like and click on the “Insert” button. 

The template will be added to your page.

Now use the elementor editor to edit the content and design, and you are good to go.

Make sure to click the “Publish” button once you are done.

If you want to post regular updates or news about your company, product or services then the blog is the best place to do it.

So let’s add a blog page, we’ll follow the previously mentioned steps

Pages > Add New

Add the title as “Blog” and click on “Publish” twice. 

Note: Don’t add any content directly on this page it will be dynamically added once you add posts.

Now we will add blog posts.

i) Adding new blog posts

Adding a blog post is similar to adding a page.

Go to 

Posts > Add New

It will open the WordPress editor and just like for pages we’ll add a title to the post.

And start typing below just as you would do in a word document.

If you want to add any blocks click on the “+” icon at the top and click on the block you want to add it.

Select a block you will see some additional options and setting on the right panel and at top of the block as well. 

Note: You can use elementor to create posts as well but ideally you should use the WordPress editor for blog posts. It is easy to create long-form content there.

You can add a featured image to your post, to do that click on the “Featured Image” tab on the right and select the image from the media library.

Once you have created the post click on the “Publish” button at the top to publish the post.

ii) Assigning the blog page

Since we have created some blog posts now it is time to assign the blog page where all the blog posts will show.

To do that go to

Settings > Reading

Then under the “Posts page” select the “Blog” page created earlier.

Then click on “Save Changes“.

Now the blog page will start to show all your latest posts.

iii) Customize the blog and single post

You can customize some settings in the blog using the customizer we used previously.

To do that go to

Pages > All Pages 

Look for the Blog page and click on “View“.

Once the page is opened click on the “Customize” at the top.

The customizer will open you are already familiar with it, click on “Blog“.

From there you can customize the settings of the main blog page and the single post page.

You can choose which elements you want on those pages.

You can also control the sidebar from the customizer.

Click on “Sidebar” and select where and how you want to show your sidebar.

Once you are happy with the changes click on the “Publish” button at the top to save the changes.

With all the pages created it is time to add a menu to the site. With the imported template we already have a menu but let’s see how you can add on your own.

Creating a menu in WordPress is very simple.

1. Go to Appearance > Menus

2. Add a menu name and click on the “Create Menu” button. You can name it anything but a proper name will help to recognize it easily.

Note: If a menu already exists and you want to create a new menu then click on “create a new menu” option.

3. Look at the left panel, you can add any items from there, say you want to add pages click on “Pages” it will display all pages. Select the pages you want to add and click on “Add to Menu“.

4. You can drag and drop to re-arrange the menu items, in similar way you can create submenus as well.

5. Choose the menu display location, it varies from theme to theme for this choose “Primary Menu”, then click on “Save Menu“.

Now the new menu should show on your site.

With almost everything set up, we need to fix the default WordPress URL.

For posts by default, WordPress sets the URL like this “YourWebsite.com/yy/mm/dd/post-slug” but this is not SEO friendly URL means your posts may not rank well in search engines.

A good SEO friendly URL will be like this “YourWebsite.com/post-slug“, now to change the URL structure

Go to Settings > Permalinks and choose the “Post-name” option and click on “Save Changes“.

Now you will see your post URL is much more simple.

If you want to add some additional features beyond what your theme provides then you can use WordPress plugins.

Well, you might be familiar with them already because the elementor page builder that was used for editing pages is a plugin itself that was installed with the template.

Now let’s see how to install a plugin separately, for example, we’ll install a security plugin.

Installing a plugin is very similar to installing a WordPress theme with just a few minor tweaks here and there.

1. Go to Plugins > Add New

2. Now type “Wordfence” in the search box and click on “Install Now“.

Note: When installing a new plugin make sure to check the “Last Update” status, If you see a plugin is not updated for years it’s probably not maintained anymore and it can cause security issues.

3. Once installed click on “Activate” and your plugin is installed.

Some plugins will require you to configure some settings to work properly.

If you have followed the steps properly, you should have a working WordPress website now.

It wasn’t too tough, was it?

But we have just scratched the surface here, there are a whole lot of things you can do with WordPress.

So keep learning.