How I developed a commercial website for a client using front-end technologies
Tags: webdev, html, css, javascript
Published: 2020-08-05 20:05:01

Last month, I got a call from one of my friends who told me that the owner of this company **Allahdin Casting Foundry** needs a good, responsive website for his business.

I'll be sharing my experience on how I developed a fully responsive website using just HTML, CSS, JS, and Bootstrap 4. As a beginner, most of the developers start coding after just a few details and when the scope broadens, they need to shift technology. So, these are the steps in which I completed this project (in the 4th semester of my BS Computer Science degree). I followed the software engineering principles in this project and I can say that they helped a lot. 😊

#Communication
###Project Initiation
>A fully responsive business website for a casting foundry

###Requirement Elicitation
I met the person for a detailed discussion about the project. It was a completely static and responsive website project. I had to work only on the front-end. During the communication with the client, I focused on the requirement gathering to prepare a reliable software process model to work on. 


#Planning
###Cost Estimation
Considering the client's requirements, I estimated the cost as per the technology used in terms of webpages and design and finally presented it to the client.
###Scheduling
After the cost agreement, I scheduled the project to be completed within one week.
###Tracking
To track and control the development process, I used the *Git* version control system to commit the project after developing each feature. It helped a lot to backtrack when there was a mistake.


#Preparing the Software Process Model
The vision was clear. It was a small scale project, so there was no such need for a definite software process model. But, in order to keep everything confined and use good practices, I followed an **Iterative Software Process** Model. I prepared drafts about the software project model and started working.

#Prototyping
I prepared a robust structure of the website along with the UI design and sent it to the client as a prototype. For this purpose, I used a repository on my own GitHub.

#Technology and Platform to be used
Collectively, I used HTML, CSS, Javascript, Bootstrap 4, and Jquery for front-end along with Google Maps API and Google Forms Integration. I created a project on **Google Firebase** hosting to deploy this site. I bought a .com domain from **Porkbun**. I also designed the logos and other image assets, privacy policy, and T&C also.
P.S. I use VS Code 😎


#Project Construction
After the prototypes were accepted, I started working on the main project. I developed the structure and layout of the website and made is responsive using various media queries. After that, I applied images, assets, and styling to make the site user friendly. Next, I developed some client-side programming in JS to make features functional. Finally, I completed the dynamics of the website. It took me about a week to get the project completed.

#Testing Phase
After completion, I tested the site myself. I focused on the following things to test:

* All the links should refer to correct location
* There should be no typo at all
* Most importantly, the loading **speed** should be reliable (used 
[Google Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/) and other tests for this)
* Website should look great on all devices (screen sizes)
* Images must be properly sized

After that, I released the beta testing version of the site for the public for about 4-5 days. Obviously, some bugs/issues were there which I rectified.

#Deployment
##The Final Release
After complete testing, I released the final version 1.0.1 (current version is 1.0.3). I also created two emails *(see on the website 😁)* forwarding systems to incorporate a sophisticated environment for visitors to interact with.

This is how within two weeks, the website was up and running.

##Final Product
**[Allahdin Casting Foundry](https://www.allahdincastingfoundry.com) is the final website.**
*If found any bug/issue, please report to me or email webmaster@allahdincastingfoundry.com*

###Feedback
The client's feedback on this project was awesome. 😉

Finally, I created a Google Business and did some SEO to index the site on search engines.

So, this is how I developed a fully responsive static website for a client 🙂

P.S.: I've done a commercial project back in 2015 (now inactive). But this one was a much more mature and robust project.