When you want to build a website, the first thing you need to do is decide what platform, software or web programming language you are going to use.
As a beginner, you have two choices.
As a beginner, using a CMS is the fastest way to go about it. Especially if you are not all locked up for a big curve like learning HTML. It might not be suitable and you won’t even be able to create a high-end website in a month.
CMS – Content Management System
Using a Content Management System is the easiest and yet a powerful way to build a website. Anyone can develop a website with little to no coding skills…in minutes.
There are so many content management systems out there to choose from. From Joomla, Drupal, WordPress, Magento and many others
In this guide, I will be showing you how to use my favorite, and yet the best CMS out there, WordPress
Nearly 25% of all websites online are powered by WordPress.
WordPress is the easiest way to build amazing high-powered websites.
It powers some of the biggest websites you know, including The New Yorker, TechCrunch, ESPN, Fortune and so many more.
Here’s why it’s the perfect platform to build your site on:
To get started using WordPress, you need to get somewhere to run it. This is where getting your web hosting and a domain name comes into place.
First, you need to get a domain name so that people will be able to access your website.
I have made a tutorial on this before. Read it here.
But still, I will show you again how to get a reliable web hosting and domain name. I believe you have an idea of what a domain name is.
You don’t have to go anywhere 🙂
A domain name is the address of your website. It’s the unique identifier of your website. This website you are on is “www.ayomidejohnson.com”. So my domain name is “ayomidejohnson.com”. So, you should take note of that, although most people are not newbies to this, I just had to point it out..just in case.
You can get a domain name and host for your website for as low as N350! Yes, you heard. ‘Three-Hundred and Fifty Naira’
Really cheap right? That’s how easy it is, and I am going to show you how to get started.
Now there are several hosting and domain providers in Nigeria, and you might need some time to make a great choice, but to save your time, here is a list of hosting companies I would recommend:
Visit each of those websites, and check out their awesome hosting plans. For this tutorial, I would be demonstrating with SmartWeb.
Smartweb offers hosting packages for as low as N350 and even free domain name packages (Applies to only .com.ng domains).
So let’s get started getting a domain name. Follow this guide and you are sure not to get lost. If you already have a domain and web hosting for your domain, you can skip this step.
We will be using SmartWeb in this tutorial, but the steps to purchase your domain name and web hosting also apply to other hosting companies.
Click Here to go to SmartWeb Official Website. Here is what it looks like when you visit.
Scroll Down a bit, then type in the URL/address you intend using for your Website. Then click “SEARCH” to check for the availability. You can also use the Domain Name Checker Tool on my website to check for your preferred domain.
As a plus to help you, I have written an article on How To Choose The Best Domain Name For Your Website.
The next page will load afterward. All you have to do is type in your preferred domain name again, then complete the verification captcha at the bottom, then click the SEARCH button afterward The next page will load the available domain extensions you can use and the various prices.
I used, “customname.com.ng” as my domain name, just for an example, since I already have an existing domain name and hosting account. Your preferred web address should be the domain name instead.
Here you can see that the name I chose is available and below it are the various domain name packages I can opt into. The .com.ng domain is just N980.00 so you might want to use that. Else, you can use the other packages depending on your requirement and budget.
Once you are ready to purchase, click “ADD TO CART”. A checkout button will appear immediately, simply click “CHECKOUT” and wait for the next page.
Now, you need to also add a hosting package to your cart. You can ignore the other green boxes, for now, just head over to the point that says, “[No Hosting! Click to Add]”, then click on the link. You will be directed to the Hosting order page.
The next page that loads after clicking the link shows you the available hosting packages you have. For starters, you can select the “Standard Package” which costs just N350 per Month/N3500 per year. This plan is good for you, as you can use it to carry out your test projects and start your online business small scale, pending when you will eventually go large.
Click the “Order Now” button to order your hosting.
Your preferred domain name will be pre-entered into the field. So just click “USE” to proceed.
Now, it’s time to checkout finally. You can decide to change your billing cycle from N350 Monthly to N3,500 yearly. Anyhow, you want it. Just make sure it suits your budget, but note that on the N350/Month plan, you will be charged every month, and if you fail to pay up before the required time, your website will be brought down after an extended period of grace. I prefer the yearly cycle, it helps me save money as well.
Once you have decided, click the “Continue” button boxed in red to check out.
On the next page, click “CHECKOUT”
Afterward, fill out the checkout form with the required fields. Also, select your preferred payment option.
Once your order is successful, an Invoice will be generated for you. Then you will be asked if you want to Pay with Card, or make a direct transfer/deposit.
You will find the account details to pay into. Make the payment using whatever suitable method, and wait for a confirmation email.
Immediately as well, your account will be created, and your temporary hosting configurations will be sent to the email you provided. It will look something like this:
I blacked out some information for reasons of privacy, but the email you will get is no different.
You will have to wait for 24-48 hours for your domain to be propagated. Feel free to contact the SmartWeb support team if you have questions and issues, or Contact Me. If you don’t want to go through the hassle of a domain and hosting purchasing, you can contact me too. I will help you out for FREE .
SO! That’s it on getting a domain name and hosting for your website.
Here, I will show you how to Install WordPress on your web hosting account. Before you can move on with this tutorial, do make sure you have purchased a domain name and web hosting.
If not, please head to www.smartweb.com now to get your domain name and web hosting
If you followed the last guide properly, then you can proceed with this guide.
All well-established web hosts have WordPress available to install in one click – including the hosting providers I listed above. It is important you use them as another random hosting company may not offer you that feature.
This option is available from your control panel when you log in to your web hosting account. I will show you how to go about this. Here we go:
Log into your web hosting cpanel. This would be provided to you by your hosting company. In most cases, it is always “www.yourwebsite.com/cpanel”.
Note: “www.yourwebsite.com” should be replaced with your own website’s name; the one you purchased from your hosting provider. As an example, if you purchased a domain name “www.google.com”, you will locate your cpanel as “www.google.com/cpanel”.
If you got that, log in. Once you are logged into your cpanel, scroll down to the bottom of the page, search for “Fantastico F3” or “Softaculous”.
Fantastico and Softaculous are common software installers provided to help you install your web scripts on one click. It is very useful for beginners who don’t know the manual way to install software like WordPress.
Once you click the Fantastico/Softaculous icon, you will be directed to the Software installation page.
Use the search bar highlighted in the image below, search for “WordPress”. The WordPress result will be shown. Click on the WordPress result to get started installing WordPress
Below the next page, click the Large button below to get started. It says “Click here to install a new copy of 4.9.8” which is the Latest version of WordPress at the time of writing.
The next page hosts the Installation wizard. All you have to do is fill them accordingly.
Skip the Directory, Rublon and WP Favs Token field. They are not necessary.
All you need to specify is your Username, Password, Email and the title of your website. In this case, it is more like you are registering an account. So make sure you use a Username and Password you can remember, as well as an email address you have access to.
Most cases, people use “admin” as the username. But your password should be more complicated than that. Your password should be 8 characters or more to keep it secure.
Once you are done filling the required fields, click on the ‘Submit” button below.
The next page asks you to confirm the details you have provided before the Installation takes place. Make sure you review carefully before proceeding to click the “Submit” button.
Once the installation is complete, you should get a page showing you your login details. Open a new tab in your browser, then type in the NameofYourWebsite/wp-admin. In my case, you see its “becktrends.com/wp-admin”. That is the url you will use everytime you have to log into your WordPress admin dashboard. Wait for the login page. In most cases, you will automatically be logged in and if not, use the details provided to log into your dashboard.
Log into your WordPress admin dashboard as explained using the details you gave in your Fantastico/Softaculous installation.
Here, if your installation and log in was successful, this is where you should be. This is what the WhatPress Admin Dashboard looks like as at version 4.9.8. Now let’s go on to the next step.
The next thing we should do is get a suitable appearance for our website, and we are going to do that right from our admin dashboard. On your dashboard, move over to Appearance, then click. Or simply hover your mouse on Appearance, then click on Themes.
On the Themes page, click the Add New button. What we are trying to do here is select a new theme for our website from the WordPress themes repository. There are several thousands of WordPress themes available that we can download and easily apply to our new website.
Once you click the Add New button, you should get here. For this tutorial, I will be using a simple theme called “Hestia“. There are several others you can use, but to get the basics, I advise you follow me. Else if you know what you are doing, you can go ahead with another theme.
There are several themes available and we possibly can’t scroll all the way through them because we are searching for Hestia. So let’s use the search box.
Move over to the search box, type in “Hestia“.
The results should automatically be generated for you. There is Hestia at the right end of the screen, click on the Install button, wait for a couple of seconds for the installation to take place, afterward, click the “Activate” button that appears.
Now, open a new tab in your web browser, then visit your website. You should see this. Then I can wish you congratulations! You have just built your first website, easily!
But there’s still a lot to do, you don’t have a menu, nor pages on your website. Let’s go on implementing those.
In this step, I am going to show you how you can add pages to your new website. Hang on tight! And make sure to always view the images for guidance.
From your Dashboard, go over to the “Pages” menu, make sure you are hovering your mouse over that, afterwards, click “Add New” from the drop-out that appears.
Here is the Add New Page section. Type in the preferred title of your page into the Title box, a little description inside the content box, afterward click on Publish. In my case, I am creating a “Home” page.
View the picture below as a guide.
If followed, that’s just how easy to create pages in WordPress. No recoding HTML tags and templates, no creating a new nav bar, No, none of those. Just type in and Publish!.
Create two pages, Home and Blog
The Video below shows how to create a New Page in WordPress.
In this step, I will be teaching you how to Install Plugins on your WordPress website. WordPress plugins are made to extend the power of WordPress. There are different and thousands of WordPress plugins for different purposes, ranging from E-Commerce plugins, SEO Plugins, to even Contact Form Plugins. Everything you need to run a powerful website in 2018 is here!
Head over to “Plugins” from your admin Dashboard, then click “Add New” from the drop-out list.
Here is the WordPress Plugin repository. All you have to do is search for any plugin you need, Install and Activate. In this case, we need a plugin to help us better build our WordPress website.
In the search bar, type “Elementor“. The search results would get displayed.
There are several other plugins related to Elementor. These plugins help extend the power of Elementor to build even more beautiful things.
Plugins that help extend the power of another plugin are referred to as Add-ons.
Elementor would most likely show up as the first after you search, “Elementor Page Builder”. Click the Install Now button, afterward click “Activate“.
The same method applies to other plugins.
There, that’s the easy way to install Plugins. 🙂
Furthermore on our quest to build a beautiful website, even as a beginner, if you remember, we went on to install Elementor because we need it to be able to create an amazing website with WordPress. If you followed the Elementor link, you’d probably know more. So.. let’s move on.
We created Pages in Step 14. “Home” and “Blog” precisely.
Usually, the “Home” page would represent the front page of our website, and the “Blog” page would represent the Blog aspect of our website.
Just in case I didn’t note out; WordPress is the easiest way to start a Blog of your own. In fact, it was primarily created for Blogging. But with time, WordPress had support from thousands of developers which is why today it is more than just a Blogging software, but a full-fledged Content Management System.
Now, let’s head over to our homepage – we need to edit it.
On your Dashboard, hover your mouse to “Pages” then click the “All Pages” link.
Here is the section that list all of the pages your website is composed of. We are editing the home page in this case. Click the “Edit” link beneath “Home”
If you already Installed Elementor in step 16, you will be able to see that large blue button that says “Edit With Elementor”. This is why you have to follow every step in this guide if you want to get it right. If not, go back to the plugins page, install Elementor, then come back to this aspect.
Click the blue button. The page is going to reload. Wait for a couple of seconds for the Elementor Page Builder to load up. It takes maximum of a minute depending on your data connection.
With your Elementor fully loaded, you will have this page presented right before you. Now you can get started building web pages.
There is a “+” button at the button of the page. Use that button to add sections to your page. Every modern webpage is made of sections and this is just how Elementor works, section by section.
The first section could be your homepage slider, the second section could be an about section, the third can be your contact section, and so on depending on how much stuff you are fixing on your page.
But if you are quite new, the second button will definitely be your choice. The button has a folder icon. This leads to the Elementor template library. There are hundreds of pre-made layouts, blocks, and templates you can easily import into your webpage. After which you can just edit the words and fill in your own words. We’ll look deeper into that in the next steps.
Click on the button with the folder icon to see what I am trying to explain.
If you did that, here we are!. Like I said, Elementor offers a large variety of pre-designed templates. All you have to do is hover your mouse over any one of them, click the insert link and wait for all the magic to happen.
We’ll start with the first template. Hover your mouse over that, click the Insert link and wait for the action 🙂
Here is what you get! A premade-page. With images, buttons. Basically everything you never dreamed of building in a year. Everything you need to start your first website. All you have to do now is simply edit the text to suit what you are displaying on your webpage.
There are so many things to learn about Elementor, I possibly can’t cover all of that in this course but I will surely create another guide on that very soon. Let’s get to the basics first.
Follow the image guide below, click the ::: button on the first section, afterward, hover to the left section of your page, and toggle the “Stretch Section” to Yes. This makes the section fill the whole width of the webpage as it was in a box container in the first place.
After that, move your mouse down to the left bottom of the page, and click the green “UPDATE” button to save your changes.
If you looked at the imported template properly, you might notice there isn’t anything like a contact section there. Do not panic, Elementor has got a fix for that. Not like it’s a fix anyways. It’s a feature. It’s called “Blocks“.
Let’s see what Elementor Blocks are like. Click the button with the folder icon at the bottom of the page.
Next up, click the “Blocks” tab at the head of the page. Here, you see another collection of 100’s of blocks made available to you. You can also filter the blocks you want to see by Category. Click the drop-down arrow icon next to category to unveil the list of block categories.
We need a contact section, so click the Contact option to categorize the blocks.
Move over the preferred contact block you would like to insert then click the “Insert” link underneath. Wait for a few seconds and the block would be inserted into your page.
And here you have it!
It’s very easy to edit whatever content that’s within the blocks. All you have to do is click the area you want to edit, afterward, move over to the left side of your page as indicated below, then edit with your preferred content.
The same method applies to other blocks and sections.
Click the “Update” button to save your changes, then go visit your website to see how it looks now.
Go to your WordPress Dashboard, click on Settings -> Reading.
On the Reading Settings Page, activate the “Static Page” option, then set your Homepage to “Home” and your Posts Page to “Blog”
This tells WordPress where to affix your homepage’s content and which page to place your blog posts.
Once done, scroll down, click the “Save” button below. Then reload your website.
I will show you how to go about that here.
Go to your dashboard, under appearance, click Menus.
Type in a new name for your menu, then click the “Create Menu” button.
Your page will go into a brief reload, afterward you can start adding menu items. On the left side of the page, pick the pages you would like to add to the menu. Once done, click “Add to Menu”. The pages will appear in the menu list right beside.
Click the “Save Menu” button to save your changes.
ALSO… Make sure you tick the “Primary Menu” checkbox below the page.
Then go visit your website to see your menu in place.
Go to your dashboard, Click Pages-> All Pages then under the Home page, click the “Edit” link.
On the right side of the newly loaded page, locate the “Template” drop-down, select the “Elementor Full Width”. That should fix something if your webpage wasn’t looking the same all along.
Every time you are having an issue with that page, come back to this page, and make sure to click “Elementor Full Width”.
If you followed to an extent, you should have this too!
If you didn’t get it, don’t get frustrated yet! . You have me as your guide. You can always reach out to me, and I will take it slow on you…. step by step!
The title of your site is shown at the top of the page and often this would be your business name, or your personal name if you’re starting a blog.
You can also set a tagline, which is a quick description of what your site is all about. So if your site was about photography, your site title might be My First Photography Website and your tagline could be Free HD photo downloads or similar. To see the site title and tagline, visit Settings → General:
You need constant practice. You need to fail and fail and then try again to succeed again.
You need experience as your best teacher. I can’t teach you all of it, but I have introduced you to the very starting point.. Just how I started.
So, are you going to build your first website today?
Phone: +234 70 6786 2215
Email: [email protected]