View the live project here.
Local gym in the City of Stirling with growing client base.
The gym offers extensive variety of classes and gym space for all age group, gender.
The gym is easily accessible and located in the City Centre.
The website offers several functionalities to retain existing client and gain new ones.
The project helps me to showcase my knowledge of HTML and CSS and Bootstrap.
To find relevant information after arriving from a search or referral link to this website.
-
As a First Time Visitor, I want to be able to easily navigate throughout the site to find content relevant to me.
-
As a First Time Visitor, I want to easily understand the ethos of the gym and what they offer me as client.
-
As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted.
-
As a First Time Visitor, I want to find information about different membership and pricing.
-
As a First Time Visitor, I want to find out what is demographics of the gym goers.
- As a Returning Visitor, I want to find the best way to get in contact with the gym.
- As a Returning Visitor, I want to find information where to park if arriving by car.
- As a Returning Visitor, I want to find the best membership option meet my requirements.
- As a Returning Visitor, I want book my classes using via the website.
The site owner would like to get more business by exposing the users to this content.
Also this surface is retaining existing client providing information and facilities to them.
Users have a set standard what they expect to find when they arrive to a website e.g. navigation, contact page with contact details and so on.
These needs and requirements were met throughout the website design.
Design choices were made to have high usability of website.
Classes were structured in table form as usually expected for such information.
Membership choices were categorized to address all age groups.
- #e35b17 RGB(200, 80, 20)
- ##7d7d7d RGB(117, 117, 117)
- #fff as the default text color
My font family choice is “Montserrat” with Sans Serif as a fall back what was taken from Google Font.
The website consists of 5 separated pages namely index.html, about.html, membership.html, classes.html and contact.html.
Wireframing helped me to put together the project without coding a single line.
Once the finished wireframes were printed the coding process was very smooth and straightforward.
Wireframes are available in bmpr and pdf format.
The user by clicking on the Sign Up button is able to fill up a from and send it to the gym.
With the sent information the gym would be able to reply and discuss a free introductory session with the new potential client.
The first section will give a short insight what the gym can offer.
User testimonials to help first visitor to build trust.
Map and transport to help the users to make their first virtual visit.
The local bus times are also linked for better user experience.
Short description of the gym and its ethos with a video tour.
(video is not related to this business and was taken from Youtube see Credits below)
Progress bar to showcase of the gym's demographics.
Cards to emphasize the different features of the gym.
Pricing description as passes and monthly plans with pictures. By hovering over the price tags the box shadow would increase.
Throughout description of the classes, their intensity and schedule.
By hovering over the class description the box shadow would increase.
Book a class modal to make an online booking and downloadable pdf format is also available.
Contact form to send direct message from the website.
General contact information and opening times.
Map and transport option repeated for a second virtual journey.
The local bus times are also linked for better user experience.
The following languages and framework were used to create this project.
- HTML5 – provided the main structure of the website.
- CSS3 – provided the styling of the website and the overall content.
- Bootstrap 4.6.1 – provided the responsive structure and some other component such as jumbotron, modal, navbar and form.
- Balsamiq - development tool was used to create the wireframe for the website.
- 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.
- As a First Time Visitor, I want to be able to easily navigate throughout the site to find content relevant to me.
The navigation elements can be easily accessed regardless of the screen size of the user and navigated between the pages.
I wanted to customize bootstrap hamburger icon what proved to be challenging so I have coded my very own hamburger icon and customized as I wanted.
With this customization I have overcome some other issues such as the bootstrap button was sliding horizontally when clicked on. - As a First Time Visitor, I want to easily understand the ethos of the gym and what they offer me as client.
The main page and also the about page give an insight of the first time users what the gym has to offer
and who are the people both owners and member of this gym. - As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted.
Recommendation of other people are very important therefore the testimonials on the main page will build trust and also gives opportunity
to the first time user to identify channels to find out more information about the gym from external sources. (Trustpilot, Facebook) - As a First Time Visitor, I want to find information about different membership and pricing. One of the most crucial point of the decision making process is the price point of the gym what has to be easily understand. The membership page easily explains and differentiate between the available options.
- As a First Time Visitor, I want to find out what is demographics of the gym goers.
About page progress bar feature gives an insight to the visitor who are the people are visiting the gym.
For many people to joining a new social circle such as a gym can be intimidating so giving them an opportunity to relate can make their decision easier.
- As a Returning Visitor, I want to find the best way to get in contact with the gym.
A contact page can be accessed from the main page which is the native go to page with relevant information about the gym location,
accessibility, opening times and contact details.
- As a Returning Visitor, I want to find information where to park if arriving by car.
Returning visitors who have already made contact with the gym or have completed their first
free session might want to find out the best possible way to par their car which is closest and cheapest way for them. - As a Returning Visitor, I want to find the best membership option meet my requirements.
The main audience of the gym's client base are active, working age people who are part more than social and professional network.
One of the most common question from other people is how much the gym cost. At the same time usually people pair up after a while to make sure they also have fun.
The membership page contains information which is outwidth the member current membership option.
- As a Returning Visitor, I want book my classes using via the website.
A booking modal was completed on the on the Classes page for targeting returning and especially frequent users to book the class online.
The main testing took place in Google Chrome and its Developer tool using the Network and Lighthouse options to
identify any errors or opportunities to improve performance.
After the deployment the website was tested on different screen sizes and in different OS systems.
I have asked my wife and few of my friends to test the website and their feedback was taken on board.
Html pages were validated by W3C Markup Validation Service
- Index.html
- Aboutus.html
- Membership.html
- Classes.html
- Contact.html
Css code was validate by W3C CSS Validation Service
Style.css
The website accessibility was checked with Wave Web Accessibility Evaluation Tool.
As a result, I had to change the font and background colors to achieve higher contrast to eliminate contrast errors.
The original orange color (#357464) was changed to (#c85410), grey color (#7d7d7d) was changed to (#757575) and
the font color (#fafafa) was changed to (#fff) for better contrast ratio.
Conclusion: In the future the colors will be checked before the coding would even start.
- Opened up my deployed webpage in a new incognito tab in Google Chrome.
- I used CTRL+SHIFT+I key command to prompt the Developer Tool.
- I navigated to the Lighthouse menu option (usually the option is not visible but clicking on the >> sign will reveal it)
- I select all 5 categories and selected desktop option and repeated steps for all 5 pages
- I select all 5 categories and selected mobile option and repeated steps for all 5 pages
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch". The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
- On GitHub, navigate to the main page of the repository.
- Above the list of files, click Code.
- To clone the repository using HTTPS, under "Clone with HTTPS", click . To clone the repository using an SSH key,
including a certificate issued by your organization's SSH certificate authority, click Use SSH, then click.
To clone a repository using GitHub CLI, click Use GitHub CLI, then click. - Open Git Bash.
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL you copied earlier.
- Press Enter to create your local clone.
Browser preview was used between commits using the following steps...
- Open terminal in GitPod.
- With Ctrl+C the cursor was prompt.
- python3 -m http.server command line was used to open up a private port.
- Once the port 8000 was serving the page was opened by clicking on the Open Browser tab.
The menu toggler was one area where I spent lot of time to try to find a solution.
My primary goal was to give a custom color scheme to the menu items and to the toggler too.
After my second session with Mo (mentor). I decided to do this icon from scratch rather using the Bootstrap predefined icon.
With that being done I was able to fully customize all the elements I wanted.
Embedding images in div container and make them responsive was very time consuming in the beginning of the task.
I researched the topic and read many topics and watched a few Youtube tutorials and I was able to resolve the issue fully.
Also I had to refer back and research bit more how to center elements both vertically and horizontally.
Content
- Logo Linear gradient feature - Source
- The photos used in this site were obtained from Pexels.com, Rawpixel.com and Pixabay.com.
- Icons were obtained from FontAwesome.com
Acknowledgements
- Photo by Cleyder Duque from Pexels quotes-guy.jpg
- Photo by Cliff Booth from Pexels quotes-lady.jpg
- Photo by Elly Fairytale from Pexels - fitness-class.jpg
- Image by rawpixel.com - personal-training.jpg
- Image by pixabay.com - weights.jpg
- Photo by William Choquette from Pexels - treadmill.jpg
- Photo by F-Jord from Pexels - lockerroom.jpg
- Photo by Polina Tankilevitch from Pexels - nutribar.jpg
- Image by rawpixel.com - contact.jpg
- Image by rawpixel.com - about.jpg
- Photo by Tim Samuel from Pexels - solo1.jpg
- Photo by Mister Mister from Pexels - solo2.jpg
- Photo by Timothy from Pexels - student1.jpg
- Photo by Andrea Piacquadio from Pexels - student2.jpg
- Photo by rawpixel.com - couple1.jpg
- Photo by Bruno Bueno from Pexels - couple2.jpg
- Photo by Yan Krukov from Pexels - oap1.jpg
- Photo by Karolina Grabowska from Pexels - junior1.jpg
- Video by Fountain Valley LA Fitness Youtube.com
I received inspiration for this project from my mentor Mo who did not let me to go
the easy way and as a result I feel lot more confident in the end by solving these problems along the way.
Thanks Mo