Have you ever considered to start an exercise routine? But you never knew where to start? You checked the local fitness clubb but found it too intimadating? Well, in this case you are on the right place! The mobile Personal Training Service takes the training to your home! No long term contracts, flexible training times and fun! Just fill the Contact Form and we'll get back to you in 24 hours. Let's do this!
The section above would be my "sales pitch" to target potential clients who want to do some training/ exercising at home or at a chosen location in/around Basel in Switzerland.
- As a first time visitor the goal and the purpose of the website is easily understandable.
- As a first time visitor I can easily navigate through the pages and locate content.
- As a first time visitor I can find feedbacks/ testimonials from past/current clients and perhaps I can relate to some of these individulas.
- After some contemplation as a returning visitor to the website I can find out specifically on which locations can I reuest the service.
- As a returning visitor I can submit my "interest" towards the service provider, I can get in to contact.
- As a returning visitor I'll have a better understanding of the type of training/services.
- As a returning visitor I can try some training routines based on provided/ linked videos.
- As a returning visitor I can look up the company/ owner based on the social media links which gives a better understanding of the organisation/owner.
- As a frequently returning user I want to see if there are updated training routines added to the Youtube channel.
- As a frequently returning user I want to see if the location of services perhaps expanded.
- HTML5
- CSS3
- Google Fonts:
- Google fonts were used across all the pages which was linked to the CSS file.
- Font Awesome
- Font Awesome was used to add icons to the appropriate sections.
- Favicon
- Favicon emoji was used from favicon.io
- Git
- Git was used to commit and push the codes.
- GitHub
- Github was used to store the project after being pushed
- Istock
- Istock by Getty Images was used to download pictures for background and illustrations.
- Pixlr
- Pixlr platform was used to edit, re-size pictures.
- VS Code Editor
- To write and run the code VS Code editor was used which is Code Institute's cloud based IDE platform.
- Favicon
Upon opening the page in the browser next to the name of the website the "favicon" appears. The emoji of a weight lifting person supposed to indicate that the website is related to the topic of exercise, training, fitness, health.
- Navigation, Header
The navigation bar and header has a clear, minimalistic style. The logo "Basel Mobile Personal Training Services" clearly indicates What it is?, Where it is?
The navigation bar includes three sections: 1. Home,
2. Training,
3. Contact form.
With an underline at the actual page it indicates clearly for the visitor on which page she/he is.
The navigation bar, header is consitent in apperence and location on all three pages.
- Hero Image- Zoom effect
The main/opening picture has a zoom effect to create motion on a static image. The image has warm colours and is trtying to express the freedom of movement in a simplest possible way.
- Social Media Links
The social media links can be found on all three pages at the bottom- footer. With the well known icons for Youtube, LinkdIn, Facebook the visitor can collect more information about the business.
- External Links
External link on page one is taking the visitor to another service provider's website who the owner worked in the past. First external link on page two takes the visitor the the owners Youtube channel. Here the visitor can get a better idea about the type of training that the service covers. Second external link on page two takes the visitor to a public fitness studio's website where the owner also delivers the training services. It's an alternative location.
- Contact Form
On page three is a simple contact for which requests First Name, Last Name and email address from anyone who is interested in personal training or wants to have more information.
- Checkboxes
The check boxes on page three help the visitor clarifying their training goal and helps the owner to anticipate the needs of a potential client.
For future implementation a calendar/schedule system to be added for existing clients to schedule appointments/ training sessions.
| Feature | Test | Expected Outcome |
|---|---|---|
| Logo | Click on the logo | User is brought to the Home page |
| Navbar | Home Page | Click on the Home link on each page |
| Navbar | Training-Second Page | Click on the Training link on each page |
| Contact Form | Submit an empty form | Error signaling required fields |
| Social Media Icons | Click on Social media icons | The relevant social media site opens in a new tab |
| External Links | Click on Linked text | External website opens in a new tab |
| Checkboxes | Tick the checkbox(es) | Validates the selection |
| Submit Button | Click on submit button | Form will be sent if it's filled correctly |
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the website to ensure there were no syntax errors in the project.
- W3C Markup Validator- page 1,2,3.
-
W3C CSS Validator
-
Accesibility
I confirmed that the colors of the fonts have a good contrast with their background makes it easy to read. On transparent sections the same applies with the contrast.
Tested all the pages of the website on Chrome, Safari, Firefox. Appearance was good on all three browsers. Intended responsiveness also good on all three.
Not that I am aware of at this stage.
The site was deployed to GitHub pages. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab From the source section drop-down menu, select the Master Branch Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. The live link can be found here - https://raypt808.github.io/Basel-Mobile-Personal-Training/index.html
- Social Media icons were taken from Font Awesome.
- Testimonials from my clients were used and published with their consent.
- For HTML and CSS validation open source validator services- W3C,W3C CSS- were used.
- For responsiveness test and adjusting smaller design flaws Google Developer Tools was used.
- The HTML main structure is based on CI's own boilerplate code.
- Code snipets from the CI's Love Running Project were used on page 1. and page 3.
- Checkbox function was used from CI's course material "HTML essentials - Checkbox and Radio Inputs" chapter.
- Youtube video was used from my own Youtube channel's video library.
- Images for illustration and design were taken from open source site Istock.
Grateful for the help and the input from my mentor Can Sücüllü. He always gave a different perspective on the issues and with his experience and eyes for details I was guided in the right direction to make this project happen.