Link to view the website - https://cfaulkner985.github.io/barneys-boxercise/index.html

I am creating a website about my local Boxercise class which is called Barney’s Boxercise. In this website I will have a Home Page, Gallery Page and Sign Up page. Every page on the website will have the same header and footer for easy navigation. The main principle of the website is to get more people to attend the fitness class by completing the form on the sign up page. This website will most likely be visited by people who have heard of the class through social media or word of mouth and are interested in signing up. Also a lot of people would want to see the class first before committing to anything so I feel the gallery page will attract a lot of people to the class.

• As a new visitor to the website I want to be able to navigate easily so I can find what I’m looking for a quickly as possible
• As a new visitor I would like to see the gallery and what the class looks like before joining.
• As a new visitor I want to learn more information on the class and what exercises are done throughout the class.
• As an interested client I want to know the different times that the class will be on so I can see if it suits my schedule
• As an interested client I want to know the location of the class so I can find out where it is before leaving for my first class.
• As a interested client I want to know how much the class is so I can have the correct money with me.
• As an interested client I want an easy to fill out form so I can register my interest for the class.
• As an interested observer and/or potential client, I want to follow the class and/or instructor on social media so I can keep up to date.
• As a returning visitor to the website I want to check for any updates including added images to the gallery page

On the header I will have a navigation link so the user can switch between each page with the click of the link. I will also have a logo of the class to make the site and class look more professional. This header will appear on all 3 pages of the website and is where the user will see logo and navigate to the other pages. The user’s goal is to be able to switch between pages whenever they want and this is where they can do it by left clicking the page title. The user will find the information they want to see by entering the different pages.

Wireframe mockuop for Header

On the footer I will have the location, timetable of the classes, price and links to any social media accounts associated with the class. This footer will appear on all 3 pages of the website and is where see important information of the class and social media links. The user’s goal is to be able to see the most common information that the user will want to find out about. I will have it appearing on every page of the website so the user can see it in every page they visit so it stops them from having to go back and forward between pages to access this information. The user will find the information they want to see by entering the different pages.

Wireframe mockuop for Footer

The Home page will give a bit of background on what the boxercise class is all about. I will have a picture at the top of the page spread across the entire width of the page so it stands out. I will have the picture change when user hovers over it. Below that I will have a paragraph with a bit of background of the class. I will also have a list on what all activities will be featured in the class with an icon beside each one. This page is where the user will find out the information on the class. The user’s goal when they first enter the website is to find out what the class is about, location, times and price. The user will find all the information they need as soon as they enter the website.

Wireframe mockuop for Home Page

The Gallery page is where the user can see images of previous classes so they can see what an actual class looks likes. I will have a gallery where the user will click on the image and it will make it bigger so they can have a better view. Then they can exit the image to bring them back to the main page. I will have a between 15 to 50 images on this page. This page is where the user will want to find out what the class and people look like who is taking part in the class. The user’s goal when they click on the link to this page is to see pictures and make it easy to navigate between each one. The user will find all the images for the class on this page and will be updated regularly as the class progresses.

Wireframe mockuop for Gallery

The Sign Up page is where new members will be able to send their information to let us know that they are interested in joining the class. The page will consist of a form with heading and text boxes which will be:

• Name
• Address
• Telephone Number
• E-mail Address
• Date of Birth
• How did you hear about us? (Check boxes)
• Preferred class time (Drop down box with 3 choices)
• Other information e.g. medial conditions I will also have a Submit button so they can submit there information and will display a message letting them know that it has been sent successfully. This page is where the user will sign up to the class if they are interested in taking part in the class. The user’s goal is to type in there details and make sure they are signed up to be able to attend the classes in which they want. The user will have basic information to fill out and if they fill out something wrong or leave blank they will be notified of this. Once the user fills out all fields and clicks the ‘Submit’ button then they will be notified that it has been entered successfully and will be able to attend the next class.

Wireframe mockuop for Sign Up

This website will be aimed at both men and women from the ages of around 15-50. It will suit people around the area as I know most towns how some sort of gym or fitness class. I will keep the website simple and colourful as I am trying to attract a younger audience. I know that not everyone is good on computers that may want to attend the class so I will make it as user friendly and easy to use as possible.

