Visual clone of chargebee.com : Getting started as a Web Developer
This is the the brief description of the very first project which was made as a part of first unit’s curriculum completion @ Masai School for the Full-stack Web Developer Bootcamp.
[PROJECT LINK : https://github.com/rao-kartik/masai-Unit-1-Project]
It all began when I landed on a decision to pursue my passion to become a full stack developer amidst the pandemic where I was unsure how and what life’s going to be like in the future and at a point of time where many offline activities where converted to online with an optimistic mentality of taking human existence forward. It was somewhat at that point of time I joined masaischool for their web developer r-program and now I’m at the verge of completion of its first unit and yes obviously it was one of its kind.
The topics were taught with the methodology of gradually releasing the resposibilities and it was an effective tactic for upskilling the candidate and turn them into a robust developer in a highly volatile industry like tech.
The first unit covered the topics mentioned below :
Basic bash scripting
HTML Basics and the box model approach.
Styling a web page using CSS and the higher level layouts of CSS namely Flexbox and Grid.
Javascript basics using nodeJS, solving basic problems using operators, iterative loops, conditional statements, arrays, string and objects.
DOM manipulation using javascript.
Soft skills training for enhancing canditate’s communication skills, writing skills and to stay motivated and consistent through out the well defined strict curriculum.
Training and Support team
Nrupul Dev (Technical training)
Yogesh Bhat (Soft skills training)
Chandrashekhar (Instructional Associate)
This project was accomplished succesfully due to the immense support and commitment from the above mentioned faculties and my teammates.
Project description, the team and the work spilt up :
As mentioned in the heading, we as a team named “Hugli” with a set of 4 members Karitk Yadav(sm2_080), Pradeep Kumar(sm2_123), Gourav Sharma (sm2_061) and myself Kiran R(sm2_083) were given the task to clone the website chargebee.com.
Charbee is a website that develops and publishes a subscription management and recurring billing platform. The Company offers a billing platform that allows subscription based businesses to manage their accounts and recurring billing transactions. ChargeBee markets its products and services internationally.
We, as a team decided to clone 5 pages from this website and each individual were assigned with their specific task and the project was made by mutually collaborating via the distributed version controlled system called git and the development files were stored on as repositories on the github.com website.
The pages that we chose to develop and the member who worked on it are as mentioned in the below section:
Landing page — Kartik Yadav
Login and Demo Scheduling page — Gourav Sharma
Pricing page — Pradeep Kumar
Learn more page — Kiran R
Deeper description of every pages that were cloned:
Landing Page :
The landing page was built by Kartik and this page is a highly resourceful page for a user who uses this application, this page guides a client as per his needs and requirement and inorder build such a full fledged sheet, the developer had to use a lot of HTML for the great number of tags and over depth of the page, when it comes to styling the CSSgrids were used and thus for enhancing the overall responsibility of the sheet a little DOM manipulation was done.
Login and Demo Scheduling page :
These 2 pages were made by Gourav from our team and the purpose of these pages were very specific, when it comes to login page it was made to give a user an account so that they can get things more personalised and exclusive for them and discussing about the demo page, as the name implies it is meant for user to get an experience regarding the uses and functionality of the application at a premium level and that conveys to the user how life can be simplified using this product.
The design part of these were quite easy from a developer point of view who had to design the front end of the product, it was built using html and styles were applied with the help of CSS.
Pricing page :
The pricing page gave the client a flexiblity to choose a desired plan according to their required time span of service and that makes the expenditure of a client to an optimum level. This page was crafted by Pradeep from our crew and he did it using HTML and CSS.
Learn more page:
The learn more page was built by me (Kiran) and the intention behind this page was to give a better insight to client towards a specific topic that they were interested about. This page was decently lengthy and was made using HTML, CSS for styling and for the animations pseudo classes and DOM manipulation was done using the basic javascript codes.
Foot notes : All the images and icon links have been taken from the main website and some other internet sources and may be subject to copyright. So, try not to use the images or icons for business purposes or reproduce it without prior approval from the owner. The images and icons used here are just for illustratory purposes.
