How to start your first website project?

How to start your first website project? That was the question I have asked myself a few years ago. I have searched for the answer on various forums and web portals. I remember that the outcome of that first project inspired me to learn more about web development.

Now, a few years later, I wanted to answer the same question. Maybe it will help somebody who seeks creative fulfillment at work or as a hobby with the assistance of web technologies.

To commence my first project I was using XAMP project (version 7.8.1 is the latest version at the time of writing this article). It uses APACHE as a web server. What’s more XAMPP provides you with MYSQL server, FTP server, PHP (version 7.8.1 is the latest at the time of writing this article), and PHP admin panel pre installed. All of the above can be started from the GUI (Graphical User Interface). The above is all you need to get started with a simple website project. In this article I’m going to focus on building just a simple front-end website with neither back-end code nor data stored in database. However, you need to bear in mind that the above technologies allow to you to create complex applications. What’s more you may use XAMPP Add-ons to install very useful applications e.g. Wordpress or Joomla! CMS (Content Management System).

Firstly, you need to download XAMPP and install it on you machine. In my case the machine had Windows 10 operating system installed but you may also find versions for most popular operating systems as well. You may find the download page to XAMPP here. To install it you need to follow simple installation steps from the installation wizard. After the successful installation you should notice XAMPP icon in the icons tray in the right bottom corner of the screen. When you press it you should be be able to start the web server by clicking "start" in "APACHE" line. By default you are using port 80. Before you do that please check if the port isn’t used by another programme though as that may throw an error in the XAMPP console. You may find if your port is already in use in two ways.

First way is to check logs in the XAMPP console at the bottom of the window. XAMPP should throw an error "Problem detected! Port 80 is in use by "process name" with PID...!" if the port is already in use.

Another way is using “netstat” command in command prompt. Please read this page for details. If you want to change the port due to conflict with other programmes running on your machine click on "config" next to APACHE in XAMPP GUI and next "httpd.conf". That should allow you to edit the configuration file of the web server. To change the port that will be listened to edit "Listen 80" to e.g. "Listen 8080" and save the file.

When you start the server you should be able to open the browser of your choice and navigate to your default page. In the address bar type in “localhost:80” or IP address “127.0.0.1:80” (change the port number if you edited it before). Both addresses should redirect you to the default page "localhost:80/dashboard".

Now a short explanation on what actions the server is performing. In the "httpd.conf" file of the server it is defined which file the server will serve when you navigate to the default directory mentioned above. By default the file is located in “C://xampp/htdocs/dashboard/index.html”. This is the file that you may use to unleash your creative thinking and build your first web project. You may remove its content and start a new page from scratch or edit the content already present. Using this file you may create a simple HTML page, add some style and look to your first project using CSS, and use JavaScript to add extra dynamics and behaviour to your page elements. Now, you may open the “index.html” file with any text editor of your choice and try to apply simple changes. After saving the file you should see that the text changed after refreshing the page.

With those simple steps you may create your first website project. With HTML, CSS, JavaScript technologies now you can build both simple websites as well as very complex applications e.g. SPA (Single Page Applications). I hope that the post will be helpful for some of your who want to start creating with web technologies.

Please do not hesitate to ask questions in the comments I will be more then happy to talk about the technologies mentioned in this article.

References:

1. XAMPP project page - https://www.apachefriends.org/download.html
2. Command Windows - The Windows Command Line, Batch Files, and Scripting - https://commandwindows.com/