The goal of this project was to design and implement a comprehensive physical training website that caters to the needs of my client and provides a user-friendly platform for individuals seeking effective fitness programs and guidance. The website serves as a one-stop solution, offering a diverse range of custom workouts, personalized training plans, and educational resource blogs to help users achieve their fitness goals. By leveraging appropriate technologies and incorporating intuitive design principles, the aim was to deliver a seamless and engaging user experience.
Purpose and Goal
Web Stack
The physical training website was developed using HTML, CSS, JavaScript, and AWS along with the GSAP library for text animations.
For the front-end portion of the website, HTML was used to form the structural foundation of the website, defining the various elements and their layout. CSS was used to enhance the visual presentation and styling, ensuring an aesthetically pleasing user interface. JavaScript played a role in adding dynamic functionality to the website's responsiveness.
For the back-end portion of the website, AWS services were extensively utilized to create a scalable and reliable infrastructure for the website. The aim was to use AWS to receive emails from my client's book now/newsletter forms using AWS SES, Lambda, & API Gateway in tandem. SES (Simple Email Service) was employed for receiving email notifications and communication purposes, ensuring the efficient and secure delivery of messages. API Gateway acted as the entry point for API requests, allowing seamless integration with Lambda functions. Lambda functions played a pivotal role in processing backend operations and handling form submissions with the use of Node.js and JavaScript. Additional JavaScript code was written to handle sending requests to AWS services whenever the forms are submitted. These functions and services were responsible for successfully executing the delivery of forms from the website users to my client.
Lessons Learned
Coding the physical training website provided valuable lessons and insights into various aspects of web development. Here are some key lessons learned during the process:
Overcoming difficulties with AWS API Gateway, Lambda, and SES integration:
Integrating AWS API Gateway, Lambda functions, and SES (Simple Email Service) for backend forms proved challenging. I initially encountered persistent 500 errors, indicating a cloud-related issue. However, through perseverance and diligent troubleshooting, and trial/error I successfully resolved the problem by utilizing the AWS Developer Guide to configure the API Gateway from scratch and link it to my Lambda function. This experience showed the significance of utilizing documentation and meticulous configuration, leading to seamless form submissions and enhanced functionality.
Learning about design responsiveness for all types of devices:
The project emphasized creating a responsive design that adapts seamlessly to various screen sizes and devices so I implemented media queries, flexible layouts, and responsive images. Since vanilla HTML, CSS, and javascript were used I found this process to be very time-consuming. Next time I would utilize libraries like React and or CSS Sass to make the process go smoother and quicker. The lesson learned here was the importance of considering usability and accessibility for users accessing the website from desktops, laptops, tablets, and mobile devices, and how to accomplish this in the most efficient way.
Figuring out how to carry HTML and footer across multiple pages using jQuery:
During the development process, I encountered a requirement to maintain consistent HTML elements, such as the header and footer, across multiple pages. Through experimentation, exploration, trial, and error, I discovered the power of jQuery, a JavaScript library, which enabled them to dynamically load HTML content and footer across pages without duplicating code. This experience highlighted the benefits of utilizing existing libraries and tools to solve common web development challenges efficiently.
In summary, coding the physical training website provided insights into overcoming challenges with AWS API Gateway, Lambda, and SES integration, deepened the understanding of design responsiveness for different devices, and showcased the power of jQuery in carrying HTML and footer across multiple pages. These lessons learned will undoubtedly contribute to future development projects.
