How to Create a Website; Step by Step in 2020

Did you know that an average web designer/developer charges you over a thousand dollars for doing these below steps? Also, they will keep charging you for creating new pages, managing blogs, installing addons, and so on.

This step by step guide makes sure you create a website in just minutes; free of cost and free of developer or any coding language.

Level: Beginner

Let’s get started.

Who will benefit from this guide & how to follow it?

I would say anyone who is interested in creating their own website from scratch. Each section is divided into easy steps so you will be able to follow along and revisit steps whenever needed.

You will learn how to sign up for a domain + hosting server and scale up when website visitors increases. How to install the best website platform that is stable and provides security updates regularly. Later you will find out more about installing free themes for your website depending on the niche(blog, shop, landing) and customize it.

If you are overwhelmed or confused at any part of the guide feel free to contact me, I will help you get through it.

STEP 1 – Get Domain name & Hosting

What is a Domain name & Hosting?

In simple terms; the domain name is like a contact address for people to find you whereas hosting is the house where you put all your stuff. Check below for details.

  1. Domain – Also called domain name simply means your website name. e.g: www.google.com
  2. Hosting – An online location(in technical terms- web hosting server) where all your files, images, HTML, PHP required for your website are stored.

So how to Get a Domain name and Hosting?

There are thousands of websites online that will help you register a new domain name and hosting. Most of the websites will also provide combo offers for new customers so you should get great deals on starting your first ever website.

Some of the mass favorites and my own favorites include: Hostinger, FastComet & WpEngine

Hostinger offers affordable services when FastComet is a balance between price & performance. WpEngine on the other hand is the best when compared to any hosting providers; but costly.

Hostinger Vs FastComet Vs WpEngine: Which one to choose?

Simply go for Hostinger if you are just starting with your website and as of right now it has a 76% discount for new customers. Once your daily visitors hit 1000-5000 visitors/day then start with FastComet. And if you have highly targeted customers then I suggest moving to Wpengine; that is when every 100ms loading speed difference matters.

Price comparison
Hostinger FastComet WpEngine
hostinger fastcomet wpengine
Domain $8.99/yr $9.95/yr
Hosting $9.59/mo $9.95/mo $35.00/mo
Hosting $28.08/yr (76% Discount) $35.40/yr (70% Discount) $350.00/yr (2 months free)
Annual Bonus Free SSL + Free Setup + Business Email Free SSL + Free Setup + Free Website Transfer Free SSL + Free Setup + Genesis Themes
Alternatives Hostinger, Godaddy, A2Hosting SiteGround, ChemiCloud Kinsta, Flywheel

Here’s what experts in the field are saying.

About Hostinger

Hostinger’s starter accounts have some significant limits, but they’ll still work for some, and otherwise its products offer plenty of features and powerful cPanel-like site management for a very fair price. Mike Williams @techradar.com

About Fastcomet

FastComet strikes a perfect balance between price and provisions, offering a great set of features at a decent cost, and for that reason, they get a glowing recommendation. Brenda Barron @digital.com

About WpEngine

WPEngine is VIP WordPress hosting. Their hassle-free hosting offers fast and robust servers that can handle anything. Your website is practically hacker proof, and their mind-blowing customer service makes you feel like king. Syed Balkhi @wpbeginner.com

Hosting Types?

If you have checked Bluehost or FastComet you will soon come across Shared, VPS, Dedicated hosting or maybe even Cloud & WordPress hosting. I will tell you the differences and which one to pick for your business.

shared-vps-dedicated
Shared vs VPS vs Dedicated Servers

^^ If you look at the comparison above you will notice that:

Shared Hosting servers host a lot of websites on them. Slow performance compared to VPS & Dedicated but quite affordable for starting any business.

VPS Hosting on the other hand is almost like a dedicated server with dedicated RAM and hard disk allotted to them. On any given server there will be 5-10 websites. Medium to high end websites can be hosted on these type of servers.

Dedicated hosting is just what it sounds; its for only one website or for one’s personal use. They are fast and reliable but price will be high. Usually for high traffic websites with 50-100k users/day.

