SenFitness
SenFitness is a website about a fitness center based in London. This is for people ready to better their lives with fitness, exercise and nutrition. The creation of this webiste means people looking for a new gym to attend can easily discover SenFitness and everything it has to offer from the wide range of equipment to the amazing programmes. The people of SenFitness beleive in simplicity which has been translated through the site. The main purpose is simplicity and an easy to use site that is responsive and easy to navigate through. This is also shown as SenFitness site is a single page application.
UX
This website is for people who are love fitness and think of it as a lifestyle rather than a hobby.This site does not have one particular consumer group to target. This site is for anyone who wants to get into fitness and create a healthier lifestyle. These individuals want to achieve a healthy lifestyle and SenFitness will help them achieve that.The SenFitness website is designed to motivate people and provide crucial information.
Why is this site special?
This site is special because it allows new potential customers to view pictures of the gym and equipment in the gallery, learn a bit more about the types of fitness routines there are with the links provided in the programmes page and finally discover the amazing range of programmes SenFitness provides to help people throughout their fitness journey unlike other gyms. This site also has a footer with all SenFitness' social media platforms so if potential consumers still have some questions they can go over to social media accounts to take a look at further information on there.
Why would a user want to use this site?
-Discover what SenFitness is about with the about section. -Take a look through the programmes to decide what exactly they want their fitness routine to consist of based on their own personal goals. -Look at the gallery for pictures of equipment and the gym. -Sign up and get further information about joining the gym.
How is my project the best way to achieve this?
By making this site, it is ensured that all of the essential information for consumers is supplied. Also some extra bonuses such as the images in the gallery to give potential consumers an extra insite to SenFitness.
User Stories:
-As a potential consumer I want to have a site that looks good and is easy to navigate through to find all the necessary information that I require. -As a potential consumer I want to look at pictures of the gym and its equipment so i can know what im paying for. So a gallery would be perfect. -As a new visitor to the site i want the site to be a pleasent experience with an easy navigation process. -As a potential consumer i want the sign up process to be quick, easy and reliable.
Wireframes
https://www.figma.com/file/5H0jhnqY0dKtltkXdNusZY/SenFitness?node-id=0%3A1
Features
This site is a single page application which includes a navbar which reduces to a hamburger menu when screensize is reduced. It also includes a home page, an about section, a programmes section, a gallery, a sign up page and a footer.
navbar
the navbar allows the user to travel to any part of the page with one click.
Home page
The home page allows the user to get a small look into SenFitness and their mission with a eyecatching hero image and a motivating quote below the main title.
About section
The about section allows the consumer to read all the important information about SenFitness and the necessary information to join the gym such as the price and the location.
Programmes section
The programmes section has all the programmes that SenFitness supplies for its consumers and also has links to all the correct external sites for consumers who want to know more about specific exercise routines.
Gallery
The gallery is a group of images of the gym itself and the equipment that can be found in the gym.
Sign up page
The sign up page allows the user to sign up and put down their information so they can recieve the necessary information about joining the gym.
Footer
The footer has all the links to all the social media platforms that SenFitness is on, so if they want extra information that isnt on the site they can visit any one of the social media platforms.
Technology used:
The project has been completed with HTML, CSS.
The project uses content from Bootstrap MDB Bootstrap 4.8.5
The project also used Font Awesome - release 5.8.2 to supply icons used in footer - Font Awesome
The project uses Google Fonts to style the website fonts - Google Fonts
The project uses Pixabay for a license free backgound for the background images- Pixabay
This project also uses pexels for free images for background images. - Pexels
Testing
This project was tested with
User Story Testing
1- A potential consumer opens up the site and can just scroll through the single page application taking a breif look through everything.
2- A potantial consumer could go straight to the programmes oage to see if SenFitness meets their personal standards and if SenFitness have a programme ro help them meet their specific goal.
3- A potantial consumer could go to the gallery to take a look at what SenFitness gym has to offer in terms of space and equipmeny
4-A potantial consumer could go straight to the footer to discover SenFitness' social media platforms.
5- A potantial consumer could go use the navigation bar to go to their desired section.
Manual Testing
I made sure the site was responsive and functional on all screen sizes so I made sure to use developer tools to look through the site on each screensize.
There is a bug in the code causing the site to be wider than the screen width. If I had more time i could figure this out. this is the reason why the site on smaller screen sizes isnt covering the whole width of the screen and the navbar isnt sticking to the page till the end of the scroll.
Deployment
This project was produced on GitHubs Gitpod which is a local IDE.
https://shahmeen-shaikh.github.io/SenFitness/
credits
media is from pexels and pixababy.
other resources https://pixabay.com/photos/boxer-power-energy-sport-fighter-1984344/ https://www.w3schools.com/colors/colors_hexadecimal.asp https://getbootstrap.com/docs/4.0/getting-started/introduction/ https://www.w3schools.com/colors/colors_hexadecimal.asp https://getbootstrap.com/docs/4.0/components/navbar/ https://www.w3schools.com/colors/colors_shades.asp https://www.randomlists.com/uk-addresses https://stackoverflow.com/questions/49970640/how-to-fill-background-image https://www.w3schools.com/css/css_image_transparency.asp Course HTML/CSS Project - Love Running Challenge: Signup Form Signup Form: Challenge 2 https://mdbootstrap.com/docs/jquery/navigation/hamburger-menu/ https://jigsaw.w3.org/css-validator/#validate_by_input https://validator.w3.org/nu/#textarea https://physiqonomics.com/fat-loss/ https://en.wikipedia.org/wiki/Mixed_martial_arts https://en.wikipedia.org/wiki/Strength_training https://www.healthline.com/health/fitness-exercise/calisthenics https://www.active.com/fitness/articles/5-simple-tips-for-fitness-success https://www.youtube.com/watch?v=073XKB9xv-M https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://mdbootstrap.com/docs/jquery/navigation/navbar/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent