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 can use the gym's 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.

• First Time Visitors will get enough information about a gym to make them decison to join or not to the gym communiti life.

• First Time Visitors will see an easy and clear navigation bar, with the basic information in the 'about' section about the gym and trainers on the HOME navigation page. The main information such as prices, classes, location, contact infos are availabe on different pages.

• The creative used up images are encourageing the users to spend more time on the webpage which gives more opportunity to make a succesfull business with First Time Visitor.

Returning users

• Returning Users can renew their membership using the signup form.

• Returning Users can follow the timetable about their classes.

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

• This is an easy use website with all the importent contents like the classes table, the signup form, the colorfull pictures, and the very parctical navbar so a returning customer will be able to manage whatever changes are neeeds to be done.

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 is not being imported into the site correctly.

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

• All of the pages are very clear without any confusing content. Every page contains only the title of the page with all the necessary information.

• The aim is to give the most information, wrapped in an elegant design.

Wireframes

• Balsamiq software was used to create wireframes to my project.

• Wireframes are available to view on the following links-

• Laptop screen Balsamiq PNG

• Tablet screenBalsamiq PNG

• Phone screenBalsamiq PNG

Technologies used

Languages used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

• 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 Navbar with underline decoration
• 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

Manual Testing

1. Navbar buttons:

• The navigation buttons allowed the user to switch between the pages. The buttons have hover effect so when the cursor is above the button, the button gets an under line decoration. The navbar is on the very top of the page wich turn to a scroll down menu on small device. The menubar is fixed to the top to make an easer usage when the page has to be scroll down especially on small screens when the page can be vertical long.

2. Social icons:

• When social icons are clicked, the browser takes the user to the linked social platform. The social icons code has the 'noreferrel' code to the site security.

3. Sign up form testing:

• The classes page has a signup form which helps the user to join to a class. The classes table is placed above the form so the user can see what are the available options about the classes and sign up then to the choosen class on the same page. Sign up form has placeholders to make easer to fill them up, and gives a little hint to the user how to fill the form, and don't leave it blank. Email section givs a warning to the user to use the '@' caracter in the section other wise it will not be valid.

4. Images responsiveness testing:

• The used images are not streched or pixeld on large or small screen either. They are appear on the right size and they make the site more attractive. Contact page middle section image has benn edited to fit in the middle on small screen.

Website responsiveness testing

• Firstly, to test my website to how responsive I used my own devices {Iphone8, Ipad6 10" ,IMacAir 13", Dell laptop 15"}.

• Secondly, I used two other free software

• Responsinator

• Responsive Website Design Tester

Validator Testing

• W3C Markup Validate

• W3C CSS Validator

Browser Testing

• The project was tested on Mozilla Firefox, Microsoft Edge, Google Chrome, and Apple Safari browsers.

Further Testing

• Few of my friends and family members helped me testing on their on devices, and they shared their own opinion about my project.

Known Bugs

• 17 CSS errors apperad when the project URL was checked in the W3C CSS Validator, but all these errors was caused by the Bootstrap code wich was used all around the project, and these code blocks are works fine in the project.The used code blocks were downloaded from the official Bootstrap page.

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.

• Images were copied from Unsplash to get reasonable quality

• Created image addresses with Imgur

Content

• The text was created by the author.

Code

• Bootstrap 5.0.0

  • Bootstrap was used in the navbar and the contact form, and the footer section too, and also bootstrap grid system have been added to create columns and rows around the site.

• W3School

  • Some of the code ideas were taken from W3Scool page to find out how to solve problems or to use new coding technics.

Acknowledgements

• I received inspiration for this project from

  • Love Running

  • Coders Coffee House

  • Resume Bootstrap project

This project was a big challane and a great opportunity to get more practic in CSS/HTML coding and get more knowlidge about the Bootstrap framework.