Introduction
The Sidehustle Bootcamp cohort 7.0 just began with a bang. As a front-end developers, we were eager to dive into the first week's task, which was to replicate a landing page using a different approach. The landing page we were assigned to duplicate was Flutterwave's Landing Page, a leading financial technology company, and Terra Internship Landing Page. This was a great opportunity to put the skills and knowledge were had gained from the internship program into practice, as we combined HTML, CSS, and JavaScript to build the prototype.
Working in a team, we were assigned different parts of the project, and each team member was committed to making the task a success. It was inspiring to see how everyone came together and took on the challenges head-on, regardless of how daunting they seemed. This experience taught us the true value of teamwork and how it can make the dream work. We collaborated, shared ideas, and combined our individual codes to create a cohesive and functional landing page.
Task Assigned
We were divided into two groups of eight members each. Four groups worked on replicating the Flutterwave landing page as their project, while the remaining four groups tackled a Terra Internship Landing page for their project. Each group collaborated internally, assigning roles, using collaboration tools like Slack and GitHub, and conducting regular meetings. This allowed for efficient sharing of progress, discussions on challenges, and successful completion of the respective landing pages within the given timeframe.
Team Members:
Olaleye Abiodun
Odubo Perebi Allen
Oduba Ayotomiwa
Godfrey Offeh
Piate Kevin
Eboweme Ayo
King Ibitamuno Peculiar
Nelson Ikechukwu Osuya
Processing
The first step in creating the landing page was to study the original Flutterwave/Terra Internship landing page and understand its design and functionality. We carefully analyzed the layout, color scheme, typography, and other design elements to ensure that our replica would closely resemble the original page. We also examined the animations and interactions used on the page and brainstormed ways to implement them in our prototype.
As a front-end developer, we were responsible for implementing the visual design of the landing page. We started by creating the basic structure of the page using HTML, including the header, footer, and main content sections. We carefully copied the layout and design elements from the original Flutterwave landing page, making sure to accurately replicate the typography, color scheme, and spacing.
Once we had a clear understanding of the design and functionality, we started building the landing page from scratch. We used HTML to structure the content, CSS to style the page, and JavaScript to add interactivity and animations. It was important to pay attention to detail and ensure that our replica was pixel-perfect, with the same spacing, alignment, and visual elements as the original page.
Next, we moved on to styling the landing page using CSS. we used a combination of Flexbox and Grid layouts to achieve the desired layout and positioning of the elements. we also applied CSS animations and transitions to create the same smooth and interactive effects as the original page. It was important to pay attention to detail and ensure that our replica closely resembled the original page in terms of visual design.
Once the visual design was in place, we worked on adding interactivity and functionality to the landing page using JavaScript. This included implementing form validation, creating smooth scrolling navigation, and adding animations and transitions triggered by user interactions. we used event listeners and DOM manipulation to achieve these functionalities, following best practices and ensuring that the code was clean and efficient.
Throughout the process, my team and we collaborated closely, regularly sharing updates, feedback, and ideas. We reviewed each other's code, provided constructive feedback, and made necessary adjustments to ensure that our landing page was consistent and cohesive. It was a great learning experience, as we learned how to work effectively in a team, communicate clearly, and resolve conflicts or challenges that arose during the project.
Challenges
One of the challenges we faced was creating a responsive design for different screen sizes. We had to ensure that our landing page looked good and functioned well on various devices, including desktops, laptops, tablets, and mobile phones. We used media queries in CSS to apply different styles based on the screen size, and we thoroughly tested our landing page on different devices to ensure that it was responsive and user-friendly.
As we progressed with the task, we faced some challenges along the way. One of the challenges was ensuring cross-browser compatibility. We had to test our landing page on different web browsers, such as Chrome, Firefox, Safari, and Edge
Implementation of Task
As a team of front-end developers in the sidehustle bootcamp cohort 7.0, we meticulously examined the design prototype file for our assigned task. We took note of the specific pages that needed to be worked on in order to replicate the landing page.
Header
Footer
Main
Flutterwave board
(Click Here for the Repo link to view the flutterwave landing page)
(Click here to live to link to view of flutterwave landing page)
Terra Internship board
(Click here to live link: to view the Terra Internship landing page)
(Click Here for the Repo link: to view the Terra Internship landing page)
Conclusion
In conclusion, the experience of creating the Flutterwave and Terra Internship landing pages as a frontend developer in the sidehustle bootcamp cohort 7.0 was both challenging and rewarding. Through effective teamwork, collaboration, and the application of our HTML, CSS, and JavaScript skills, we were able to successfully replicate the landing pages, while also experimenting with functionality and animations. The process involved careful planning, division of tasks, regular communication, and a shared commitment to excellence.
Working in groups of eight, we embraced the opportunity to learn from each other, leveraging our diverse skill sets and perspectives to overcome obstacles and deliver quality results. The project allowed us to put into practice the knowledge gained from the internship program and further develop our front-end development skills.
As we move forward in our careers as front-end developers, we will always cherish the lessons learned from this experience, including the importance of teamwork, the value of collaboration, and the satisfaction of seeing our hard work come to life in the form of a functional landing page. We are grateful for the opportunity to be part of such a dynamic learning environment and look forward to applying these skills in our future projects.
Hoping to see you again this coming week!!!!