User Centric Frontend Development Milestone Project – Code Institute. I created a Gym website for users who would be interesting in joining a gym and already members. I made the website motivational/ easy access to get the information each user needs.
I created this website for teenagers/ adults who want to go to the gym. As a gym member myself I focused on what I look for when I view gym websites. I look for good deals, a website that is appealing to the eye and a gym that I will be motivated to go to.
A lot of people struggle to start the gym due to the cost of the gym and lack of motivation. So I wanted to make this gym price friendly but also motivating for the users. My goal for the website was to make it look professional, as my audience would be teenagers and Adults. I wanted it to have similar subjects to most gym websites, as they are the things users would be looking for. Created a join now page for users to become a member, created a class page/ full detail version so members/ non-members can see what type of classes we do and when. I added the detail in as people like to try different things but not sure what each class is, or how the class will help them to achieve their goals. I created a page on equipment/ facilities and also the help page.
In the future I will use some bootstrap effects to make the scrolling more smooth. as well as making the nav bars come out from the side instead of drop down.
- HTML
- CSS
- JavaScript
I achieved my goal to make the page motivating and easy to use. I kept to my colour scheme and made sure the relevant subjects that people would like to know for the gym was there. I used images/ icons/ shapes to make the website look more appealing to the eye.
I used “required” attribute to make sure that the customer fills out all the important information before submitting the form. If they miss any “required” fields then the message ‘Please fill out this field’ will appear. Once the customer has submitted the join now form, they will see the message ‘Form has been submitted! Please check your mailbox for your email confirmation’. To get that message I coded in some JavaScript, this was coded in so the customer knows the form has been sent and we will receive it; instead of the form just disappearing and nothing happening. I used JavaScript also on the help and contact page, so the customer knows that their question has been sent and will be looked at.
I used target:” _blank” to open a new page for the full class detail page so customers can print this one page/ save it for future read/ to remind themselves.
I made sure the navigation bar was on every page so the customer can switch to each page easier without loads of different tabs opening.
I also added buttons/ links on pages to take customers to the relevant page for that subject.
This website is hosted by using GitHub pages. This was deployed by the master branch. I can update the page via cloud 9 and it will update the page. I can also update the page automatically by editing it in the master branch.
To run my repository you can use https://github.com/TLShaw98/the_fitness_hub.git.
All the content was written by myself. I did look at other gym websites to see what type of text they used, but I used my own words.
I got my photos from Google images. I changed the background colour on some of the images using the application paint.
I received inspiration for this project from some gym websites: The gym, Simply gym and pure gym. I used a mixture designs/ subjects to help me create my own gym website.
I also used coding website https://www.w3schools.com for ideas on html, css3 and JavaScript. I used google fonts to add to the look of the website and font awesome for my icons to add to the design. In the future I would like to play around more with bootstrap to get some more eye catching animations, videos and hovers/ scrolling/ clicks.