Build A Test Website In 3 Easy Steps

Woman hidding half her face


 By McDonald. T | Updated November 28th 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 http://brackets.io/ 

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 https://www.apachefriends.org/index.html 

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 a 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 open the htdocs folder and select (one click) the MyWeb 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. Now turn on apache, if you have a Mac, type 'sudo apachectl start' in Terminal and press enter then enter your password and press enter.  That is it! You are all set to create a test webpage.  If you want to test apache, type localhost in the browser bar and press enter.  You should see 'It works' in the browser viewport.


Set up guide



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

Comments

Popular Posts