Talita Cagnoni - Personal Trainer Website

View the live project here.

This website was created for the purpose of completing the first Milestone Project for the Code Institute's Full Stack Developer course.But also is the main marketing website for Talita to share her services. It is designed to be responsibe and accessible on a range of devices, making it easy to navigate for potential clients and ```.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. Easily understand the main purpose of the site and learn more about the Professional and services offered.
    2. Eeasily navigate throughout the site to find content.
    3. Look for testimonials to understand what their users think of them and see if they are trusted.
    4. Locate their social media links to see their followings on social media to determine how trusted and known they are.

  • Returning Visitor Goals

    1. Find information about the services offered.
    2. Find the best way to get in contact with the professional with any questions I may have.
    3. Find social media links.

  • Frequent User Goals

    1. Check to see if there are any newly added services.
    2. Check to see if there are any new testimonials posts.
    3. Sign up to the Newsletter so that I am emailed any major updates and/or changes to the website.

• Structure

  • Every page contain navigation menu at the top, which will direct them to the selected page. Logo on the right with the Brand image in it that show reinforce professionalism and care. On mobile the Nav Menu collapse to make a better use of space.

  • In the home page, hero image and sales picth centralized (big question) with the answer under with hightlight in the profesional, word, to be have maximum impact.

  • Call to action button to direct the potential client to the Training Programs Options and also social icon links for easy access to social media for more content.

  • In the Training Programs Page the visitor can find 4 diferent container of blog post, that make easy to locate and read through. And also motivational quotes in each one.

  • A promotional video to illustrate a bit of the training.

  • Call to action button to direct the potential client to the Contact Form page.

  • In About page, a profile picture of the trainer and some background information.

  • In Testimonials there is some feedback from previus clients and their thoughts, a very important part of the website to boost the visitor trust and improve chances of contrat.

  • More data, in form of icons, of previus contracts and clients

  • Skills in form of progress bar, to enforce her degree of professionalim and experience.

  • Contact form, simple and yet beutiful. Requests client name and email, subject , and below that a box to leave a message. On the bottom a Submit button and under, a Motivational quote to illustrate the fitness enviroment.

  • Footer with all main social media, as another way of contact.

• Design

  • Colour Scheme

    • The two main colours used are Purple Space Cadet , and Rosé Ultra Red .

  • Typography

    • The Logo font on mobile is Pacifico, it is clean and reminds of a signature.
    • The Roboto font is the main font used throughout the whole website with Trebuchet MS as the fallback font in case for any reason the font isn't being imported into the site correctly. Roboto font is a clean font used frequently in programming, so it is both attractive and appropriate.

  • Imagery

    • Brand is important for Talita personal maketing, it's purpose to be eye catching and also look like a signature.
    • The large, background hero image is was choosen to be striking and catch the user's attention. It also has a modern, energetic aesthetic.

• Wireframes

  • Home Page Wireframe

  • Training Programs Page Wireframe

  • About Page Wireframe

  • Contact Us Page Wireframe

Features

• Responsive on all device sizes

• Interactive elements

• Header Logo - Exists on every page and allows all users to easily recognise the name as signature brand. Clicking the logo returns users to the home page as they would expect.

• Social Icons - Easy to access from home page, and footer. Allowing all users to access the social platforms that the artist uses.

• Promotional Video - Show potential clients a bit of the work out and view some of her work. Creates connection and emotional response.

• Call to Action Buttons - Guide potential clients through the process of viewing the Training Programs, know about the Personal Trainer and finally making first contact.

• Testimonials - Review and feedback of the services offered, are the most important feature for potencial clients in order to trust the professional.

Features to Implement in future

• GDPR compliant pop-up screen - Allows all new visitors to the website to approve or deny the processing of their personal data. Ensures the business complies with the EU data protection law. - Javascript Needed

• Add CAPTCHA to contact form - Allows business to protect the contact form from spam. - Javascript Needed contact form Send button change from

• Send button change from Send to Processing and then when complete changes to Sent. - Javascript Needed

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css:
   • Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
3. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
6. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
8. Picmonkey:
   • Picmonkey was used to create the logo, resizing images and editing photos for the website.
9. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
10. Toolur:
    • is used to reduce the file sizes of images before being deployed to reduce storage and bandwith.
11. Favicon:
    • Favicon.io was used to make the site favicon
12. Coolors:
    • is used to create the colour pallete for the entire website.
13. Tecnisih:
    • tecnisih.com Multi Device Website Mockup Generator was used to create the Mock up image in this README
14. Google Chrome Developer Tools:
    • Google chromes built in developer tools are used to inspect page elements and help debug issues with the site layout and test different CSS styles.
