There are many methods you can employ to design or develop your website.
We will employ a very simple approach. This approach requires virtually no programming skills. And if there is, we will provide you in this tutorial.

STEP 1: You will need to Order a Web Hosting account

The first thing you will need to do is to order a web hosting. Click here to order one.

STEP-2: Login to your account

Click on the "LOGIN" button as in the menu above to login to your "client area" account (LOGIN TO MANAGE ALL YOUR PRODUCTS & SERVICES WITH US).

PLEASE NOTE:- Because you are learning with this method, it is advisable to have two types of browsers. You will use your default browser to act according to the Step-by-Step instructions, and you will use the second browser to check your website you are designing as if it is being checked on another computer by someone else.
For example, if your default browser is "Mozilla Firefox", then the second browser can be "Google Chrome".

STEP-3: Once logged in, locate "Your Active Products/Services" list

Click on the "Hosting Account" you just ordered. In the figure below, "lekkihost.com" is an example. This will take you to STEP-4.

STEP-4: Locate the "Login to cPanel" link on the Right-Hand-Side as shown. Click on it.

Click on the "Login to cPanel" link as shown in the figure below. This action will take you to your cPanel environment.

STEP-5: Scroll around the page and locate the "WordPress" icon as shown

PLEASE NOTE: If you do not see WordPress icon, you will see "Softaculous" icon. Click it to expand for more options, thereafter, you should see a "WordPress" icon.

Click on the "WordPress" icon as shown in the figure below. Once clicked, it will then lead you to STEP-6.

STEP-6: Click on the "Install" icon

Click on the "Install" icon. Thereafter, a form is invoked. This form has fields like "Choose Protocol", "Choose Domain", "Site Name", etc.

STEP-7: Let us examine the fields one-by-one

The first field is "Choose Protocol". Here, you have options like "http://", "http://www.", "https://", and "https://www." (It is advisable to select the "http://www." as you are just learning).


The second field is "Choose Domain". By default, the domain of your Hosting Account will be shown in the options. In this case, as example, "lekkihost.com".
Select your own domain.


The third field is "In Directory". By default, word like "wp" is displayed in the text field. Delete off this word so that the text field will be empty.


The fourth field is "Site Name". By default, words like "My Blog" are displayed in the text field. Replace these words with something like "My Website" or anything you feel comfortable with as your website's name.


The fifth field is "Site Description". By default, words like "My WordPress Blog" are displayed in the text field. Replace these words with something you feel comfortable with.


The sixth field is "Enable Multisite (WPMU)". By default, the checkbox is unchecked. You can leave it unchecked as shown below.


The seventh field is "Admin Username". By default, the word "admin" is displayed in the text field. You may leave it as it is.


The eight field is "Admin Password". By default, a password is autogenerated in the text field. You may choose the password or replace with yours. Please, if replacing with another password, ensure a hard-to-get password. You may combine letters with numbers and possibly symbols.
CAVEAT: YOU MUST ENSURE YOUR ADMIN USERNAME & PASSWORD ARE NOT TO BE FORGOTTEN. YOU WILL USE THEM A LOT!


The ninth field is "Admin Email". Replace any email found in the text field with YOUR OWN EMAIL.
Whenever you forget your password, you will recover it through this email. This also will be your administrative email.


The tenth field is "Select Language" field. Select the language the system will communicate with you when designing your website.


The eleventh field is "Limit Login Attempts" field. "Limit Login Attempts" feature blocks an Internet address from making further attempts after a specified limit on retries is reached, making a brute-force attack difficult or impossible. It limits rate of login attempts, including by way of cookies, for each IP.
This field can remain checked as it shown below.


The last step here is to click the "Install" button. There is a little text field just below the button, that field optionally requires you to add your email where installation reports are sent to.
Click the "Install" button. Once done successfully, then proceed STEP-8.

STEP-8: Login to your Design Area

Open a new tab in your browser, then enter in the address bar as "mysite.com/wp-admin", provided your domain is "mysite.com".
If your domain is "myartworks.com" for example, then you will enter in the address bar as "myartworks.com/wp-admin".



After invoking successfully as done above, then the Admin Login Page for the design area appears as below.



Remember STEP-7 where you created the ADMIN USERNAME & ADMIN PASSWORD. Enter these details in the provided login.
Once logged in successfully, proceed to STEP-9

STEP-9: Get familiarized with the most commonly-used widgets

There are so many widgets with different functions. We will only emphasize on the commonly-used ones.
We will provide you with references after this tutorial, for the more advanced functions.

STEP-10: Get started with the real thing

