TEAM 05

hosted link:click here

Table Of Content

1. Introduction
2. Project Overview
3. Technologies Used
4. Getting Started
5. Contributing
6. Challenges Faced and Resolutions
7. Website UI Explanation

---

Introduction:

• We are a cohesive and talented team of nine individuals, each bringing a unique set of skills and expertise to the table.With a combined effort, we have successfully contributed to a total of nine projects, showcasing our versatility and proficiency across various domains. Our collaborative spirit and commitment to excellence drive us to overcome challenges and deliver exceptional results.

---

Project:

• This project was assigned by Geekster as a Major Project for a team of 9 members:

  • Chrome Extension
  • Resume Template
  • Payment Integration
  • Invoice Generator
  • Type Speed Test Game
  • Minesweeper Game
  • Code Editor
  • Flipcart Filter and Sort
  • Trello Clone

  ---

Team Members:

• We are the team of 9 members
  • Sakshi Thakare (TEAM LEAD)
  • Mansi Sorathiya
  • Amit_kumar
  • Sanket Mahadik
  • Aditya Wakarekar
  • Ranjeet jha
  • Mohd_Shazil
  • Aman Sen
  • Kushnandan Kumar Shah
• Projects are completed under the Guidance of our Mentor Swati Priya

---

Technologies Used:

1. HTML:
   Used for structuring the web pagesincluding headers, navigation bars, content sections, and footers.
2. CSS (including Tailwind CSS):

• Applied for styling and layout.
• Tailwind CSS: used for framework for rapid UI development, implementing responsive design and styling components efficiently.

3. JavaScript:

• javascript helped projects to be dynamic and to perfomance various operations in projects
• JavaScript Libraries Used : Project relies on several external libraries and dependencies to enhance its functionality and features. Below is a list of these libraries along with their purposes:

4. AOS - Animation on scroll

• Description: Animation on Scroll" by Michał Sajnóg (michalsnik) is a JavaScript library that enables the creation of animations and effects triggered by scrolling.
• Usage: It used on some of our webpages to enhance the look and make our website more interactive.
• Documentation: Official documentation for further details.

5. Font Awesome (for icons)

• Description: Font Awesome is a comprehensive icon library that offers a vast selection of icons for various purposes, such as user interface design, web development and graphic design.
• Usage:
  • Include the CSS: Add the Font Awesome CSS stylesheet to your HTML document by including a link in the section.
  • Add Icons: Insert icons into your HTML using the element with the appropriate class. Customize their appearance using CSS.
  • Customize Icons: You can modify icons' size, color, and alignment by adding extra classes and applying CSS styles.
  • Explore Icons: Visit the Font Awesome website or documentation to find the icons that suit your project's needs.
• Documentation: Official documentation for further details.

---

Getting Started:

• To get started with the All Projects, follow these steps:
  1. Clone the Repository:
  2. Open the Project Directory:
  3. Open in a Code Editor: Open the project folder in your preferred code editor.
  4. Start the Application:
  • Open the index.html file in your web browser or use a local development server if you have one configured.
  5. The application should now be running locally, rendering HTML, CSS (including Tailwind CSS), and JavaScript.

---

Challenges Faced and Resolutions:

Throughout the development of our Lalpathlabs Clone Website Project, our team encountered various challenges and obstacles. Here, we document some of the major issues we faced and the solutions we implemented:

1. Challenge 1 - Integration of Third-party Libraries:
   • One of the initial challenges was integrating third-party libraries and plugins seamlessly into our project.
   • This was crucial for replicating specific functionalities from the original website.
   • Resolution: We dedicated time to thoroughly understand the documentation of each library, sought help from online communities, and conducted trial-and-error testing until we successfully integrated them into our project.
2. Challenge 2 - Cross-browser Compatibility:
   • Ensuring that our website looked and functioned consistently across different web browsers posed a significant challenge.
   • Resolution: We performed rigorous testing and debugging across various browsers, identifying and rectifying CSS and JavaScript compatibility issues.
   • This involved adjusting styles and optimizing code to achieve a cohesive user experience.
3. Challenge 3 - Responsive Design:
   • Creating a responsive design that adapted seamlessly to different screen sizes and devices required careful planning and execution.
   • Resolution: We adopted a desktop-first design approach and utilized CSS media queries extensively.
   • Regular testing on various devices allowed us to fine-tune the responsiveness of our website.
4. Challenge 4 - Team Collaboration and Version Control:
   • Coordinating tasks among team members and ensuring smooth version control throughout the project proved to be a challenge.
   • Resolution: We implemented a version control system (e.g., Git and GitHub) and established clear branching and merging processes.
   • Regular team meetings and communication channels, such as Slack and zoom/ google meet, facilitated collaboration and issue tracking.

Web UI: