How I created my first web page?

Greeting’s to everyone, in this blog I tried to explain the work done by me with the help of my team in creating the clone of Happy Fox website. Hope you get to learn something new by end of this blog you get to learn something new.I would like to take this opportunity to thank Masai School for this opportunity and for providing this awesome platform.

What is Happy fox and What does they do?

Happy Fox is a software-as-a-service support platform. Which offer an enterprise-grade help desk ticketing system and an intuitively designed live chat software.

Whose products include:

1. Happy-Fox help Desk
2. Happy-Fox Chat
3. Happy-Fox Chat-bot
4. Happy-Fox BI
5. Happy-Fox Work Flow
6. Happy-Fox In app-chat

From what did we start and what are the challenges we faced?

I was involved in developing Pricing Page of the website, which was build with the knowledge I got in the 4 week course in HTML , CSS and JavaScript.

Me and my team where given 4days time to get the front end done, which was not an easy task, but we always had our support form the Masai Team and IA’s. As being our first cloning project we got to learn a lot more than we can do while in an Assignment. Here are few challenges we found while working on this project.

1. Collaborating Challenges
2. Color Accuracy
3. The Details correction
4. Other effects
5. Data Entry
6. Layout and Styling

Here is the glimpse of the project and a simple walk-through of the website.

1. The Pricing Page view- it was hosted on the “Netlify site”, using the git repository. In the top you can find and H1 tag with the content of Title and Agent Based Pricing plan which gives an card view with appropriate content and added button with link to “Demo page”.

2. The card view- It was achieved using Flex and other CSS properties which also helped in making the page responsive for better user experience.

The Table

3.The Table and its content- As shown above the content in the table was added using DOM method using JavaScript. And the values such as ticks are were also included using the If else condition statements.

Bottom most with FAQ

4. The FAQ and Demo link- It just had few CSS properties with grid view that would maintain it exact framing the content.

Responsive with Media Query

5. Responsiveness — To Make the over page responsive, we did use the Media Query to improve the overall student performance.

Conclusion — To be frank I personal thought it was impossible for me to create an entire page of live website but with support of my team member and help of My IA’s, we could do what was any important challenge too learn an understand our limitation and helped us to work on them. For that and more I would like to Thank Masai.