Building a Website 101

Share on facebook
Share on twitter
Share on linkedin

One truth that needs to be told at the onset, ‘Websites are a must!’. If you disagree, then I really don’t think you have the incentive to go through the entirety of the write-up. But if you concur and admit this truth on all hands, let me tell you another truth on top of that. Even if you may not have a prior knowledge about web development, it doesn’t mean you don’t have what it takes to be a good web developer. The methodologies listed below are not complex and anyone, from any educational background can go through the contents and equip themselves with web development skills. The stuff written below really is based on these two truths as the foundation. Let’s elaborate the first truth a bit more, shall we? Let’s view this from different angles, alright? Suppose you work for an organization. Now, you are in a networking session and a guy in the session asked about your organization. Now, one ‘not-cool’ thing is you can state the name, explain every detail of the organogram, describe the areas of work and also the projects encompassed by the organization. But honestly, the listener didn’t really ask for such an essay. So, the ‘cool/smart’ thing that you could have done is state the name of your organization, roughly wrap up what your organization does in a couple of sentences and provide the guy with a link to the official website of your organization. Now, he can go and surf the website and learn more about it if he wishes. So, a website, for an organization, works as a source of information, communication and also as a source of authenticity. Many people or authorities deem the presence of websites to be a valid proof to see whether an organization is authentic or not.

Again, suppose you’re an adroit artist or a graphic designer, in order to showcase your works and portfolio, other than handing out CVs to people or employers, show them a website which lists all your works in a single page. It’s a smarter thing to do. If you are a start-up with a product which is innovative and the capacity to generate and drum up demand, create a landing page (a one-pager website) to portray the pros of your product and lure customers. How many different angles do you want me to highlight to really make you believe that yes, ‘Websites are important!’?

Now, many of us really do have the resources to hire a web developer, or an agency to create websites and also pay these web developers and agencies from time to time to make some changes and maintain the websites. But we may also not have the financial resources to hire someone. Honestly speaking, YOU can create the website and YOU can also maintain and edit them. This lesson will be developed into 3 phases, so by the end of today’s phase, we will be already creating our first page. Don’t worry, I will provide you with the links to materials and resources which you can use to learn more on web development.

What is WordPress?

Well, websites are created with the help of programming language codes such as HTML, CSS, JavaScript, PHP, NodeJS, etc. Don’t get overwhelmed with these jargon. We will not get into any of these. But I should really advise you to learn at least the basics of HTML. HTML is really easy; it creates the skeleton of the website. CSS is the language used to beautify the website. Now what does WordPress do? Since we will not be learning any of these coding stuff, we will be using WordPress. WordPress, in the simplest of terms, is a platform which lets us create websites, without codes. Now it doesn’t mean that codes are not used. When we use the WordPress, it interprets our actions and translates them to web and computer readable codes. You can assume WordPress to be a software which makes your life easy! Such software or platforms are officially called Content Management Systems (CMS).

‘Domain Hosting’ Dilemma

Most of us are really not sure about the terminologies ‘domain’ and ‘hosting’. Let’s clear it out, okay? Domain is basically a name, to which a particular website is entitled to. The name can be your’s, your businesses’ or your shop’s. And there are different taglines used after these names, like .com, .org, .xyz, etc. But there is a catch, the domain name has to be unique, meaning there will be only one owner of a domain. Suppose, the name of my organization is Scribes Space. Now, I want to use the .co tagline with Scribe Space. So, ultimately, the domain name looks like this, scribespace.co. To check whether I will be the owner of this domain and this domain belongs to me, I can look up at the links like Namecheap, GoDaddy, Google Domains. In these links, in the search bar, type in the domain you wish to buy and see the cost of the domains. Mentionable, the prices vary on the basis of taglines too. Some taglines are cheaper than the other.

Now, a trick, suppose, the domain scribespace.co is already taken by someone unfortunately. The thing you can do is, just put a hash inside the scribe and space, this new domain, scribe-space.co, at least, this should be available no matter what. Domains can be bought from a myriad of providers such as the aforementioned providers. Even, in Bangladesh, there are local businesses as well.

Now, let’s understand hosting. Simply put, the online storage space where the website is placed is called the hosting. The mentioned providers along with the local ones also provide hosting services. If you wish to buy one, three things need to be done.

  1. Ask the customer support of these hosting services so that they can advise you with the best hosting plan for your website.
  2. Ask them to link the domain you brought with the hosting service. It’s a stuff which they will understand when you will tell them specifically this, “Link my domain with my hosting service, please!”
  3. Tell them specifically this, “Set up a WordPress website under my domain name, please!”. If they are done with this, they will provide you a link, along with a username and a password. The link will look like this format ‘www.your-domain-name.tagline/wp-admin’. Here, the term wp-admin means WordPress Administrator. This is the link which the administrators, i.e., the web developer, which is YOU, will use to log into the website development section of the website.

A small thing, sometimes we might not have the money to purchase a domain and a hosting. So, there are platforms such as pantheonsite.io, etc. which provide free domain and hosting facilities for you. You can use these platforms to learn, and develop websites.