• Header Logo appears on every page and allows everyone who visits the website to see the brand of the class. Clicking on the logo will return the user to the Home Page
• Navigation Bar appears on every page and allows everyone who visits the website to be able to navigate between each page of the site. Clicking on the particular work link will bring them to the requested page.
• Footer information appears on every page and allows everyone who visits the website to be able to see the location, times and price of the class.
• Footer social links appears on every page and allows everyone who visits the website to be able to access the social media accounts linked to the class
• Banner appears on the Home Page and when the user hovers over the image it zooms in. (index.html)
• Gallery page allows everyone who visits the website to view thumbnail images of the class. Each thumbnail can be clicked to open a carousel viewer of the images. (gallery.html
• Carousel viewer allows the user to view the images enlarged and be able to click left and right between the different images (gallery.html)
• Sign Up page allows the user to fill out there details to register their interest. The user can fill out each box of the form and then click ‘Submit’. They will be informed if they have not filled out a box correctly or they have submitting the form successfully. (sign-up.html)

• I will set up the form with JavaScript so that when the user clicks on the ‘Submit’ it will be sent straight to the administrator who will contact the user to let them know they can or cannot attend the class on their preferred date and time.
• I will keep updating the gallery so new images of the class will be uploaded on a regular basis
• I will add CAPTCHA with JavaScript to the form as this will protect the website from spam.
• I will add a video page to the website with videos of different exercises from the class. I will use a video sharing site e.g. YouTube.
• I will add a nutrition page so that the users can keep track of what they are eating. It will also give them tips on what they should be drinking and eating.

• I have used HTML and CSS programming languages.
• I used Gitpod (https://gitpod.io/) to build the website.
• I have used BootstrapCDN (https://www.bootstrapcdn.com/)
• I have used Bootstrap v4 (https://getbootstrap.com/)
• The project also uses BootstrapCDN to provide icons from FontAwesome (https://www.bootstrapcdn.com/fontawesome/) for the social media icons.
• I have also used Material Icons for additional icons for the site.
• I also used Goggle Fonts (https://fonts.google.com/) to create the font for the site.
• The project uses jQuery which is JavaScript which is needed for the carousel gallery modal.
• The project also uses Popper.js (https://popper.js.org/) which is also used for the carousel gallery modal.
• The project also uses AutoPrefixer (https://autoprefixer.github.io/) and makes sure the CSS is valid for all web browsers

1. On my GitPod project scroll down and click on the command prompt at the bottom
2. Check status by typing in ‘git status’
3. Type ‘git add’ to add the files for staging
4. Type ‘git commit -m "Add all files" to commit the files
5. Type ‘git push’ to push the files to GitHub

Testing was done on a seperate document which is: Testing.md

This project was developed using the GitPod (https://gitpod.io/) and was committed to git and pushed to GitHub using the built in function within GitPod. To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken: In GitHub the repository is cfaulkner985/barneys-boxercise (https://github.com/cfaulkner985/barneys-boxercise). Below is the way to deploy the files to GitHub:

1. Log into GitHub.
2. From the list of repositories on the screen, select ‘cfaulkner985/barneys-boxercise’
3. From the menu items near the top of the page, select ‘Settings’.
4. Scroll down to the ‘GitHub Pages’ section.
5. Under ‘Source’ click the drop-down menu labelled ‘None’ and select ‘Master Branch’
6. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
7. Scroll back down to the ‘GitHub Pages’ section to retrieve the link to the deployed website.

To clone this project from GitHub:

1. Download GitHub Desktop (https://desktop.github.com/)
2. Follow this link – (https://github.com/cfaulkner985/barneys-boxercise) and it will bring you to the main repository page for this project.
3. Under the repository name, click "Clone or download".
4. In the Clone with HTTPs section select ‘Open in Desktop’
5. Then select ‘Open GitHub Desktop’
6. Click Choose... and, using Windows Explorer, navigate to a local path where you want to clone the repository.
7. Click Clone. Further reading and troubleshooting on cloning a repository from GitHub can be found at: https://help.github.com/en/desktop/contributing-to-projects/cloning-a-repository-from-github-to-github-desktop

• Image in my logo - https://www.clipart.email/download/813990.html and the rest was done on ‘Paint’
• Homer page banner - https://images.app.goo.gl/N4bsd5wCJCEQeb167
• Gallery images were taken from WhatsApp from the instructor of the class
• I used CSS ticks to help me create the carousel gallery modal on the gallery page - https://css-tricks.com/creating-a-modal-image-gallery-with-bootstrap-components/
• I would also like to thank Anna Gilhespy artist project for guidance on how to lay out my ReadMe and Testing files.
• My mentor Rohit Sharma was a great help guided me through this project.