Build A Test Website In 3 Easy Steps

Woman hidding half her face

 By McDonald. T | Updated January 25th 2018

Building a website may seem daunting if you are new to web design. The truth is, however, that building your own test website is so easy it will embarrass you! You just need the correct tools to do the job. Brackets and xampp can be used on Mac, Windows or Linux, but in this blog I will focus on Mac.

What is a test website?

A test site is a site that you can create without the need for a server or a web host. You can create the test site all on your own computer and play around with it until you are happy with it. This is a really good way to learn HTML5 and PHP in a safe environment.

1)  Install Brackets 

Brackets is an editor that will allow you to code and test files. Brackets is simple to use and has a nifty little feature, called live view, that allows you to view the code in a web browser as it would look as a webpage. In other words, it translates the code into a webpage. Brackets is free and open source software that uses a colour scheme in your source code as you write it.

Cost: free

Download from 

2)  Install xampp-vm

Xampp-vm is an easy to use application that creates a virtual server for you to play with and it is easy to install. With xampp-vm you will be creating beautiful websites in no time at all. Xampp comes with a database, php, Perl and Apache.

Cost: free

Download from 

Installation guide 

3)  Set up Brackets to view php files

Setting up Brackets with xampp-vm to view php files is easier than most people think. After installation, start xampp-vm and click start from the general tab then click start all from the services tab. Once this is done, select a port to use and click enable from the network tab. Now you have completed this, go to the volumes tab and click mount. A disk volume will appear on your desktop called lampp: open it. Search for ‘htdocs’ once opened. ‘htdocs’ is the folder you need to store the files for your test website. Additionally, it is good to create a new folder in ‘htdocs’ with s sensible name such as ‘MyWeb’. The ‘MyWeb’ folder is now the place to keep all the new files for the test website.

Now open Brackets and go to File > Open Folder. From the menu sidebar look for a volume under shared that has what looks like an IP address (a string of numbers and dots) and click on it. It should contain one folder called lampp: open it. Now select (one click) the htdocs folder and open it by using the 'Open' button at the bottom of the window. Finally, go to File > Project Settings and paste in http://localhost:8080/MyWeb/ and click Done.  Now when you write a php file and safe it to this location you will be able to use the live view in Brackets. The button for live view is on the upper right hand side and looks like sideways lightning. That is it! You are all set to create a test webpage.

Set up guide

Hope you liked the blog. Please leave a comment about how you got on and follow my blog.


Popular Posts