You might have noticed that I haven’t mentioned Cloud hosting like AWS and Google Hosting. I would say if you are a beginner then these services will be hard to use. What makes cloud hosting amazing is the flexibility in pricing. You pay just for the resources you use.

How to signup for this hosting?

Here are the step by step process to get a domain name and hosting all together in one go. I will be using Hostinger for this example but you may go for any others as well; usually similar process.

1. Go To Hostinger.com and pick a hosting plan

In this screenshot the discount of 90% is for 5 year plans; otherwise you get 76% discount.

^^ As you see above there are three plans for shared hosting:

  • Single
  • Premium
  • Business

I would usually go for “premium” as it is much faster in loading pages than the base plan “single” and you also get a 1yr free domain name, which is great to start. However, you can start with single shared hosting for starting your first business website.

2. Next pick length of subscription

^^ In this page you will be able to pick your subscription length:

  • 1 month – usually costly
  • 1 year – 76% Discount
  • 2 years – 82% Discount
  • 5 years – 90% Discount

If you ask me I only go for 1 or 2 year contract/subscription with any hosting company. Just my personal choice. 

3. Choose a domain name

Before clicking that checkout button you need to do one more thing. Search for your domain name and add it to cart as well.

Type your domain name in the field and search for availability
Get more ideas for your Domain name; then add to cart
Next step is to sign up with your email address and its all done.

You will receive email with sign up success. The step 1 of our tutorial is complete. Let’s move on to next step.

STEP 2 – Setup and create WordPress website

Once you have completed step 1 where you bought a domain name and a hosting server, the next step is to install WordPress.

Before we move on installing your first website you should know a bit about WordPress. What is WordPress? Why you should use it for your business website? What are the alternatives? What is HTML & CSS? I recommend this section for beginners.

What is WordPress?

WordPress is one of the most popular content management systems that help you build your website and lets you easily organize, edit, update your website without any coding knowledge. I can talk about WordPress all day but all you need to know is, it is the best technology to start a website.

There are many methods to create your website online and here are the most used:

  1. Write HTML, CSS & PHP(Requires full coding knowledge)
  2. Use website platforms like WordPress, Joomla, Drupal etc (No coding)
  3. Use website builders like WIX, Shopify, Squarespace etc (No coding)
Comparison: HTML vs Website platforms vs Website builders
HTML & CSS Website Platforms Website builders
Ease of use For web designers For beginners For beginners
Type Small websites(resume, business portfolio) Content Rich Websites(ecommerce, blogs, applications) Medium sized websites(portfolio, small shops)
Price High initial cost Free Medium cost
Customization Low Very High Medium
Speed Fast in most cases Medium – Fast Medium – Fast

^^ In the comparison above you can clearly see that website platforms have clear edge over website builders and plain HTML & CSS language. Among website platforms(which sometimes also called CMS-content management systems), WordPress tops the list.

So why is WordPress so popular?

Here are the recent cms statistics of top website platforms used around the world.

WordPress is known for its plugins and easy to use features for beginners and advanced users alike. (Citespot is using WordPress as well so does most of your favorite blogs)

Let’s Install WordPress

Login to your hosting control panel. In most hosting services you will find an auto installer app which will help you install multiple content-management systems including WordPress.

Hostinger control panel
You may also pick other CMS(WordPress, Drupal, Joomla, Prestashop)

However, for the sake of this tutorial, we will move forward by installing the WordPress platform. Click on WordPress to continue.

Enter your credentials to finalize the installation of WordPress.

Step 3 – Pick a free theme for your website

In Step 2 we successfully installed WordPress but for further customization and content editing, we need to go to the WordPress dashboard.

Login to WordPress Dashboard by adding /wp-admin/ at the end of your website URL.

eg: http://yourwebsite.com/wp-admin/

Enter your credentials and login to continue

Then go to Appearance → Themes then click to search for your favorite theme. Here we will be installing the most popular free WordPress theme “Astra”. Astra is also a feature-rich theme that allows you to create new pages using visual drag and drop options.

Search “Astra” in the themes catalog and then click install → activate.

After you have activated the theme you will be directed to the Astra options dashboard. Right now the basic theme installation is complete. However, we need a demo layout to quick start our website design. Astra theme has 30 free templates for building any type of website.

Let me show you how to import a demo template in Astra that matches your business requirements. First you need Astra starter sites plugin which can be installed from the Astra options panel as seen below.

Install Astra one-click demo import plugin
Choose Elementor(a popular drag and drop visual page builder)
Pick your favorite website design
Finally, click the import site option.

Great. You just successfully installed a working WordPress theme and a free demo layout. From here on we have to edit content on the homepage, create new pages if needed and so on. Next step in this guide will help you setup and customize your WordPress website with all essential plugins and also do some basic content management.

Step 4 – Customize your WordPress website

Back to Step 3

In step 3 we installed a free theme with a clean layout and now we will continue to customize the website as needed.

So before getting started with the drag and drop feature(which is fun) we will make permalink changes, create custom pages, install WordPress plugins and write a blog post.

A. Initial WordPress setup B. Create new pages C. Write a blog post D. Use a page builder
Basic Settings plus installing essential plugins Like say services, contact & about pages Also, manage/rename a blog page(which lists blog posts) Lets you build/modify pages fast.

A. Initial WordPress setup

After a fresh WordPress installation there are a couple of recommended actions to do at our end.

1. Change permalinks settings

Permalinks often known as SEO friendly URLs makes it easy for your website users and google spider to better understand your website content. These URLs also are one of the SEO factors in ranking a website besides title & content. If you are still confused with the permalinks and how it works. Here, let me show an example:

SEO-Friendly URLs

https://designseer.com/themes/

Bad URLs

https://designseer.com/?p=123

^^ Which one of the above do you think is better. So you get the point. The WordPress permalinks settings give you multiple options to set up your URL but for most of us, the “Post name” option is the best.

In WordPress Dashboard; Go to Settings → Permalinks to make changes to your URL structure.

Change permalinks settings for SEO-friendly URLs

2. Change Logo

This one is easy. Go to Appearance → Customize, this will open the WordPress live customizer. In the left sidebar go to Header → Site Identity and you will find the option to change the site logo. Upload your logo and you are done.

Add your logo to the website with WordPress customizer

3. Install essential plugins(SEO, caching, security, contact form)

Basic WordPress installation doesn’t include plugins for SEO, caching & contact forms. Here in this section I will show you how to install these plugins or any plugin you need for your website.

For installing plugins, go to WordPress dashboard as usual, then under Plugins → Add New to start adding the plugins, just by searching for one and clicking install & then activate. Check the below screenshot which shows a search for caching plugins and my pick here for this tutorial is WP Fastest cache.

Installing a WordPress plugin

Now that you understand the basics of installing a plugin, you can go ahead and install these essential plugins. The process to install plugin is same as shown above. Just search the plugin to find them, that is all.

SEO Caching Contact Security
Most popular Yoast SEO WP Fastest Cache Contact form 7 Wordfence Security
Ease of use Easy Very Easy Easy Medium
Why use it? To improve website ranking Speedup website It lets your website visitors contact you Website firewall, scan for malware, virus & more.

Security plugins can be avoided if you use Cloudflare as your DNS and when you have a solid hosting like the ones I have recommended. Also, adding more than one plugin for a single cause will conflict, slow down website and in rare cases cause server errors. So, in short, don’t add more than one SEO plugin on your website.

B. Create New Pages

Here in this section we will find out how to create a new page in WordPress, how to access them from your homepage via the navigation menu.

Once you are logged in to the WordPress Dashboard there are couple of easy ways to create pages:

  • Go to Pages → Add New (or)
  • On top of Admin bar (New) → Page

The below screenshot will give you a rough idea.

Once you have opened a new page – Add title and content(text, links, images, video) then hit the Publish button. All done.

The below screenshot shows two ways to add/edit content. There are some reasons I’m showing you this:

  • The default editor(known as Gutenberg) is for beginners
  • If you know a bit of HTML and into web designing then Classic Editor might interest you a lot.
Gutenberg in action
Creating new pages in WordPress (Default method: Gutenberg Editor)
Creating pages with Classic Editor

Gutenberg(Default) vs Classic Editor