Remember, this method we are engaging is a simple approach to designing a website. This means, most of the work has almost been done for you. What you need basically is good template.
Your template is the layout or blueprint of your site; it helps structure your website, giving you areas to place pictures and text, or things like navigation bars and other widgets. Your template should vary depending on the kind of page you are creating, but will share similar themes and patterns across your site.

You will be required to select from a variety of themes. A theme dictates the look and style of your website.Your theme is made up of a range of things, such as font types and sizes, your colour scheme and other areas that affect the aesthetics of your site. Your theme helps to reflect your identity through your site, and helps to improve your customer's experience.

- Navigate from the Left-Hand-Side "Appearance" -> "Themes".



- Take time to check the best THEME that will be suitable for your type of website, then "Activate/Install/Customize".



- HURRAY! Once successfully installed, you have fulfilled the first step in designing your website. Open your second browser and then check your website, like "www.myartworks.com" as an example.

STEP-11: Creating Pages as First Step in Customization

You will need to create your website pages. Pages of your website may include "About Us" page, "Contact Us" page, "Products & Services" page, etc.

- Navigate from the Left-Hand-Side "Pages" -> "Add New".



- Enter the page title (e.g. "About Us"). You may add something to the content just for viewing sake at first. You can always refer back to update content later.



- From your far right, click the "Publish" button. This is to save your page and then enable it for public viewing.



- You can repeat same process for all the pages you want in your website (example: "Contact Us","Products & Services", "FAQs", etc).

STEP-12: Attaching Pages to a Menu.

- Navigate from the Left-Hand-Side "Appearance" -> "Menu".

- You will need to first name your "Menu" as shown below.

- You will notice the names of the pages you created in Step-11 appearing here. Select each page in the checkbox, and then click the "Add to Menu" button.



- Scroll to bottom of page and then select as "Primary Menu" and the Save, as shown below.

STEP-13: Open the second browser and check your website by refreshing it.

Remember, you can edit anything you are seeing on the website. This depends on your creativity and design skills.

STEP-14: Continuing with Customization.

- Navigate from the Left-Hand-Side "Appearance" -> "Customize".



- You will see the list of customizable areas, some of which include "Site Identity", "Colors", "Header Image", "Background Image", etc.

STEP-15: Customizing the "Site Identity".

The "Site Identity" is the title of your webpage. This comes up at the topmost part of any browser whenever a page loads (see the figure below).

STEP-16: Customizing the others.

Same procedure is applicable to the other items on the Customizable Menu List.
Please note that this method is a simple one and gives more advantage for those that want to use this as blog.
A blog requires comments after a post.

If you want to disable comments for your contents so that your website behaves like standard website, please do the following:-

- Navigate from "Settings" - "Discussion".
- Do as shown in the figure below.
- Once done, scroll down the page to "Save" the changes made.

STEP-17: Creating a FORM.

In some cases, you will need your customers to contact you directly with some basic data. This is easily done via a FORM.
Sending an email may not capture the needed data, but a form does.

With this method of designing a website, this is easy as when you started the tutorial from STEP-1.

Before we begin, it is ideal to understand some basic FORM elements. They are:-

1. Checkbox field: allows the user to tick a box to make choices
   BSc   MSc   PhD
   
   
2. Dropdown field: creates a dropdown of options
   -=Please Select=-JanuaryFebruary
   
   
3. Email Address field: requires an email address format
   
   
   
4. Name field: text field
   
   
   
5. Radio Button field: similar to the checkbox field type
   Male   Female
   
   
6. Text field: a single line of text
   
   
   
7. Text Area field: several lines of text
   
   
   
8. Web Address field: requires a URL format
   
   
   
9. Button field: allows user to submit the form
   

Please NOTE:- When a user submits your contact form, it will be mailed to the email address you entered in STEP-7 above, and the subject line will be the title of your post. If you wish, you can change both the recipient and the email subject of your emails by navigating the "Settings" tab. Separate recipient emails with a comma to send to multiple recipients.

- Navigate "Plugins" - "Contact Form 7". If you cannot find the "Contact Form 7", then you can use the search button at the top-right-hand corner.

- Once searched, then install accordingly.



- Once installed, do not forget to activate as shown below



- Navigate back to your Pages section to access your Contact Page as you created it in STEP-11 above.

- Open your Contact Page and paste this code, copy it from the "[" till reaching the end "]":

[contact-form-7 id="1234" title="Contact form 1"]


- Do not forget to save your changes by click the "Update" button on the far right-hand-side.



- Refresh your website on the second browser and see the changes on your contact page.

STEP-18: Customizing your FORM.

You may feel that the default form is too simple for you and you want to add more fields to it.

STEP-19: Let us take a break here! We will be back to add more tutorials as soon as possible.