How I developed a commercial website for a client using front-end technologies

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 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 is the final website.
If found any bug/issue, please report to me or email [e-mail]

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.