This project was created as an examination project for Code Institutes Full Stack Development course in HTML5, CSS3 and User Centric Design.

This site was created with the user purpose to find essential information about the gym, to be able to sign up and easily contact the gym with potential questions.

The gym itself is a small gym in the center of a small town, that focuses on hard and effective training with simple and accessible methods for anyone who can put in the effort. The purpose of the website is to create additional channels of interaction with thier customers. The gym also wants to retain traffic and encourage users to return to the site, find them on social media as well as the physical gym location.

• To instantly understand what the business and their website offers.
• To be attracted to join the gym and use it's services.
• To find reviews from previous customers.
• To be able to locate and contact the gym.
• To construct a message for the gym.
• To sign up for classes.
• To access social media for future rating and contact.

The webpage will have three separate sections with various functionality and purpose, along with a navigation bar at the top and a footer at the bottom

1. A navigation bar with all the categories for navigation such as: Home - Classes - Membership Sign Up! Also a clickable logo that brings the user to the landing page. This navigation bar follows the user through all the pages.
2. A footer where the user will find contact information and links to social media.
3. On the landing-section of the page the user will find a short sales-pitch with a clear Sign Up-button that pops up a Sign up-modal. The background will consist of an inspirational picture to encourage gym workout.
4. On the Classes-page the user will find the different classes that they can sign up to. Each class is a square space with the class name and a descriptive text and picture. Each square works as a button that links to an external scheduling site.
5. The last section will be a selection of positive reviews from members that will encourage new members to join the gym or a class.
6. Links to existing social media platsforms that the gym uses such as Facebook, Instagram and Youtube.
7. A contact button in the lower-right corner that opens a contact form-modal for any questions that the webpage-visitor might have.

• A working schedule where users can sign up for the classes offered at the gym.
• A link and working payment-solution for anyone interested in joining the gym.
• A working function where users can collect their workout-statistics over time and view them as graphs and readable data. ...

For this project, multiple technologies, libraries, languages and frameworks were used.

• HTML5 - One of the main languages to add structure to this project.

• CSS3 - The other main language to add style and improve user experience.

• Bootstrap - This framework has been used to add styles, positioning and effects throughout the pages such as navbar, modals and buttons.

• Font Awesome - Provided icons and decorations to improve user experience.

• Google Fonts - The main library for adding fonts and text-styles.

• Github - The site for hosting the website and storing the code.

• Gitpod - The tool in which the coding was created.

• [Balsamiq Wireframes] - The tool in which the mockups and wireframes for this site were created.

• Pixabay - Stock photos and images.

  Photo Credits:

  Reviews images:

  • Image by thatsphotography from Pixabay
  • Image by skeeze from Pixabay
  • Image by Free-Photos from Pixabay
  • Image by Free-Photos from Pixabay

  Classes buttons:

  • Image by 5132824 from Pixabay
  • Image by Linus Schütz from Pixabay
  • Image by skeeze from Pixabay
  • Image by Ichigo121212 from Pixabay

  Background:

  • Image by StockSnap from Pixabay

• Calendly - Links to external calendering service for class appointments.

• Stack Overflow - Inspiration, codesearch and troubleshooting.

• w3schools - Inspiration, codesearch and troubleshooting.

• Material design for Bootstrap - Inspiration, codesearch and troubleshooting.

During the development process the different functionalities were tested as the work progressed. The main tool to test functionality was desktop Google Chrome with the inspect function for mobile and fullscreen testing.

At the end process additional operating systems and devices were used to monitor the responsiveness for different screen sizes

Systems used was:

• Google Chrome - The main web browser when testing the code along with Google Chromes "Inspect"-utility
• Microsoft Edge - Additional web browser used to test funtionality and look.
• [Apple IOS v. 13.7](iPad 5th gen) - A md-screen size test funtionality and look.
• [Android v. 10](Huawei P20) - An xs-screen for testing look and funtionality.
• W3C Validator - Used to validate the HTML-code markup validity.

