Whether you're a business professional, own a physical store or provide services, having a website is a must. Not only it makes you look more competent and reliable, but it also makes your business visible online and easily accessible to possible customers.
However, building a website from scratch might sound intimidating - coding HTML, paying a good buck for hosting and custom designs come to mind.
But that's really not the case now. Everyone can build a professional-looking website for personal use or business.
The best part - you can make a website yourself in less than half an hour without putting a dent in your bank accounts.
|Experience Level||Time Spent||Result|
|Beginner||±30 minutes||Live website with a custom domain|
And if you prefer to see the website making in action, we made a video!
In this website making tutorial, we're going to cover the following:
- How to set up a hosting account and buy a domain name
- How to build a website using WordPress
- How to customize the design, pages, and menu
- How to install WordPress plugins
- How to publish your first post
Let's get down to the building part!
Step 1: Set Up Your Hosting Account and a Domain Name
In order to even start making a website, you will need two things - server space and a domain name.
Hosting can be compared to a house where all of your information (in this case, your website) can be stored. There are many different hosting types at various price points. However, for your first website, shared hosting is the best option.
Shared hosting is the most cost-effective choice - it's budget-friendly and can provide enough resources to host even a small online store. Shared hosting refers to the server resources being shared by multiple different users. That's why it can be so affordable.
In this tutorial, we're using Hostinger because of its affordability and reliability. However, the registration and setting up process should be similar if you choose a different provider. We've put a list of the best web hosting providers in the industry if you'd like to choose your own.
To start, head to Hostinger's site, click Get Started and pick the Single Shared Hosting plan. Be sure to select the SSL certificate, if it's not already included for free. An SSL certificate is a crucial security element that your site must have. You can also set up an SSL completely for free and on your own. However, providers sometimes offer them for free or for a rather low price to save you a headache.
Next, pick the amount of time for how long you want to pay for your hosting and a domain name. Typically, choosing the longest periods will give you the lowest cost per month - so I went with 48 month period.
Now that we've chosen the hosting plan, we need to register a name for your website. A domain name is an address that other people will use to get to your website. You most likely want your domain name to end in .com as this is the most popular domain extension. However, you're definitely not limited to this.
Unlike a server, a domain name isn't something that has different stats or performance - if you have it and it's registered, you're all set. The things you should be looking for in your domain registrar are price and enough TLDs (Top Level Domains eg: .com, .eu, .net, etc.).
In terms of price, many providers tend to offer a great price cut if you buy hosting and a domain name together. So you may as well save money and buy them in a bundle. So I've also used Hostinger to register my two domains of choice - tech2stream.com and tech2stream.online.
Click Add to Cart and we're ready for checkout!
When checking out, use the coupon code HOSTINGREVIEW to get an additional 10% off!
Once you choose the payment option and make the payment, head to your Hostinger Management Panel at cpanel.hostinger.com. Click Setup next to the hosting plan you've purchased. In this case, it's the Single Shared Hosting.
Here, you can choose the domain if you bought several of them as well as the data server location. You should choose the data center that is the closest to your website visitors. If you expect the majority of your traffic from Europe, choose the European server. If your site's target audience is from the US or Asia, pick the corresponding one.
Finally, click Continue and congratulations! Your site is now live and accessible to the public via your chosen domain name. To check if you can access it, simply try and visit the website using your browser.
Now, let's actually set up the site, design it and add content.
Building Your Website with WordPress
Once you have your hosting account up and running, you need to set-up your actual website. And there is a number of different ways to do it. I’m talking about website builders, coding HTML sites, and content management systems (CMS).
So how do you choose your platform?
After a website builder, CMS is the second easiest way to build your site that does not require coding knowledge. For this tutorial we’ll be using WordPress - it’s one of the most user-friendly CMS that powers over 30% of all websites.
Of course, there are many different CMSs that will work for different kinds of users. For example, Joomla works for complete web development newbies while Magento is a powerful eCommerce platform well-liked by developers.
There are many others - hundreds of them to be honest, but WordPress still wins.
Why choose WordPress?
- The platform is free - you only need to have a hosting account (which, you already have if you followed the steps), a domain name, and some spare time.
- It's easy to learn - although WordPress requires some skill, even a beginner can manage it. Everything is installed by a couple of clicks - including themes and widgets and is customizable live.
- It has a huge community - WordPress even organizes meetings worldwide so the community can share their experience. With that in mind, you’ll find tutorials for every tiny part of the CMS and experts that are able to help you.
So, using WordPress you’ll save a couple of bucks that you would otherwise spend on a website builder and have a way more flexible platform. Also, you’ll take a sneak peek into the web development world!
Step 2: WordPress 1-Click Installation
Many hosting providers have one-click installations for the most popular CMSs available. And so does Hostinger.
So, navigate through your hosting control panel and find the Auto Installer icon. Click on it and you’ll be redirected to all the available platforms. WordPress should be one of the first choices, so locate it and click next.
You’ll need to create a WordPress account, so think of your username with a safe password and click next.
In the following window, enter the Title of Your Website and click Install.
Now, you have a functioning website! You can reach it through your domain name and, if you want to manage and customize WordPress, you can type your website name and add /wp-admin.
From the WP Admin panel, you’ll be able to design and customize your website.
Step 3: Choosing Your WordPress Theme
Now that you have a website to customize, we can move on to the more interesting stuff. The first fun part is choosing a theme.
First, log in to your WordPress admin panel. On the left is the main menu where you can manage all the things related to your website - from posts and appearance to comments and users.
You'll find all the WordPress themes under the Appearance > Themes menu option.
From this menu option, you’ll be able to either install an existing or upload a 3rd party theme.
WordPress has several hundred if not thousands of free and premium themes. But your choices are not limited to that. Some of the best WordPress themes are actually third-party ones, so you can explore that selection as well.
When it comes to editing the design, there are two ways of doing that: using a drag-and-drop editor or writing code by hand. Of course, using a drag-and-drop editor is much easier and less time-consuming. And while WordPress itself does not feature drag-and-drop editor, some of the themes come pre-packed with such or similar functionality.
We’ve decided to go the easy way and combine one of the WordPress themes with a drag-and-drop editor.
We chose Elementor - it is a powerful drag-and-drop editor designed to turn WordPress into an easy to use website builder. Elementor is easily integrated with the majority of the themes and the best part - it is free.
The free version of Elementor allows you to use probably 90% of its full functionality. So if you're not planning to build websites as a business, you can use the editor's free version and it will be more than enough.
WordPress themes is another topic. We chose Astra as it is recommended by Elementor itself. This means that it will allow us to explore the editor's functionality to the fullest. Astra also has many different templates to choose from so that's a big bonus too!
Step 4: Installation of Astra and Elementor
To install the theme, once again go over to the Themes menu and click the Add New button. In the search bar, type in “Astra.”
Hover over the theme and click Install and once that is done - Activate buttons.
Click the Get Started button and now you will be able to choose a website builder. We recommend you go with Elementor for the Astra theme.
As you can see, Astra has hundreds of paid and free templates - just like WordPress. You'll find different ones for basically any kind of industry - small business, portfolios, eCommerce, blogging, and all you can think of.
So take a good look and choose which one fits your website idea best.
Even if you see a template which you like for a different industry, don’t worry - you’ll be able to customize everything.
So, click on the Free tab to see the templates you can use for free. Once you’ve decided which fits your website the best, click the Import button.
Once that’s done, you can view how your website looks with the template on. And if you’ll go back to the WordPress Admin panel, you’ll be able to make it even better and customize according to your needs.
Step 5: Customizing Pages and Page Elements
Before you begin customizing visual and content stuff, it's easier to get the website structure straight.
Each of the Astra templates comes pre-packed with the default website structure. You can either edit the page titles, delete them completely, or add new - all depends on what you need.
To build your own business website, you might want to add "About Us" and "Services" pages, while restaurants may want to include a "Menu" page.
Once again, from the WP Admin panel, navigate through the main menu and find Pages > All Pages options.
Mark the pages to move them to the bin or edit and click on Add New to customize a new page - the system is really easy.
From this menu, you can also post content to your pages, but let's skip that for now - you can do the same with the Elementor drag-and-drop editor.
Now, we can go and start with more visual stuff.
To start creating your own website design, adding elements, and customizing pages, click on the Edit with Elementor button.
Elementor is a drag-and-drop editor, so you can actually push and pull any element of the website anywhere you want to. That goes for content, images, buttons, etc. Plugins like that turn WordPress into a powerful website builder so designing a website becomes as easy as changing your desktop picture.
Changing text elements
You can simply click on the existing text element and type your own text.
On the left, you’ll see all of your customization options. By clicking on Text Color in the Style panel, you’ll be able to choose the color of the text as well. Typography allows customizing font size and more advanced text settings.
To delete any of the website elements, right-click on it and choose Delete.
You could use keyboard shortcuts “ctrl-shift-Z” and “ctrl-shift-Y” (cmd-shift-z and cmd-shift-y for Mac) to “undo” and “redo” if you made a mistake. You can find a full list of hotkeys here to make editing even quicker.
To change call-to-action or other buttons on your site, click on the button and the customization panel will appear on the left. Change the link, text, color, etc. to customize it according to your needs.
Step 6: Adding And Changing Images
Images are customized just like any other website element. However, you can upload your own images, drag, and then drop them anywhere you want to.
This section is especially important if you are building a website for photography, art, or portfolio. You'll learn how to easily rearrange your works so they look their best.
But if you don’t have your own images and paying for stock photos is not a solution for you, there’s a pretty good selection of free ones at Freepik.com or Pexels.com.
The same goes for the icons - you can find hundreds of free ones at Flaticon.com.
You can edit an image by clicking on it and then choosing an image in the menu on the left.
Upload any image or media and simply drag and drop it in the section of the website you want to see it.
In our case, transparent images look best, although it depends on what template and website style you've chosen.
Image size and position
You can change the size of an image by clicking the image and under the Style menu item adjusting the width - you'll see changes in the live preview window.
To reposition images, you can, of course, drag them to different places or go to the Advanced section.
There you’ll find a small percentage sign. On the right, click on the chain icon to separate values and adjust the position by changing the percentage.
In the same menu on the left, you'll also find motion effects, background, border, and other settings. This is the place where you can write custom CSS as well.
Step 7: Editing Menu
To edit the menu, you’ll need to use the WordPress admin panel. So simply head to the panel and click on the Customize button and head to the Menus option. Then you can drag the menu items and switch places.
You can also reposition the whole menu header. Head to Layout > Header > Primary Header and choose the position. Once you're done, press Publish.
In the Primary Header options window, you can also disable the menu. This feature can be useful if you're making a minimalistic one-pager or parallax-scroll website.
Step 8: Installing WordPress Plugins
What a simple template cannot, WordPress plugins will do. Plugins are used to achieve the wanted website functionality - whether you want to add forum, eCommerce, email forms, etc. - you can do it with plugins. WordPress has over 55,000 of them.
And not only do they add functionality, but can help you manage the website as well. You've already tried Elementor that adds website builder functionality but there are more.
You'll find different plugins for SEO, email, security, backups, and others. So depending on what you need, you might think of installing a couple of plugins.
You can locate all the plugins under the Plugins > Add New menu option. So click on it and search through. You can install the plugin you want by simply clicking Install Now and then Activate buttons.
After you install the plugin, you can update and manage it under the Installed Plugins section. I must mention though, that you'll need to choose your plugins wisely.
Plugins can become a security risk if they are not updated or clash with other plugins. So if there's a way to avoid using many different plugins on your site - do that. On the other hand, there are many reliable and constantly updated plugins that you can use safely.
So what WordPress plugins you might need when building your website?
1. If you are creating an eCommerce website to sell products or services online, we recommend WooCommerce. It is one of the best eCommerce platforms which you can use for free which is designed for WordPress.
WooCommerce has dozens if not hundreds of its own templates but you can also use it with Astra and Elementor editor. In fact, that will even be easier.
The platform will allow you to manage your online store from top to bottom - add or import products, create a beautiful storefront, accept payments, manage shipping options, calculate taxes, and much more.
WP Live Chat Support plugin is free and constantly updated, so you don't have to worry about security threats. You'll be able to use it to chat with your users or provide customer support.
Also, it is possible to customize the live chat window to match our website style.
3. For business websites or blogs that want to send newsletters, WPForms is one of the best tools.
WPForms is a freemium plugin, meaning that you can try its functions for free, but to get the whole functionality, you'll need to pay. On the other hand, this means that the plugin is kept up to date and functions properly.
In the video, Emit explained how you can use WPForms with your professional business email in more detail.
4. And of course, all websites need SEO to be intact and Yoast SEO is hands down the best option.
Yoast SEO is also a freemium tool but for small websites, its free functionality is more than enough.
And while WordPress itself is pretty good at SEO, Yoast helps you write better content, control site breadcrumbs, template meta titles and descriptions, bulk-edit, and much more.
So once again - keep your plugins updated and you'll have not only fast, well-optimized but also a functional website that generates good amounts of traffic.
And when you have all you need installed, we can go on and get you on-air with your first post!
Step 9: Publishing The First Post
WordPress makes it really easy creating pages and posts. It uses a powerful content editor that also allows you to create heading structures, adding galleries, setting featured images, allowing discussions and more.
So, let's create your first post.
Hover on to Posts menu item and click Add New. You'll be redirected to the editor where you can write a post or upload pictures - whatever you prefer.
If you installed Yoast SEO, you'll see settings down below. Don't forget to add a nice and catchy title and meta description.
Once you're done editing, simply press Publish.
Congrats, your website is live with its first post! Now you can continue publishing and further customize your site.
How to Make a Website - Final Thoughts
You don't have to be a pro developer to make a website. In fact, you don't have to be a developer at all.
There are many different tools and software that will help you build a website without needing to write a line of code. One of the easiest ways is to use a CMS.
In order to do that, you'll simply need to purchase hosting, domain name, install the chosen software and start editing.
I chose WordPress as it allows to create any functionality you want. With plugins, you can turn it into a website builder or you can simply write HTML and CSS yourself.
So go ahead, customize your site and share how it went in the comment section down below!