Piggyvest Website Clone Sidehustle Portfolio-Frontend-Html-Css-Js-Team-4 blog's
Table of contents
Welcome to frontend team 4 blog, which consist of some talented individuals that have been task with the job of clonning the Landing pages, sign up, and registered page of Piggyvest piggyvest.com Piggyvest (formerly piggybank.ng) which is a leading online savings & investing platform in Nigeria that as over 6 year of experience in the Financial Industry.
INTRODUCTION
Developing a web product or in our case, a website comprises several steps which work together to ensure the smooth inception and finishing of the project. A web product or a website comprises documents which are read by the browser and displayed on the screen for the end user. There are many paths which can be taken by the user in order to reach the end goal which is delivering a working product hosted online which can then be consumed by the end users. All of them categorically follow the same principle which are listed below
- Types of websites to create.
- Creation options for the product / website.
- Webpages
- Content and design
- Hosting and Domain Name
- SEO
- Web Analytics
The team involve in carrying out this task are people from different fields of work like, Graphic Designers, frontend and backend developer, Digital marketers, and many more.
In other to make this possible, we chose two member as our team lead and assist, the team went ahead to study, analyze and understand the type of product that was to be delivered. The problem was scrutinized and a solution was adopted by the members of the team for the product, the team lead created a Whats'App group for easy communication because majority of us are not familiar with Slack, three group was created. the first group took up the designing of the landing page, the second group work on the sign up, and the third group is to create the registration page.
The next step involves the analysis of the available options to create the cloned website. It is adopted that the project will be carried out using HTML, CSS, Bootstrap and JavaScript. The project was divided into smaller chunks within the group created
The team leads went ahead to create a Github Repository for the project and granted other member access to the repo by taking each members Github username for easy collaboration to push/pull their work there.
The next step involves sourcing contents that will be used in the execution of the project like images, fonts, text, compilers, color picker, bootstrap, w3school css content, etc. The main font of the website was discovered to be ‘DM Sans’. The contents were downloaded and uploaded on the git repo for everyone to pick and work on their part of the project
Next, the designing of the project commenced and strict compliance with the design patterns was ensured. The correct color management, spacing, fonts, buttons, menus were used during the execution of the project. The project responsiveness was tested on various devices like desktops, laptops, tabs, ipads, iphones and android phones to ensure that they appear correctly on those devices.
Finally, after rigorous testing, the final project was deployed to github and was finally hosted online using the Netlify free hosting service.The last two steps which are relevant but unfortunately not incorporated in the project are SEO and web analytics. The reason for their exclusion is because the project is not a viable commercial product since it is a clone of an existing product.
Main Landing page of PiggyVest Clone Landing page Main Login page of PiggyVest Clone Login Page Main Register page of PiggyVest Clone Register Page Main Register page of PiggyVest Clone Register Page
Mobile Responsiveness Main Page phone Main Page Clone Main Login page phone MainLogin Page Clone Main register page Phone Register Page Clone