It seems the typical web development training ground is also the most expensive: buy a domain, host server, WordPress account, theme, etc. But what if you’re not a small business owner or trying to build a brand? What if you’re just trying to learn web development, sans clutter?

XAMPP: An Introduction

Bitnami’s XAMPP is “an Apache distribution containing PHP and Perl.” For our purposes, we only need to understand that XAMPP is a free, simple program which allows users to host websites on their PCs.

While setting up a local server using XAMPP is somewhat technical, the process is also fairly easy and straight forward. Once everything has been set up, you’ll find that managing and editing websites is a breeze.

Then there’s the matter of quick and complete control. Using XAMPP to create and edit websites, you will be able to change as much or as little of a website as you’d like. That said, with great power comes great responsibility. You are more susceptible to losing your sites as well, especially if you do not create backupsThe Ultimate Windows 10 Data Backup GuideThe Ultimate Windows 10 Data Backup GuideWe've summarized every backup, restore, recovery, and repair option we could find on Windows 10. Use our simple tips and never despair over lost data again!Read More.

If you’d like a genuine starter course project in web dev, however, XAMPP is for you. That includes any projects relating to HTML, CSS, Javascript, and beyond!

Installing XAMPP

Head to the XAMPP website and download the package. Follow the default setup process. Once you’ve downloaded XAMPP, your XAMPP control panel should open automatically. If not, you can locate the XAMPP program as you would any other (through Start Menu search).

In your XAMPP control panel window, you should see a simple layout of which XAMPP processes are running. For our purposes, we will focus on the first two options: Apache and MySQL.

Apache — The main crux of XAMPP, the Apache option creates an Apache server on your PC. This is what will allow you to run and edit websites on your PC through web browsers, much like one would a website. Except, of course, this website is running on your PC, as opposed to a server connected to the internet.

MySQL — SQL allows for communication between databases and websites, allowing users to test and store emails, passwords, and any other data inputs. We will use this for your local WordPress account.

Press the Start button in your XAMPP control panel under Actions for both Apache and MySQL. Wait until both Apache and MySQL are highlighted green under your module section. Once enabled, you’re free to use XAMPP.

Localhost and phpMyAdmin

To ensure everything is in working order, open a web browser, enter http://localhost/ into your address bar and hit Enter. You should be redirected to http://localhost/dashboard/, which is the default XAMPP page.

Next, click on the phpMyAdmin button on the top navigation menu. You’ll be directed to your default phpMyAdmin page.

Leave these alone for now, but if both are working you’re ready to start creating websites!

Creating Websites Using XAMPP

Now comes the fun part. Head to the XAMPP folder located in your root drive directory (C:\xampp by default). Then, head to htdocs. This will be the main website repository you will use in order to view websites.

Now you can begin downloading and installing websites into XAMPP. I will use the Roadtrip template, but you can use whichever template you’d like. Download the website’s zip file, and keep it in a location you will remember. Next, create a folder within XAMPP’s htdocs folder for your website. I’ve named mine roadtrip — try to keep your name simple. Then, unzip and extract the contents of your zip file to this htdocs folder.

Once you’ve extracted the files, head to your website repository within htdocs to ensure they’ve been extracted correctly.

Finally, head to your webpage in your web browserThe Best Web Browsers for WindowsThe Best Web Browsers for WindowsWhat is your default web browser? Even though we're spoiled for choice, the majority of us stick to the tried and tested major players. What are better alternatives for resource use, speed, and security?Read More. Your website, so to speak, will be reachable using the previously mentioned localhost along with the name of the folder holding your page files. This is because websites are essentially files contained in folders, all under a single domain — or root — name. You’re learning already!

Our previously created folder was named roadtrip, so the full site address is http://localhost/roadtrip.

You’re done! Now you can begin editing the website locally.

Editing Websites

Open up Sublime Text. Head to File and select Open Folder. Find and select your web folder within the XAMPP folder. You will now be able to edit multiple pages of the same website within your Sublime Text editor.

Sublime Text also provides a great interface for you to see every file and folder of your website. To create changes on your website, edit your website’s code, save (using the keyboard command Ctrl + S), and refresh your website within the browser.

The process is simple and direct: edit the webpage, then check to see if your code works. As you progress in your web development, you’ll attempt to ingrain more complicated features into your web page. No matter the skill level, though, the basic format to edit pages remains the same.

Use WordPress With XAMPP

If you don’t want to edit raw code, or would rather use a more familiar content management system (CMS), WordPress provides its fantastic web design resource in an easy to use ZIP file as well! To install WordPress on XAMPP, head to the WordPress website and download the official application.

Use the same format to create a website as you did previously, with your extracted WordPress folder present in the htdoc directory within the folder wordpress. Maintain the folder name for the sake of clarity.

From this page, click on Databases. Under the Create database parameter, enter wordpress and then hit Create. You should see a popup telling you the database was created. Next, close this browser window and enter your WordPress folder within the XAMPP htdocs directory. This folder should possess the contents of your unzipped WordPress files.

Configuring Login

We need to configure the actual WordPress website so you can log in and use the site. This is done through WordPress’ main PHP configuration file. Within your WordPress folder, find the file labeled wp-config-sample.php, right-click the file, select Edit (or Open with for a separate text editor). Notepad should work just fine.

You will have to make three changes to the code above within the quotation mark.

database_name_here — Change this parameter to wordpress. The website will then use the previously created database in phpMyAdmin labeled as such.

username_here — Change this to root. The root username possesses the proper administrator privileges by default, so it will be allowed through phpMyAdmin. Other usernames will not work unless granted the appropriate permissions.

password_here — Change this to an easily identifiable password. If you would rather not use a password, delete the parameter.

Save this file as wp-config.php — as opposed to the previous wp-config-sample.php — and exit. Then, head to the following localhost address: http://localhost/wordpress.

Proceed with the installation, including the creation of your WordPress Username and Password. You can enter whichever values you’d prefer. Once you’ve finished entering your values, click on the Install WordPress button to finish the process. Once that’s done, log into your local WordPress using the username and password given on the previous page.

Web Development Starts With a Single Page

Before, you were just starting your web development journey. Now, you’ve created a local server on your PC through which you can create, modify, and adapt web pages at a whim. Best of all, you’re completely in control. The only thing that’s left is to start your experimentation, so get going!

What software do you use for web development? Do you have any advice for up and coming developers? Let us know in the comments below!

So, I followed the steps on how to install WordPress, but whenever I went to localhost/wordpress, it just gave me an error saying it couldn't establish a connection to the database. However, when I installed Bitnami's WordPress module to XAMPP, localhost/wordpress worked. Why?

Christian is a recent addition to the MakeUseOf community and an avid reader of everything from dense literature to Calvin and Hobbes comic strips. His passion for technology is only matched by his want and willingness to help; if you have any questions concerning (mostly) anything, feel free to email away!