Building a Website from Scratch: What to Consider

In 2015, I had an idea to lunch my own personal website. The aim of the web site is to provide programming lessons for Arabic and English speakers. After 2 years from then, the website is launched and the name of the website is Programming Academia.

Programming Academia logo. One of my big projects that I'm Still working on.

During the year after the idea, I did not do that much work since I was kinda busy with my studies. After finishing term 152 (Around the end of May, 2016) , I started getting my hands dirty with web development. From then till now, I did many things. Some of them were wrong and some of them were correct. In this post, I will briefly till you what are the steps that I did from then till the website has become online.

Since I did not have any experience in web development, many of the steps were overlapping. But now that I have some experience, I will order them according to the correct order that I think is the best. The things that you must consider are:

• Website Idea
• Choosing the Name + Domain Name
• Programming Language Selection
• Setup Local Environment for Development and Testing
• Start Developing your Site
• Buying Domain Name + Hosting Service
• Publish Your Website
• Maintaining The Website.

If you plan to create your website from scratch without using any frameworks, you must have enough knowledge about the following:

• HTML.
• CSS.
• JavaScript.
• One server side scripting language (PHP, ASP.NET, JSP, ... ).
• Responsive web design (Creating a grid system).

The Idea

The first and most important thing is the website idea. As for me, the initial idea was to create a website for programming lessons in Arabic. But at later stage, I changed the idea from Arabic lessons to English and Arabic lessons.after I started adding content, I have noticed that the quality of the website content was poor. What I did to fix that is to provide content in English and then translate it to Arabic since my English writing skills are better than Arabic writing skills. 

Choosing The Name and Domain

Once I have selected the idea, I started thinking about a name and a domain for the website. Usually the name of the website should be associated with the domain name but it is not necessary. Also the name should reflect the main idea of your website. Personally, I selected 4 different names for my website, Unidemics, Programming Cities, Programming Academics, and Programming Academia. At this stage, I did not think about domain name which was my first mistake. At this stage, you should select all possible domain names that reflects the type of service your website will provide. It is good idea to go to any domain registration service provider and check domain names and prices. As for me, I did not know about the existence of such services till I started thinking about buying a domain. I have used two to search for available domain names, the first one is register.com and the second one was register.hostgator.com. You should not buy a domain, only check available names and prices. Usually the prices are between 10$ to 15$ for one year. If it include other services (Such as domain protection) the price will go up.

Programming Language Selection

When I say programming language selection, I don't mean HTML or JavaScript. What I mean is the server side programming language. As for me, I did not have any knowledge in any server side scripting when I started working on the website. The first server side scripting language I have dealt with was ASP.NET. It was very hard language for me to learn. After few months, I have decided to learn PHP for my senior project at university. It took me around 2 weeks to digest the basics of PHP which is good.  For that reason, I selected PHP. Note that the selection of server side language will affect the selection of hosting provider and the plan you select at later stage.

Setup Local Environment for Development and Testing

This step was very hard for me as there was not that much information about it. The first thing to do is to select an IDE and after that install a local server for testing the website locally before publishing.

IDE Selection

The first thing I did is to search the web for good IDE that can be used for web development. The problem is that I did not find any specific answer. For that reason, I was jumping from one IDE to another. This is the second mistake that I did which costed me a lot of time. Don,t change IDE very frequent. The first one was Microsoft Expression Web. After developing a small skeleton for my website (HTML + CSS only), I switched to  Microsoft WebMatrix. When I started using WebMatrix, I started learning about server side scripting and ASP.Net + Some PHP. After that, I switched to my favorite IDE of all time,  NetBeans IDE. After selecting NetBeans IDE, I did not change it till now.

Installing Local Web Server for Testing

One thing that I did is testing my website locally. The idea is to install a local server that can run your server-side code. If you select PHP as I did, then you will need to install Apache Server. After installing the server, you need to install PHP it self. Finally, One additional thing you might need is database. Every website will need a database at some point.

Installing the 3 alone is kinda difficult. For that reason, there are Software Stacks that contain the 3 and can install them at once. The stacks called 'AMP' and stands for 'Apache, MySQL and PHP. The first stack that I have used is called WampServer. After having hard time with it, I switched to new stack called Bitnami WAMP Stack. It include a lot of features which I don't use but it is the best stack for me so far.

Starting The Real Development

The next step of website development is to start writing website code. One of the good practices in my opinion is to create a templates that you should use for each different part of your website. For example, If your website is a news website, create a template for displaying news in a neat way.

Writing CSS + HTML

The first thing in building a website is to create the user interface. One possible way is to build HTML and CSS at the same time (As I did). By using this way, you will create the CSS code that you need for the current part of your page. The other thing is that make sure your design is modular and responsive. This means that the same web page should look good in small screens and big screens. One way to achieve this is to create your own grid system using CSS.

Also there are other things to consider while structuring your HTML page. The correct use of HTML tags will have an effect in how your website will rank in search engines. Also the use of schema.org vocabulary in your HTML will help web crawlers understand your content easily.

Creating Content

Once you have created your templates, it is time to create content for your website. One important factor to attract visitors to your website is to create a unique content that your visitors find very useful. Also the other thing is to make sure that your contents are up to date.

Buying The Domain Name + Hosting Provider

Once you have created sufficient content for your website, it is time to think about publishing your work and share it with the people you love. The first step in doing that is to buy a domain name. Buying a domain name is a simple task. As for me, I bought programmingacademia.com from register.hostgator.com for around 74$ for 3 years with a service called domain protection. This service hides domain owner information from being visible to public.

After buying the domain, it is time to select hosting plan. Usually when you go to any hosting provider, It will ask you what type of server you need for your website. The selection of server type will  Depend on the selected server-side scripting language. For example, If you selected PHP, then you will need Apache Server With PHP installed on it. If you have selected Node.JS, you will need a server with Node.JS support. As for me, PHP was the selected option. For that reason, I have selected Apache Server With PHP as my server.

For the hosting provider, I have decided to go with hostgator.com since I bought my domain name from them. The type of hosting is shared and the package is called 'baby' according to hostgator. It costed me around 130$ for 3 years. I also included SSL for one year with additional cost. The total cost was around 150$.

Publishing Your Website 

Usually, after buying the hosting plan, it takes around 1 day for your server to run 100% perfectly. Uploading website content to your server is simple. There are two ways to do this task, Either you do it manually by going to your cPanel and then upload files or use FTP Client to upload content. The best option is to setup an FTP account and use FTP client. As for me, I use FileZilla to manage my website content. It is very easy to use.

Maintaining Website After Publishing

Now that you have something that you can share with people,  you need to maintain it and add more content to it. In my opinion, this is the most difficult stage in the process of building a website. At this stage, you need to collect feedback from your website users, respond to them and allow them to talk with you.

Final Words

Now a days, it is possible to build a website in a matter of hours by using one of many automation tools available. But if you would like to learn every thing, building the website from scratch by your self would be your option. For sure it will take time to build it but you will enjoy the whole thing and you will be happy by the result of your work at the end.

Also I would like to mention that there are many other steps that I did in between which I did not include. If you have any question please feel free to ask me in the comment section bellow.