15. Responsinator:
    • The Responsinator is designed to test responsive websites on different device resolutions.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation. - Testing was performed to ensure information was displayed on the Home Page.

     1. Detailed initial test-user as follows. Upon entering the site, users are expected to be welcomed with a friendly navigation bar to select which page they want to go and to find a teaser button to incentive them to interact with the training programs available. The actual result is the homepage automatically greeting with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is also a Hero Image with Text and a "Get Started" Call to action button which brings them to the Training Programs page. - Testing was performed to ensure the "call to action" button it's redirecting to each respective page. The outcome of the testing demonstrated that each "call to action" button is corresponding with each expected relevant content.
     2. The main points are made immediately with the hero image as the objective with the input image is to hold the attention of the user in relation to the purpose of the website. The actual result concerning the first impressions of the visitors with the background picture achieved the expected which was to indicate the website to be related to healthy exercises and training programs.
     3. The user has two options, click the call-to-action buttons, or scroll down, both of which will lead to the same place, to learn more about the Training Programs. The testing outcome was that all the call-to-action buttons were working fine leading to the Training Programs.

  2. As a First Time Visitor will be able to easily navigate throughout the site to find content. - Testing was performed on all Navigation links ensuring easy navigation. The actual result after the testing each link was that the effortless navigability planned for this webpage is in place.

     1. The site has been designed to be fluid. At the top of each page, there is a clean navigation bar. All paged were tested verifying the presence of the navigation bar which means in the final result the fluidity outlined was proven.
     2. On the Contact Us Page, after a form response is submitted, the page refreshes and the user is brought to the top of the page where the navigation bar is. The form was also created to be fulfilled in full which means the form cannot be submitted unless the user completes each blank space requested. The implementation of the form has also been tested and the result is as expected.

  3. As a First Time Visitor, I want to view the website on any mobile device in a clear ans easy way. - Testing was performed on all devices to ensure the Website was responsive.

     1. The website was designed to be fluid and never to entrap the user. At the top of each page, there is a clean navigation bar, each link clearly describes the page on which they will end. After full navigation, the necessary tests to check if there is a tidy navigation bar accurately describing the page on which the users will finish were performed. The result of those tests confirmed the fluidity of the site, ensuring that the user is free to browse without interruptions.

  4. 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. I also want to locate their social media links to see their following on social media to determine how trusted and known they are. - The outcome of this testing process was the validation of the information given.

     1. Once the new visitor has read the "About".
     2. The user can also scroll to the bottom of any page on the site to locate social media links in the footer.
     3. At the bottom of the Contact page, the user is told underneath the form, that alternatively they can contact the organisation on social media which highlights the links to them.

• Returning Visitor Goals

  1. The purpose of this website is not only to inform customers but also to keep them updated. A Returning Visitor would be back for example to find new training programs.

     1. These are clearly shown in the navigation bar button or "Get Started" call to action.
     2. When the button is clicked, they are redirected to the to blog posts of Training Programs - The result was satisfactory, and achieved the goal of being a tool for the target audience.

  2. As a Returning Visitor, I want to find the best way to get in contact with the professional with any questions I may have.

     1. The navigation bar clearly highlights the "Contact" Page. - The testing phase went through each page ensuring the "Contact" Page is easily available and the result was adequate.
     2. Here they can fill out the form on the page or are told that alternatively they can message the professional on social media. - Each stage for this process on the "Contact" page was tested feasible for users.
     3. The footer contains links to the organisations Facebook, Twitter and Instagram page.
     4. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any newly training programs or videos.

     1. The user would already be comfortable with the website layout and can easily click the buttons and navigate through it.

  2. As a Frequent User, I want to check to see if there are any new blog posts.

     1. The user would already be comfortable with the website layout and can easily click the buttons and navigate through it.

Further Testing

Tests table

• The Website was tested on Google Chrome, Firefox, Opera, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX. And tested on Responsinator as well.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

• On some mobile devices the Hero Image pushes the size of screen out more than any of the other content on the page.
  • A white gap can be seen to the right of the page. It seems that is bootstrap bad behaviour, because it is only happenig some times on a few mobile devices.
• On some mobile devices, the navbar when scrolled down shrinks a bit, but when scrolled up it cames back to it's regular size.
  • I tried to change the logo tor text but it didn't worked out.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. 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.
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.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• The full-screen hero image code came from this StackOverflow post

• Bootstrap4: Blog Post Template code copied and modified.

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• MDN Web Docs : For Pattern Validation code. Code was modified to better fit my needs and to match an Irish phone number layout to ensure correct validation. Tutorial Found Here

Content

• All content was written by the developer or from it's client source @ Talita Canoni.

• Hero Image: Rawan Yasser

• Content based on [Why Is Clinical Pilates different to other Pilates Classes? ](https://www.gophysiotherapy.co.uk/blog/why-is-rehabilitation-pilates-different-to-other-pilates-classes/

Media

• All Images were created by the developer.

Acknowledgements

• My Mentor for continuous helpful feedback.

Antonio Rodriguez has mentored this project since the beginning. It was only possible to conclude it because of his support and advice. His main contributions were giving an initial North so that it was possible to start effectively, providing ideas, demonstrating the technical criteria and pointing out proper feedback on the errors that should be corrected. In other words, his assistance was essential for the success of this project, so, I am taking the opportunity to express my gratitude for each mentoring session that enabled the competition this work.

• Tutor support at Code Institute for their support.

They provided regularly points new contributors to documentation and submits pull requests to improve the guidance when the area were looking unclear. Answering my requests on time enabling me to improve my knowledge during the whole process of contributing smoother.