By default, WordPress comes packed with Gutenberg editor but many of the WordPress users(including me) still love the old-school Visual/Classic Editor as it offers more room for adding/manipulating HTML code when required. You may stick with the default Gutenberg editor but it you want the Classic Editor then you have to use a plugin to disable the former. Here is the plugin “Disable Gutenberg” or this one by WordPress contributors “Classic Editor“.

Access your New page from the main menu

This is an additional step you have to do if you want users to access a newly create page from the navigation menu. Also, navigation menu is a global item meaning it will show up on all pages, categories and posts of your website.

Here’s how it’s done.

  • Go to Appearance → Menus
  • Select a page then click Add to menu.
  • Last step is to save the menu.

The page will now show on the navigation menu of your website. Here is a screenshot of the process.

C. Write a blog post

In Step3, we installed a business website and now you found out that blogs are beneficial for any website. Good, about time you found that out.

Blogging is one of the best methods to bring website traffic without any capital costs or marketing. Every website in my opinion should have a blog even if it’s not a full-fledged blogging site.

Here in this part of the tutorial you will learn how to set up your blog, create your first blog post and optimize it for better search engine visibility.

The steps are similar to that of creating a new page but this time you have to click post instead of page.

  • Go to Dashboard, then under Posts → Add New 
  • (or) use top Admin bar, New → Post
1. Creating a blog post
2. Add title, content and then hit Publish to complete.

See, all done and it was that easy.

Well, wait a minute, where does this blog post show up?

There are two settings which will make your blog posts show up to the visitors. Let me show you these settings in WordPress which does just that. Go to Settings → Reading(refer screenshot below).

Installing a blog to your existing website

Confused? No worries I will you tell what each setting does and why there are two settings.

If you have installed Astra WordPress theme as shown in Step 3 you already have a landing page on your homepage.

e.g URL of a Homepage: http://yourwebsite.com/

Next you have to create new page(steps here) and call it blog or any name you find useful.

e.g URL of this new page: http://yourwebsite.com/blog/

Side Note: It’s confusion when you think about it; as a page is required to show all your latest blog posts. That’s how WordPress does it for development reasons.

So now you should be able assign the homepage and this new (blog) page we just created under Settings → Reading → A static page. Check the above image for details.

Next you might want to link this new blog page to your navigation menu(how to link page to menu).

All this point you should know how to install WordPress on your hosting, pick new themes for your website, import demo layouts(if theme has them), customize your website – like installing plugins, creating new pages & posts and adding them to your menu if needed and so on.

D. Use a page builder

When customizing WordPress pages, posts and even custom post types a page builder plugin will come in handy. Page builders lets you make animations, parallax effects, font edits, responsive design without any coding.

If you have installed WordPress theme by following Step 3 then you should have Elementor page builder plugin on your website. If you haven’t done that yet just go to Plugins → Add New and search for Elementor to install it.

Why pick Elementor?

Elementor is free and yet it gives you ready-to-use templates, advanced modules, custom design features and, visual drag and drop option to build your pages. Compared to other page builders, Elementor is user-friendly and fast.(will do a comparison soon)

For this tutorial we will stick with the free Elementor plugin; it will be enough for most of us.

Let’s dive in.

If you check your WordPress admin bar you will notice that there is an option “Edit with Elementor”. This option will be available under all your posts and pages throughout the website.

For editing pages with Elementor page builder

Once you have done that you will be taken to Elementor editing mode. The left sidebar is called Elementor Panel, this panel lists all widgets that you can add to your website and the settings you can make to your current page elements.

If you check the below screenshot you will see I’ve edited the page content and even changed the image. To start editing just click on that element. This will bring the editing mode on the left panel. Go ahead and add your content, styles and advanced settings(its easy too).

Click on page title or any content to edit it.

Play and learn; its fun with Elementor. If you need more tutorials, then the best place to start is here.

Conclusion

You are a pro, you did it. After some practice you will be designing your own websites and even for your friends and family. As I said, you don’t have to spend 1000s of dollars for website design; all you need is patience and the urge to learning something new.

I will update you here with new content updates. Revisit and bookmark(Ctrl + D) for future reference. Good luck. :)

Leave a Comment