The HTML-code were pasted into the W3C-validator to test validity of the code. Initial errors regarding modal links inserted into the Sign up-buttons were adressed. To fix this the decision was made to remove links to external payment sites that were initially implemented to increase the realistic feel of the website.

In addition, the W3C Validator warns of comments that were implemented in the HTML-code in order to increase semantics and improve orientation of the code. These warnings were overlooked due to the minimal impact of the websites functionality and look, and improved navigation of the code.

i. Navigate to [W3C Validator](https://validator.w3.org/).
ii. Click on tab "Validate by Direct Input" or navigate to (https://validator.w3.org/#validate_by_input).
iii. Copy full HTML-code from repository with Ctrl + C.
iv. Paste with Ctrl + P into textfield and click "Check"

Initial screen-testing looked good when viewing on a desktop screen, even with responsive design on a smaller screen.

Initial testing on a Huawei P20 Android phone showed that the responsiveness didn't apply with issues regarding content sizing and placement in the "classes"-section of the HTML-code. With the text bleeding over the images on xs-screens (tested on and Andriod Huawei P20) These issues were addressed and fixed by adding responsive bootstrapping to the particular textboxes.

1. Sign Up
	i. Click the Sign Up-Button on the landing page or in the nav-bar.
	ii. Make sure a modal-window appears.
	iii. Try to submit form without any information and verify that an error-message appears.
	iv. Try to submit form without some information filled out and verify thaat an error-message appears.

2. Contact
	i. Click the Message-Button in the lower right corner.
	ii. Make sure a modal-window appears.
	iii. Try to submit form without a valid email and verify that an error-message appears.
	
3. Navigation
	i. In the top nav-bar, click "Classes" and verify that the webpage scrolls to the classes-section.
	ii. In the top nav-bar, click "Reviews" and verify that the webpage scrolls to the reviews-section.
	iii. In the top nav-bar, when on the reviews or classes section, click "Home" and verify that the webpage 
    scrolls to the top of the page.
	iv. In the top nav-bar, when on the reviews or classes section, click logo and verify that the webpage 
    scrolls to the top of the page.

4. Classes-section
	i. Navigate to the classes-section.
	ii. On desktop, make sure that the four images zooms in on hover with the mouse.
	iii. Click any of the four different images and make sure they navigate, in a new tab, to [Calendly](https://calendly.com/).

5. Social media
	i. In the footer, click the three logos to the respective social-media platform.
	ii. Verify that you're redirected, in a new tab, to the respective home-page of the social-media platforms.

1. Desktop
	i. Open webpage on full screen and scroll down through all the content.
	ii. Make sure that all content is visible, readable and fits within its respective container or designated space.

2. Ipad
	i. Open webpage on full screen and scroll down through all the content.
	ii. Make sure that all content is visible, readable and fits within its respective container or designated space.

3. Smartphone
	i. Open webpage on full screen and scroll down through all the content.
	ii. Make sure that all content is visible, readable and fits within its respective container or designated space.
	iii. Make sure the content is responsive to the screen-size and contains readability and functionality.

When tested on an Ipad 5 with IOS 13.7 the hero image appears zoomed in on a particular part of the image.

On Android ver.10 the classes-buttons remains zoomed in after clicking and reverting from linked page with browser navigation.

This webpage was deployed through GitHub settings > Github Pages.

Since development was performed through Gitpod.io and backuped in a local repository all source material was pushed to Github throughout development.

• Content text was written by (https://github.com/Blajde)

• Images and background [Pixabay] (See Technologies used - photo credits)

• Acknowledgements Thank you to:

  • Brian O'Grady - Programming Director Code Institute
  • Matt Rudge - Senior Product Developer Code Institute

  For inspiration, tutoring and providing guidence with Code Institutes full stack developer videos.

  • Code Institute Slack community

  A special thanks to my mentor:

  • Medale Oluwafemi

  For helping and guiding me with tips, problem-solving and feedback throughout this project.