View the live project here.

Home Page Image - View

This is the main marketing website for Yay for Yoga. It is designed to provide web browsers with information about Yay for Yoga, the benefits of yoga and the classes they have to offer. This site is targeted towards adults who have an interest in yoga.

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to learn more about Yay for Yoga.
    2. As a First Time Visitor, I want to know where to find the studio.
    3. As a First Time Visitor, I want to find the studio on social media.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find information about the classes and what they have to offer.
    2. As a Returning Visitor, I want to know the opening hours.
    3. As a Returning Visitor, I want to find the best way to contact the studio.

  • Frequent User Goals

    1. As a Frequent User, I want to check to see if there are any newly added classes.
    2. As a Frequent User, I want to check to see if there is news on upcoming events.
    3. As a Frequent User, I want to check there is any changes to the opening hours.

• Design

  • Colour Scheme

    • The two main colours used are light blue (azure) and dark blue (#477282).

  • Typography

    • The Jost and Roboto font are the two main fonts used throughout the website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. The Jost and Roboto font are great fonts that work well together to produce a eligible webpage.

  • Imagery

    • The images on the home page are designed to draw the users in and catch their attention while they are reading about what the studio has to offer. The images used on the classes page correspond with the description of the classes. This will provide the users with an insight on what to expect if they sign up to the classes.

  Wireframes

  • Home Page Wireframe - View
  • Classes Page Wireframe - View
  • Contact Us Page Wireframe - View

  Features

• Compatible for phones and laptops.

• Accessible to all users.

• Interactive elements.

• HTML5
• CSS3

1. Hover.css:

   • Hover.css was used on the "Send Message" button on the Contact page to add a colour transition while being hovered over.

2. Google Fonts:

   • Google fonts were used to import the Jost and Roboto font into the style.css file which is used on all pages throughout the website.

3. Font Awesome:

   • Font Awesome was used on the footer, the classes page and the contact page on the website to add icons that are pleasing to the eye.

4. Git

   • Git was used for version control by using Gitpod to commit to Git and Push to GitHub.

5. GitHub:

   • After being pushed from Git, GitHub is used to store the projects code.

6. Unsplash:

   • Unsplash was used to provide the imagery on the webage.

7. Manduka:

   • Manduke was used to provide the imagery on the webage.

8. Shape:

   • Shape was used to provide the imagery on the webage.

9. The Thirty:

   • The Thirty was used to provide the imagery on the webage.

10. Find The Devine:

    • Find the devine was used to provide the imagery on the webage.

11. Balsamiq:

    • Balsamiq was used to create the wireframes during the design process (see wireframes above).

    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
• W3C CSS Validator

• First Time Visitor Goals

  1. As a First Time Visitor, I want to learn more about Yay for Yoga.

     1. Users are greeted with a well laid out and eligible navigation bar to go to the page of their choice.
     2. Underneath there is an image of a woman doing yoga and a quote by Judith Hanson Lasater.
     3. The user has the opportunity to scroll down and learn more about the studio.

  2. As a First Time Visitor, I want to know where to find the studio.

     1. The website has a clear and precise navigation bar which has a contact button.
     2. On the contact page you are first shown the contact details including the postal address.
     3. Underneath the contact form on the contact page there is a google map. The google map can be outsourced to the google maps webpage from there you can look up directions.

  3. As a First Time Visitor, I want to find the studio on social media.

     1. The social media links can be found on the footer on every page of the website.
     2. The website provides a link to all the major social media platforms; Facebook, Twitter, Youtube and Instagram.
     3. User is advised on the contact page that they have the option to contact the studio through their social media platflorms.

     • Returning Visitor Goals

  4. As a Returning Visitor, I want to find information about the classes they have to offer.

     1. On the navigation bar on the top of every page there is a button for Classes. On the classes page under the benefits of yoga the user can see a grid of the classes that the studio has to offer.
     2. There is three classes available. The website also provides a detailed description of the classes with a corresponding image.
     3. If the user hovers over the image they will see a title of what the class is called.

  5. As a Returning Visitor, I want to know the opening hours.

     1. The opening hours can be found on the home page under the about us.
     2. The opening hours are laid out nicely in a box, clearly stating the days of the week and the opening hours beside the days.

  6. As a Returning Visitor, I want to find the best way to contact the studio.

     1. The first thing the user will find on the contact page is the phone number, the email and the postal address.
     2. There is a google map on the contact page which will provide users with the exact location and the opportunity to pull up the directions online.
     3. Alternatively, the user can scroll to the bottom of the any of the pages to find the link to the social media pages.

     • Frequent User Goals

  7. As a Frequent User, I want to check to see if there are any newly added classes.

     1. The user would already be familiar with the website layout and can easily check the classes on the appropriate page.

  8. As a Frequent User, I want to check to see if there is news on upcoming events.

     1. The user would already be comfortable with the website layout and can check if there is any events added to the webpage.

  9. As a Frequent User, I want to check there is any changes to the opening hours.

     1. The user would be aware that the opening hours would be on the home page, so they would be able to find any adjustments made easily.

     Further Testing

• The Website was tested on Google Chrome, Internet Explorer and Safari browsers.

• The website was viewed on a variety of devices such as Laptop, iPhone & Galaxy S5.

• All links were tested multiple times on different devices.

• Image two on the home page beside the opening hours is out of place on an iPad device, this is something I would like to resolve in the near future.

• The site was deployed to GitHub pages. The steps to deploy are as follows:

  • Once logged into the GitHub repository, navigate to the Settings tab.
  • Scroll down the page until you reach Github Pages.
  • Github Pages now has its own dedicated tab. Click on check it out here.
  • Drop down at the source and select main.
  • Click save and your site has now been published.

  Credits

  Header and Footer

  • The header and footer design was assisted with tutorial notes and the love running project.

  Home Page

  • The images on the home page were taken from various websites listed above, using W3Schools to help to style the images.
  • The quote was taken from goodreads.com.
  • The about us was created by the developer.
  • The opening hours was created by the developer with the assitance from W3Schools for the design.

  Classes page

  • The images on the home page were taken from various websites listed above, using W3Schools to help to style the images. The images and text were designed using flexbox which was learnt from https://www.youtube.com/watch?v=fYq5PXgSsbE&t=34s.
  • The benefits of yoga was taken from hopkinsmedicine.org, using W3Schools to help to style the border.
  • The video was taken from Youtube and used the following youtube video to assist in embedding the video: https://www.youtube.com/watch?v=9YffrCViTVk&t=78s

  Contact page

  • The contact details were created by the developer, using W3Schools to help to style the border.
  • Instructions on how to make a contact form was taken from https://www.youtube.com/watch?v=UAWhbMDBGW4.
  • The map was taken from google maps and instructions on how to insert was taken from https://www.youtube.com/watch?v=KIC0OK9nKXY.

• My Mentor for continuous helpful feedback and assistance.

• Tutor support at Code Institute and my friends from my course for their support and guidance.