GymTea

Gym Project

This project was made for a gym called GymTea.

The name is short and very easy to remember for it, so any time people are looking for a gym or talking about exercises in the location where the gym is, they will remember the short and easy name.

The website is designed to be responsive on most of the devices to give the best user experience to the gym customers and users.

User experience(UX)

First time users

• First Time Visitors can see an image what tells them the profile of the page.

• First Time Visitors can easily navigate on the webpage to find essential information about a gym just like classes, prices, contact, and location.

• First Time Visitors want to check their social media links to find out how popular and trustable the gym. They can see the number of followers, comments, good or bad feed backs, if they are following the gym social life.

Returning users

• Returning Users can renew their membership using the sign up form.

• Returning Users can follow the time table about their classes.

• Returning Users can enjoy the gym community to visit the gym gallery page regularly.

Design

• Black and white colours have been used to make a big contrast with a little orange to make a little different, and highlight some text.

• The Nato Sans JP font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly.

• Home page image is an energetic strong image in the middle of the page to tell any visitor what is the main profile of the website.

Wireframes

• Balsamiq PDF

• Tehere is some missing wireframe documentation becaus my Balsamiq free account expired

Technologies used

Languages used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

• Bootstrap 3.3.7 and Bootstrap 5.0.0
  • Bootstrap was used to assist with the responsiveness and styling of the website.
• Hover:css
  • Hover.css was used on the Social Media icons in the footer
• Fontawesome
  • Font Awesome was used for social icons
• Git
  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
• GitHub
  • GitHub is used to store the projects code after being pushed from Git.
• Balsamiq
  • Balsamiq was used to create the wireframes during the design process.

Testing

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.

Validator Testing

• W3C Markup Validate
• W3C CSS Validator

User experience Testing

• The visitors can see a clear and straight forward menu bar on the top of the page. All the pages are work fine on the tested browsers.

• The project has been tested on Safari, Chrome, and Edge browsers and it is works fine on all of them.

• There is a Sign Up form on the Classes page on the website where user can sign up for required classes.

Sign Up form test

• Fill up the form completely

• If user miss any fields to fill up the system will ask to complet it properly

• Email section need -email@- character otherwise user will be warned again about the missing issue

• When all the fields are completed press sign up button to finish the procedure

Further Testing

• 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.

Known Bugs

• When I used the website on small phone screen like iPhone8 or smaller, in the footer section the opening hours information font-size are smaller than on other pages. It happens on the Gallery and the Contact pages.

• Some HTML errors caused by Bootstrap code and the Map iframe code because it is obsolete.

Deployment

GitHub Pages

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

1. Log in to GitHub and locate the GitHub {Repository}(https://github.com/78Istvan/Build-three-project)
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Credits

Media

• Images were copied after google search used the key word Gym images.

Content

• The text was created by the author.

Code

• Bootstrap 3.3.7 and Bootstrap 5.0.0
  • Bootstrap was use in the navbar and the contact form section to make the website more responsible.
• W3School
  • some of the code ideas were taken from this page to find out how to solve problems or to use new coding technics.

Acknowledgements

• I received inspiration for this project from

  • Love Runnung

  • Coders Coffee House

  • Resume Bootstrap project