View the live project here.

The Top 5 Gyms website offers the possibility for the user to see the best gyms available in the city of Stockholm, Gothenburg and Malmo (Sweden).

• User Stories

  • First time user

    1. As a firts time user, I would want the website to be clear and easy on how it works.
    2. As a first time user, I would like to see the best gyms that the website mentions.
    3. As a first time user, I want the website to redirect to the best gyms in Swedens biggest cities.
    4. As a first time user, I want to see marked gyms on the map in the city of Stockholm, Gothenburg and Malmo, so I can decide which one is in the part of the city I like.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find information about any updates on the gyms in my city.
    2. As a Returning Visitor, I want to find see if the gym I am at is on the top list.
  

  • Frequent User Goals

    1. As a Frequent User, I want to check to see if there are any new gyms in my city.
    2. As a Frequent User, I want to check to see if there are any new features to the website.

• Design

  • Colour Scheme

    • The two main colours are used, black and white, in contrast to one another.

  • Imagery

    • The Background hero image is used to catch the user's attention immediately. At the same time it convays that this website is designed for a topic related to gyms. The image has a sense intrigue and simplicity.

• Wireframes

  • Home Page Wireframe - View

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
3. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
4. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
5. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
6. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
7. Places API key:
   • Google maps Api key was used in oreder to display a map on each page, and markers for locations.
   • Google turorial was used during the coding process.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project. No error was found.

• W3C Markup Validator - Results
• W3C CSS Validator - Results
• Java Script Validator - Results

• First Time Visitor Goals

  1. As a First Time Visitor, I would want the website to be clear and easy on how it works.

     The main points are made immediately with the hero image, with clickabel links to the cities page with the list of gyms. The user has two options, click the buttons or scroll down to see a map with markers of the three cities.

  2. As a First Time Visitor, I would like to see the best gyms that the website mentions.

     When the user clicks the city names buttons, they are ridirected to the page with the list of gyms of that city.

  3. As a First Time Visitor, I want the website to redirect to the best gyms in Swedens biggest cities. Once the user is on the specific city page, they can see a list of gyms, and when they click on one, they are ridirected to the gym's webpage.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find information about any updates on the gyms in my city and see if the gym I am at is on the top list.

     A returned user can check the list of the gyms showned, and see if they want to check another gym mentioned in this website as a top one.

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any new gyms inn my city.

     The user can do this by checking the list of their city.

  2. As a Frequent User, I want to check to see if there are any new features to the website.

     The user would already be familiar with the website layout and will see any new features added in the future.

• The Website was tested on Google Chrome, Internet Explorer browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

• On some mobile devices the text on the Hero Image moves out of the image section in some cases.

• Responsive on most device sizes

• Interactive elements

-HTML5
-CSS
-JavaScript

The project was deployed to GitHub Pages using the following steps:

• Log in to GitHub and locate and open the wanted GitHub repository.
• In the GitHub repository navigate to the Settings tab.
• From the source section drop-down menu, select the Master Branch
• Next select folder and click on the save button.
• The page automatically refreshes with a message to indicate the successful deployment.
• Wait a few minutes and then you can click the link that Github has created for hosting the website.

Bootstrap 4.4.1 Library was used throughout the project mainly to make site responsive and appealing.
[Google Tutorial](https://developers.google.com/maps/documentation/javascript/marker-clustering) Library was used throughout the project in order to implement the maps API features.

The content was written by the developer. Free image source Unsplash

My Mentor for continuous helpful guidance and support.