• A responsive website using HTML5, CSS3 and JavaScript 

• This website will show COVID-19 live statistics by country.

 Screenshot 1:

The first screenshot showcases the home page of the COVID19 Live Stats (Tracker) Responsive Website. The design is clean and visually appealing, with a responsive layout that adjusts seamlessly to different screen sizes. The header section includes two sections: "Home" and "About," providing easy navigation for users to explore the website's content.

Screenshot 2:

In the second screenshot, the website displays live COVID-19 statistics. Users can view the total number of cases, deaths, and recovered cases globally. The statistics are dynamically updated in real-time, ensuring that users have access to the latest information. The design elements and typography are used to present the statistics in a clear and easily understandable manner.

Screenshot 3:

The third screenshot showcases a graph that plots COVID-19 cases by country. Users can interact with the graph to explore the number of cases in different countries over time. The graph provides a visual representation of the data, enabling users to analyze trends and patterns in COVID-19 cases worldwide. This feature adds an additional layer of data visualization and analysis to the website.

Screenshot 4:

In the fourth screenshot, the website incorporates geolocation functionality to display COVID-19 cases based on the user's system default IP address. By using the system's IP address, the website automatically detects the user's location and presents relevant COVID-19 statistics for that country. Additionally, the website offers the option to use a VPN (Virtual Private Network) to view COVID-19 cases for a specific country, allowing users to access information beyond their current location.

Throughout the development process of the COVID19 Live Stats (Tracker) Responsive Website, several artifacts were created:

Project Plan and Wireframes: A detailed project plan was developed, outlining the objectives, scope, and timeline of the project. Wireframes were created to visualize the website's structure, layout, and navigation flow.

HTML, CSS, and JavaScript Code: The website was built using HTML5, CSS3, and JavaScript. HTML was used to structure the webpages, CSS was applied for visual styling, and JavaScript was used to implement interactivity, dynamic updates, and geolocation functionalities.

Responsive Design: The website was designed to be responsive, ensuring optimal viewing experience on various devices. Responsive design techniques, such as media queries and flexible grid systems, were implemented to adapt the layout and content for different screen sizes.

Live Data Integration: The website was integrated with a reliable and up-to-date data source to fetch and display live COVID-19 statistics. This involved utilizing APIs or data feeds from trusted health organizations to ensure accurate and real-time information.

Graph Plotting: JavaScript libraries or frameworks were employed to plot the COVID-19 cases on a graph. The data was processed and visualized dynamically, allowing users to explore and analyze the data by country.

Geolocation and VPN Integration: The website utilized geolocation functionality to detect the user's system default IP address and display relevant COVID-19 statistics. Additionally, the website incorporated VPN integration, enabling users to select a specific country and view COVID-19 cases for that location.

The artifacts created along the way, including the project plan, wireframes, codebase, responsive design implementation, live data integration, and geolocation functionalities, contributed to the successful development of the COVID19 Live Stats (Tracker) Responsive Website.

 As a Frontend Web Developer Intern, my role on the team was primarily focused on the front-end development of the project. I worked closely with my teammates, including other developers, designers, and project managers, to achieve our goals.

Collaborating with the design team, I translated their design mockups into functional and visually appealing user interfaces. I implemented the website's layout, styling, and interactive elements using HTML, CSS, and JavaScript. I ensured that the website was responsive and optimized for various screen sizes and devices.

Throughout the project, I worked closely with the back-end developers to integrate their APIs and data sources into the front-end components. This collaboration involved understanding the API endpoints and data structures, handling data retrieval and updates, and ensuring smooth communication between the front-end and back-end systems.

To enhance my knowledge and skills, I also utilized various online resources, such as documentation, tutorials, and community forums. These resources helped me overcome challenges, learn new techniques, and stay updated with best practices in front-end development.

The outcome of the project was a successful COVID19 Live Stats (Tracker) Responsive Website. We delivered a fully functional website that provided live COVID-19 statistics, graph plotting by country, and geolocation features. The website was responsive, user-friendly, and visually appealing, allowing users to access up-to-date information on COVID-19 cases globally.

Throughout the project, I gained valuable experience in front-end development, collaboration within a team, and working with different technologies. I also developed a strong understanding of responsive design principles, data integration, and user interface implementation. Overall, it was a rewarding experience that contributed to both my personal growth as a developer and the success of the project.