Cloning of Mailtrap.io
Webpage built using HTML,CSS and DOM — Team Titans-Arsenic
Project-link: https://github.com/suraj588/Titans-Arsenic
Learning to build webpages have been fascinating since the past month, especially for me and my collaborators as we have just started learning the new, trending and the most vibrant part of today’s technology. But when it comes to building your first project, its somewhat not as easy as we seemed to be. But before going any further, I would like to first introduce myself and my collaborators without whom this project would have been impossible.
Team-members and Team-lead
- NIHAL AHMED (TEAM-LEAD)
- DONURI BHARATH KUMAR REDDY(Bharath Reddy)
- TEJAS ANILBHAI PARMAR(TEJAS PARMAR)
- SURAJ BHAN SINGH
Concepts covered in the entire unit
Command Prompt
Using Git terminal
JavaScript
Hypertext Markup Language (HTML)
Cascading Style Sheets (CSS)
Document Object Model (DOM)
Git Collab
Git Branching
Project Statement and Expectations
In the learning process, we always come across a phase when we have to showcase how effective our learning has been and so in the process, we received a project to Clone the website mailtrap.io.
In this project, our task was to design pixel perfect clone of mailtrap website and design a minimum of five of its webpages in three and a half days. So we expected to :-
To make a near to pixel perfect clone of the website “https://mailtrap.io/".
Designing a minimum of 5 working pages .
Regularly pushing the tasks in the respective branch of the repository.
Communicating effectively before making any commit.
5 working pages targeted were :-
a.) Home page
b.) How it Works page
c.) Login page
d.) Signup page
e.)FAQIf time remains extra set of pages can be made and was to be decided later.
Finally making a blogpost and posting the project work in it.
Roles and Responsibilities of team-members
1.) Home page was a big one, so it was divided among the three collaborators.
2.)At first, home page designing was to be started by Tejas, so that he can freely make it and push to the repository without any hindrance.
3.) In the meanwhile I and Bharath planned to work on Signup and Login page respectively.
4.)It was expected that Tejas would be completing 33% of the Home page along with me and Bharath, completing their Signup and Login page by 12 noon
(24–11–2020).5.) Since home page was tedious, Tejas was given some extra time, upto 5 p.m. on the same day.
6) By that time I and Bharath planned to work on How it works and FAQ.
7.) If any member faces any issue, he can discuss and may exchange work with any other member.
8.)It was expected that by the end of the day on 24–11–2020, the HTML and CSS of the four pages except the home page is designed.
9.) On 25–11–2020, the main target was to complete the home page and add script for all the pages using JavaScript.
10.) On the last day (26–11–2020), blogpost and presentation was to be targeted and tried to complete before 3 p.m.
What actually happened
1.) Tejas started working on the homepage on the first day by evening and completed some part of it by the end of the day.
2.)By the end of afternoon, on the next day I and Bharath completed the signup and login page respectively.
3.)Tejas continued to work on the homepage and later handed the work to Bharath.
4.) It was decided that homepage was to be done by all three of us equally but according to the flow of the project, Bharath found it very comfortable to continue and later, completed the tedious task himself. It must be admitted that this guy has performed the most productive work in our group and have always been there with creative ideas to resolve the issues which was later encountered in other pages.
5) By that time, I completed the footer of the pages and resolved some issues which was encountered related to font-styles, separating CSS and HTML files from all the branches, adding links of CSS files to the HTML files, adding header and footer to all the pages and making small modifications to make pages pixel perfect.
6.) In spite of facing lots of health and electricity issues, Tejas was able to complete the FAQ page on time. In fact, much of his ideas have been taken by me to make this post. Although we never thought that it would be possible to start building the sixth page, but still he started anyway, although he didn’t make it due to time constraint.
7.) After all of our pages were ready and in their respective branches, we started merging files in the main branch. Though conflicts happened, we resolved it quite safely.
8.) Finally, our project was ready to show-case.
Challenges faced and how they overcome
The major problem we faced was not able to access some of the features in GitHub. The first challenge we faced in it was not able to checkout to main branch and the branches were not visible when saw the branch list. Later we connected with our team lead and instructional associate who recommended us to use the command
git fetch --all. After that the problem was resolved but at the time of merging, we were unable to merge in main. Later we understood that since we did not created branches by remaining in the main branch, so pull requests were not being created. So, again we created different branches being in the main branch, copied the code of the respective HTML and CSS files in the new branches and then we were able to create pull requests and merging was then possible. We also faced trouble in making pages responsive for different screen sizes. Though the issue was not resolved , we have decided to work on it later. Overall we can say, that this project has been a success as it has reflected what are the things we have to work upon and what are the concepts we have mastered.
Some replicas of created designs
Note: All the images and icons appearing in this project has been taken from https://mailtrap.io and other internet sources.
At the end I would like to thank all the Instructional Associate and our team lead who helped us at every step in our project and Masai School whose teaching have been and will be an enjoying and a great learning journey.