Pro-tip: If you are really into web development, then I would advise you to create your portfolios in these platforms other than clouding your own personal hosting.

WordPress.com Vs WordPress.org

Another confusion! Sorting it out will be good for us, I guess. WordPress.org is the most common thing used. Here, we will buy a domain from, say, X company and buy hosting from either X or, say Y company, and then tell Y company to set up WordPress under the hosting. Here, the hosting provider sets WordPress.org . Also, the applications, or in technical terms, the plugins, which will be used in WordPress.org are free (almost) and you can use whatever you like with the WordPress platform.

Now, for WordPress.com, the scenario is a bit different. You may buy the domain from X company, that’s alright. But you need to get the hosting service from WordPress specifically. The hosting plans are costly and also some plans don’t let you install and work with the plugins which are instrumental behind creating ‘good’ websites. So, my advice, go for Option A.

The WordPress Dashboard

 

When the hosting service provider gives you the ‘wp-admin’ link, coupled with the username and password, you can log in and the first thing you will see is called ‘the WordPress Dashboard’. This is basically a central hub, and while building our website, we will be coming to this place a lot of times because it will lead us exactly to the places we need to be. The stuff written vertically on the left, inside the deep-bluish-black background are the different places where we regularly need to visit. These are called ‘tabs’. Again, don’t get overwhelmed. We will go through each of these things sooner or later.

Setting Up a Theme

We’re officially inside the amazing world of WordPress. To begin with, one of the prime issues of understanding is, all the WordPress websites are based on a theme. From the angle of an artist, the theme of WordPress is basically equivalent to the canvas of the artist. Everything is done on this. All the designs, layouts are dropped inside the theme. So, let’s select a theme for us. Now, in the left side of the WordPress dashboard, in the tabs, hover over ‘Appearance’. You will see a sub-menu is generated. In the sub-menu, click on ‘Themes’. You will have a bunch of pre-installed themes. But in this page, above, you will see a button that says ‘Add New’. Click on that! Now, you will be redirected to a new page, where you will see a dictionary of themes at your disposal. Well, for the sake of this lesson, we will type in ‘Hello Elementor’ in the search bar at the right and press enter. Now, you will see the theme. You will see button that says ‘INSTALL’. Click it. And then, another button will arrive, telling ‘ACTIVATE’. Click on that too. Now, we have gotten our theme. Awesome! Mentionable, each of the theme has their own salient and unique features. We will not delve into these now.

Plugins Rudimentary

What are plugins? Plugins are basically the tools we use- the paintbrushes, the colors, the frame upon which the canvas is kept! It’s basically the applications which we will be using to develop the website on that theme. A significant term that needs to be taken into consideration is ‘Page Builder’. It is basically a plugin where there is wide array of elements, such as images, headings, texts and even more crazy stuff such as sliders, animated counters, progress bars, testimonials (a section where people tell good stuff about you!). The page builder which we will be using is Elementor. If you hover over the plugins option in the tabs of the WordPress dashboard, we will be getting an item in the sub-menu, called ‘ADD NEW’. We will click on that, and we will type in ‘Elementor’. And the plugin that will appear at the very top, to the left, we will ‘INSTALL’ it and ‘ACTIVATE’ it.

The version of Elementor which we will be using is free. The free version lacks sufficient number of elements. It has the normal mundane elements like image, header, etc. But it lacks the cool ones. You can go for the Pro Version of Elementor and buy it. Maybe rummage down the internet, see if there is a crack version for the ElementorPro or not. Maybe there is, we never know!

But, still, if you want more variations in elements, there are some addon plugins of Elementor. The function of Addon Plugins is basically assisting the original plugin with more options and variations. Similar to the way we add a plugin, the Addon Plugins can be installed. Some famous addons for Elementor are Premium Addons for Elementor, Essential Addons for Elementor, Master Addons for Elementor, Livemesh Addons for Elementor, Unlimited Addons for Elementor, etc. Since the overall environment is setup, let’s create our first page!

Another quick thing, we will not explain what a text editor is now. Therefore, like the way you added the other plugins, install and activate Classic Editor. I promise, I’ll explain the text editor next day!

Creating the First Page

In the WordPress dashboard, under the tabs, find ‘Pages’. Hover over it, select ‘Add New’. Now, at the top box, type in the name of the page. We will create the Home Page at first. So, type in ‘Home Page’. And at the right, you will see a ‘PUBLISH’ button. Click on that, voilà! Our first page is published, and you will see the permalink generated below the title of the page.
Great News! We’ve successfully embarked our journey to the amazing world of Web Development using WordPress. Want to learn more? By the end of the next two writeups, I assure you, you will be done creating your own website.

Don’t want to wait at all? That’s good, actually. Go through the videos of Webmonkey, Ferdy Korpershoek, Nayyar Shaikh, etc. They provide the best of tutorials in YouTube. Even, Elementor has their own YouTube channel. Have a look! It’s really easy. See you around!

Share on facebook
Share on twitter
Share on linkedin