Build an E-commerce with html, css (bootstrap), javascript and php – Part 1


Here is first step we have to do to build an e-commerce, we called this step is preparation step

before we are going to start, we have to prepare our tools to execute achieve our purpose to build an e-commerce from zero. List below some equipment should be ready on our device (desktop, laptop).

  • Code Editor
  • Offline Server
  • Browser
  • Internet connection
  • Little bit a patient

Code Editor

Code editor used to write code to execute program in our e-commerce later. Some websites offer good code editor, such as notepad++, sublime, bracket, atom and etc. If you do not have any internet connection you can use your own program in your windows (automatic installed) program called notepad. If you have internet connection you can directly download one of the editor I mentioned above, you can download by typing editor name on Google search box.

Offline Server

Offline Server used to manage your contents (files) before you upload to your online site. We use Offline Server for any debugging process, we have to ensure everything should be on good, before we upload to the online server. If you ask what offline server you have to install on your computer, the answer is best on your platform, if you are using windows, you can download with keyword offline server for windows, if you are using other platform you can adjust your search keyword on google search box. If you want to know what kind of Offline Server I used to write a code, I am using XAMPP. You can download xampp in official site freely here the link. This program should be downloaded to your computer and after finish you can directly Install to your default installation folder, for the step just follow the application lead till the finish button appear. To make your content accessible you have to run the Apache service from xampp control panel. Click start button on xampp control panel to run your Apache service. If you will use database such as SQL you can click start button on phpmyadmin line.


Browser is the most important program you must own on your device to catch preview after you write a code. Generally, any platforms among windows, Linux or mac included a browser, then you do not need to install any other browsers, except you are not friendly with the current browser you can set up the new one such as Google Chrome, Chromium, Mozilla Firefox, Opera, Sapari or any other browsers exist on the internet. By installing this program we will be able to see an information we arranged in code editor. In this part, I will use Google Chrome to execute and preview my work.

Internet Connection

This thing is very important to discover any problem will come in the future (editing session). Not only me but also the other developer use internet to solve any problems they had. So, I recommend all of you to enable your internet connection by using wifi or mobile hotspot. Do not to force yourself to provide an internet connection, you can go to net cafe if you are facing the serious problem in editing.

A patient

The real help in this work is a patient. Patient will lead you to the best result and achieve the goal. In this work we will find some mistakes and problems caused by ourselves or the code. I suggest you to handle every single problem with your patient, the first thing you have to do if you found a problem especially in preview had better you check your code structure and refresh your browser, if this step cannot give any solution, you can check by inspect the page by pressing ctrl + shift + i button on your keyboard to show you from where the problem comes. The inspect will appear depend on your web browser setting, generally, the inspect will appear on your bottom screen (Mozilla Firefox) or Docked on the left screen (Google Chrome). To solve your problem you have to know what the error caution, on the inspect page, will tell you by displaying red text on inspect page. If the problem cannot be solved by this step you can ask people on any sites to solve your problem by activating your internet connection.

Tags: , , , ,

No Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *