The live link can be found here - https://huddy2022.github.io/Mind-Body-project/
Mind and body is a site that is aimed at helping any age or fitness level, learn methods of body/mind self improvement techniques through classes in yoga and pilates. The site will be targeted to men and women of any age and fitness level, who are looking for a way to socialise and keep their mind and body fit. Mind and body will be useful in a way that the user will be able to learn new techniques/exercises/poses to improve the body/mind and to be able to choose classes that fits around their lifestyle.
-
Navigation Bar
- Featured on all four pages, the full responsive navigation bar includes links to the Logo, Home page, classes, and Sign Up page and is identical in each page to allow for easy navigation.
- The thankyou page is reached when the sign up form is complete and offers the full navigation bar for the user to naviagte back through the site.
- The logo is linked to the home page so any user can easily navigate to the main home page through this logo.
- This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
- The navigation is in white with a navy blue background to have an easy contrast for users.
- Home, classes and signup have a class="active" attribute that allows the user to understand which page they are on by being underlined.
- When hovering over any of the navigation pages a background color appeaers to help the user understand which naviagtion to click.
-
Home hero image and header
- The header includes a photograph with text overlay to allow the user to understand what the site is about.
- This section introduces the user to Mind & Body with a coloful picture of meditation.
- The header explains the site offers classes for any age group to learn new techniques with the mind and body.
-
Club Ethos Section
- The club ethos section will allow the user to see the benefits of joining the Mind & Body club, as well as the benefits of doing either yoga or pilates.
- The user will see the value of signing up for the mind & body club and have the benefits of each type of class.
- Font awesome icons help to visualise what either yoga or pilates focus on.
- Both images clearly display type of technqiues for either yoga or pilates.
-
About us section
- The about us section gives a clear indication to what mind and body offers the user.
- This section also provides an understanding to how the club operates on different day and times through its opening hours table.
-
Contact us footer
- The contact us section encourages a user to get in contact with us using online platforms.
- The footer is valuable to the user as it offers a range of social media sites in which to get in contact with the mind and body club.
-
image and header
- The main image and cover text explain the classes page to user
- The cover text is aimed to entice the user to read the relevant sections for yoga and pilates and entice them to pick a class
-
club classes section
- In this section it is divided into two divs for either yoga and pilates to give the user a choice on which they would prefer.
- The h2 and h3 headers are are aimed to draw the attention of the user and with the background of white on h3 make it easier for the user to understand the text.
- Both lists clearly offer a variety of different poses and exercises for either yoga or pilates to help the user understand what each class would entail.
- Font awesome icons are again used to highlight each classes strength.
-
class prices
-
In this section there is a table outlining the costs of each class and the cost for each class on different days of the week
-
The h3 part gives the user the understanding of what the section is about and the table outlines each area easily for the user to understand.
-
The Sign Up Page
- This page will allow the user to get signed up to mind and body and offer the user the choice of either yoga, pilates or both.
- With the drop down menu it will also allow the user to have a choice of not just which class they would like to sign up for but also which days of the week best suit them.
- The background image of meditation is designed to make the user feel relaxed in which class they wish to sign up for.
- Each input is required so that the user knows what to do moving forward with the page.
-
The thank you page
-
Once you have signed up with mind and body, you will be sent to a new page which is the thank you page, which is designed to make the user feel they have made a great choice.
-
Testing
-
I tested my page on different browsers such as google chrome and microsoft edge and both worked fine
-
I confirmed my page is responsive, looks good and functions on different devices such as computer, tablet and phone by using dev tools device toolbar.
-
I confirmed the header, logo, navigation, club ethos, about us, footer, classes section, sign up and thank you page text are readable and easy to understand.
-
I have confirmed that the form works on the sign up page, with all sections required to have been filled out, an email address in the email input and the submit button works and links to the thank you page.
-
I confirmed all three social network links work on all four pages and open on a separate tab.
-
HTML
-
Orginally i had 6 errors on the index.html, 4 errors on the classes.html, 1 error on the signup.html and 6 errors on the thankyou.html.
-
I can confirm now, no errors were returned when passing through the official w3c validator on all four pages.
-
CSS
-
Orginally i had two errors on my style.css.
- I can confirm now, no errors were found when passing through the official w3c css validator.
-
Accessibility
-
I confirmed the colors and fonts are easy to read and accesibile by running it through lighthouse in dev tools for all four pages.
- First bug i had was my hero image wasnt loading, but i manged to change its position, height and width in style.css to fix this
- Second bug was my about us list and table not fitting together on the screen or overlapping each other. I fixed this with by adding a class and ID attritbute to both and styled them in css.
- Third bug was getting the font awesome icons to work. I fixed this when i found out i hadnt added the font awesome script to the bottom of the page.
- Fourth bug was the load time on the hero image being too long. I fixed this as best i can by changing its pixel size and re adding the image.
- Fifth bug was the media quieries not aligning with the code i was setting up. I fixed this by re going over the course work and understanding the postions, floats and margins better and implented this in the style.css media queries section.
- No unfixed bugs left in the code.
- 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 Main Branch
- Once the main 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://huddy2022.github.io/Mind-Body-project/
- The text for the Home page (yoga) was taken from https://www.urmc.rochester.edu/encyclopedia/content.aspx?contenttypeid=1&contentid=2767
- The text for the Home page (pilates) was taken from https://dianesingleton.com/pilates
- The list content for the yoga classes was taken from https://www.myprotein.com/thezone/training/10-basic-yoga-exercises-for-beginners-yoga-made-easy/
- The list content for the pilated classes was taken from https://www.healthline.com/health/fitness/pilates-exercises
- The icons in the footer were taken from Font Awesome
- The code to make the header and navigation was taken from CI love running project
- Part of the code for the footer was taken from the CI love running project
- Part of the code for the sign up form was used from the love running project
- All images on pages home, classes, signup and thankyou were taken from pexels.