Why and How I Built This Website From Scratch

I built this website from scratch to showcase my skills as a full–stack PHP developer.

What is a Full–Stack Developer

In the case of a PHP programmer, a full–stack developer is a programmer that can work with the entire stack of technologies that come together to create a website or web application.

The stack is HTML, Cascading Style Sheets (CSS), JavaScript/AJAX, PHP, MySql, and Linux PHP hosting.

My Goals For This Website

I’ve been a freelance PHP developer since 2006 and decided I would like to build a website from scratch to showcase my skills.

I am not a website designer, however, I wanted to learn more about design and ultimately learn how to design websites. As a PHP programmer, I have always taken what others have designed and added PHP code to make the website responsive. I can work with a designer’s HTML can CSS. I wanted to be able to design my own HTML and CSS templates.

To be able to design websites means knowing a fair amount about CSS and having the ability to create images and artwork.

I have always shied away from design work because I did not think I could do it. I now think I can develop enough skills to be able to create decent looking websites.

One area I was interested in learning more about was how to make a template mobile responsive. I am there – this website is mobile responsive. It was not as difficult as I imagined. At the time of writing this article, I need to modify the menu to make it what they call a “hamburger menu”. At that point, this website will be fully mobile responsive.

Being mobile responsive means the website can be viewed on a desktop computer, a tablet, and a cellular phone. All modern websites need to be mobile responsive.

Another area where I wanted to grow was search engine optimization (SEO). I have had a few SEO successes, however, things keep changing. I wanted to create a website that would be evergreen and that would rank well on the search engines. If you are reading this I must have been successful.

The Skills it Took to Build This Website From Scratch

HTML is the foundation and bone structure of every website. HTML is easy to learn. Cascading Style Sheets (CSS) defines the look and feel of a website. This being defining the colors, font size, font family, and layout of a website. CSS is how a website is made mobile responsive.

As of the writing of this article, there is no JavaScript or AJAX on this website. I have experience making websites interactive by using JavaScript and AJAX, however, the only place to use it on this website would be the project request form to validate the form in the browser. I have added server–side (PHP) validation. The form is secure.

I wrote all of the PHP code for this website. I followed the Model–View–Controller (MVC) design pattern.

The model is the database routines that are used to create, read, update, and delete data. The view is what you see. And the controller is the brains of the operation.

There is one controller, a handful of models, and a few views.

I used MySql as the data engine. MySql is a relational database management system that is in wide use on the Internet.

I wanted nice URLs and one entry point into my content management system (CMS). I am running the Apache web server so I used mod_rewrite along with the associated .htaccess code that routes everything through the root index.php file making this website a single entrance application. This is a very secure way of building a web application. This configuration is why you will find clean URLs on my website.

I converted a generation 3 – i3 laptop into a development and testing server. I accomplished this by replacing the hard drive with a much faster solid–state device, loaded Linux on it, and then configuring Linux as a web server by adding the LAMP stack. LAMP stands for Linux, Apache, MySql, and PHP.

For production PHP hosting I use a Virtual Private Server (VPS) in a friend ’s data center. This server runs the Plesk server management software that makes my life easier. For business applications, I always suggest using a VPS to host your website.

For a code editor, I use Visual Studio Code which is a free Microsoft editor. This editor allows me to edit the code that is on the server remotely. Being able to edit remotely makes it easy to see the changes in real–time. I make a change to the code that is on the server, save it, and refresh my browser and I can see how my changes affected the website.

I have been studying and following Search Engine Optimization (SEO)since around 2002. I was able to build a website in 2007 that ranked well on the search engines. Things change and I neglected that website for years, so it no longer ranks.

So for the last year and a half, I have been studying SEO with the intent of once again being able to build websites that rank well on the search engines.

I am hoping this website will rank well and with some regular care will be evergreen.

The Basics are in Place, so Now What?

To–Do List

1. Add More Content – As they say, “Content is King”. I’ve been hearing that for a long time. It is true. Every website needs to have content added to it on a regular basis.
2. Responsive Menu – The theme is responsive, however, the menu is not.
3. Learn Canva – I can do some simple image manipulation, however, I need to learn more to fulfill my goal of becoming a designer. I hear Canva is a great tool for performing image editing.
4. Add Images – I need to add some images to this website. I think adding graphics will enhance the look and feel of this website.
5. Learn More About Design (CSS) – There is a lot to learn about CSS. I think I know most of the fundamentals, however, to become a designer I need to learn more about CSS.
6. Learn YouTube – I want to add a few YouTube videos to this website. I’ve studied YouTube, however, I need to learn more to be effective with YouTube.
7. Add a Few YouTube Videos – As I mentioned I would like to add a few YouTube videos to this website.

As you can see as of the writing of this article this website is a work in progress. At this point being a work in progress means my initial goals for this website are incomplete.

Any serious website is always going to be a work in progress.

Updates

As I accomplish more I will post those achievements here.

What I Would Have Done Differently

As I pointed out I created this website using the M–V–C design pattern. When I started, I wanted a very simple and clean URL. For example, the URL for this article is “why–and–how–i–built–thisvwebsite–from–scratch”.

Using the M–V–C pattern means I could have made the URL like this: “controller/method/arguments”.

By doing this I could have easily named the controller as the datatype such as article, category, page, etc. This would make it easy to know what model to use to access the database and the action would be clear.

The method would be the action like show or edit.

The argument could be the URL of the article, page, or category.

In the case of this article, the complete URL would be “article/show/why–and–how–i–built–this–website–from–scratch”.

The reason I did not create the app with the M–V–C URLs is, I did not want to have a URL that looked like controller/method/arguments. Which in retrospect would not have been a better idea, and would have made the software more modular, easy to extend, and easier to create.

Conclusion

I set out to create a website by hand to showcase my PHP programming skills and to develop myself further.

I wanted a decent looking website that was mobile responsive and ranked well on the search engines. I have learned a lot and hope to hone my skills even more.

After reading this article I hope you discover I am a full–stack developer that is on the path to becoming a web designer.

I will update this article from time to time as I complete my to–do list and accomplish learning more.

My name is Keith Smith. This is my website. It was handcrafted by me as an example of my skills. It is not as beautiful as what a website designer might have been able to create, however it is clean, simple, and functional. I am not a designer, I am a programmer.

If you have a project you would like to talk to me about, please call me at 480-748-9893 or complete my Project Request Form.

I look forward to hearing from you soon.