View the Live Website Here

This project comprises the development of a 6 page website for a fictional recently established gym called Roche Fitness, which is located in Deansgrange Business Park in South Dublin. The website has 6 separate pages to outline the services provided by the gym (Home, About, Facilities, Classes, Join & Info), and an Enquiry Form and Class Schedule (PDF) which are accessed in new windows through call to action buttons. The main aim of this website is to provide (i) an overview of the gym to potential customers, prior to them being able to make an Enquiry regarding Membership, and (ii) important information for Current Members in order that they can avail of all of the gym's services. In respect of the construction of the website, it has been designed to be fully responsive, intuitive and accessible on a range of media devices (e.g. mobile, tablet & desktop), in order to make it easy for Current and Prospective Members to navigate the site and source information that they require.

Photo of Site Represented on Various Media:

1. As a First Time Visitor, I want to quickly establish what services the gym offers and what is the process for enquiring about joining as a member.
2. As a First Time Visitor, I want to be able to easily navigate throughout the site pages and find key information about the location of the gym and contact details (email & phone) for enquiries.
3. As a First Time Visitor, I want to view testimonials from active gym members to understand how current members view the services available and whether the gym would suit me.

1. As a Returning Visitor/Potential Member, I want to locate information about new classes or updated facilities since my last visit to the site.
2. As a Returning Visitor/Potential Member, I want to find the best way to get in contact with the gym with any additional questions I may have.
3. As a Returning Visitor/Potential Member, I want to be able to easily access the key information in respect of opening hours and access to the gym car park.

1. As a Frequent User/Current Member, I want to check to see what time the free group workout classes are on each week.
2. As a Frequent User/Current Member, I want to check to see if there are any new or upgraded membership options (with added benefits).
3. As a Frequent User/Current Member, I want to confirm if opening hours have been amended or contact the gym with specific enquiries (e.g. is gym open on a bank holiday).

• In line with the Bootstrap dark theme that I used for the Navbar and Footer, the site generally has dark colours with varying shades of (i) black, (ii) fuschia, (iii) red and (iv) pink being used for the wording (and being set against a white background colour). These colours were used to match the logo that I created for the gym. When selecting the images and background images, I selected dark tones in order that the white and pink text would be easily visible in front of them, and so that they would match the design of the Navbar and Footer. I also added dark background shadow to the text in front of the hero images, so that this text would not be obscured and would be clearly visible.

• The colours that I used for the website are detailed in the colour chart below which I prepared on coolors.co;

• The Roboto font (which I downloaded from Google Fonts) is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the Roboto font fails to be imported correctly.
• As per its description on the Google Fonts website, Roboto is a font with a dual nature. It has a mechanical skeleton and the forms are largely geometric, while the font features friendly and open curves. I saw this font used in various projects and was keen on its design and thought that it fitted well with my overall design concept.

• The imagery within the website is an important feature for attracting new members. On this basis, the large background hero image on the Home Page of the woman weightlifting is designed to be striking and catch the user's attention (see image below). I used several varying images of people working out to establish the fitness aspect of the gym. There are four hero images throughout the site (Home, About, Join, Enquiry) all of which have athletes weight lifting or using exercise machines, while there are also several smaller images as well.

• My general site map and wireframes are saved to PDF and can be found here. I designed them at the start of the project and they served as the basis for this project. In review, the wireframes stayed generally consistent with the finished design, however I amended the NavBar hamburger dropdown menu for iPad, the membership options are now listed in one line at this screen size and there are various other minor changes (e.g. testimonial clients amended from three to two people).

• The website is responsive on all device sizes (and has been tested through Chrome Dev Tools on various devices including iPhone 6, iPhone X, iPad and Desktop).
• The website has several interactive elements, including various Bootstrap buttons which can be clicked to open up an Enquiry Form and a Class Schedule. Both of these open in new windows. The Enquiry Form can be accessed through call to action buttons on the Home Page and Join Page, while the Classes Schedule is accessed through a call to action button at the centre of the Classes page.
• Each page in the website (except for the Enquiry Form & the Classes Schedule) features a responsive bootstrap navigation bar with the gym logo featured to the left and the five page links to the right, and these pages also each contain a 4 column footer with a copyright message, address, opening hours and contact information (email and phone). The Home, About, Join & Enquiry pages feature a large hero image, while there are various smaller images inputted in the Facilities, Classes & Info pages. Each page has been designed to be intuitive and easy to follow, with text prepared in a concise and to the point structure, and flows in a logical manner from the Home Page to the Join Page;
  • Home Page: Hero Image with Heading Text confirming Roche Fitness as a new gym in South Dublin.
  • About Page: Hero Image with History/Overview of Roche Fitness & Testimonial Section.
  • Facilities Page: 4 text boxes with accompanying images to describe facilities.
  • Classes Page: 2 text boxes & 2 images to describe Personal & Group Training options with Class Schedule call to action button in centre of page.
  • Join Page: 3 text boxes describing membership options & 2 call to action buttons.
  • Info Page: Map, 3 text boxes (address, contact info & opening hours) & image.
  • Enquiry Page: Enquiry form with submit button and Hero Image.
  • Classes Schedule: PDF form with group class times.

Navbar:

Footer:

• HTML5
• CSS3

1. Bootstrap 4: Bootstrap was utilised to assist with the responsiveness and styling of the website, specifically in respect of the Navigation and Footer Sections, the Jumbotrons (index.html & about.html) and the Enquiry Form link.

2. Google Fonts: Google Fonts was utilised to import the 'Roboto' font into the style.css file and this font is used on all pages throughout the website.

3. Font Awesome: Font Awesome was utilised in the Facilities, Classes and Info pages, as well as in the Footer, for aesthetic and UX purposes. I matched the icons with the activity that they most closely represented.

4. jQuery & Popper.js: jQuery & Popper were utilised in line with the use of Bootstrap in sections of the website (e.g. responsive navbar).

5. Git: Git was used for version control throughout the project by utilizing the Gitpod terminal to Commit to git and Push to the GitHub repository.

6. GitHub: GitHub was used to store the code for the project after being pushed from Gitpod.

7. FreeLogoDesign: MyFreeLogo was used to create the Roche Fitness logo.

8. Balsamiq: Balsamiq was used to create the wireframes during the initial design phase.

9. Coolors: I prepared the screenshot included in this Readme of the colours I had selected for this project using the Coolors template.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project (7 html pages & css page) in order to ensure that there were no syntax errors in the project (e.g. the code was fully accurate and correctly structured throughout). This testing confirmed that the code was fully in order (no errors found in testing).

1. As a First Time Visitor, I want to quickly establish what services the gym offers and what is the process for enquiring about joining as a member.

• Upon entering the Home Page of the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a Hero Image with Text and a "Join Us Now" Call to Action button.
• The main points are made immediately with the Hero Image (Woman Working Out), the heading "Roche Fitness" and the logo on the Navbar and a brief paragraph explaining what the service offered is.
• The user has three options on the main Home Page, (i) click the Call to Action Button, (ii) go to other links in the Navbar or (iii) scroll down and view the Footer at the bottom which has general information.

2. As a First Time Visitor, I want to be able to easily navigate throughout the site pages and find key information about the location of the gym and contact details (email & phone) for enquiries.

• The site has been designed to be fluid and easy to follow. At the top of every page there is a clean navigation bar, and each link word clearly describes why they would follow that link.
• The logo has a link to the Home Page so no matter where the user is in the site, they can always return to the main page.
• The Call to Action buttons for "Join Us" are listed in the Home Page and Join Page, and the "Contact Our Team" button brings the user to the Join Page.
• The Join Us button when clicked opens an Enquiry Page which has options for submitting a query to the Gym Team in respect of enquiring about membership options.

3. As a First Time Visitor, I want to view testimonials from gym members to understand how current members view the services available and whether the gym would suit me to apply.

• Once the new visitor has read the About Us main text, they will notice the Testimonial Section at the bottom of the page.
• This section has comments from two gym users about their experiences to date and the benefit that they have received from being a member.

1. As a Returning Visitor, I want to locate information about new classes or updated facilities since my last visit to the site.

• The latest classes are listed in a PDF page which opens in a new tab when the Class Schedule button on the Classes Page is pushed.

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

• The navigation bar clearly highlights the Join Page which has all the relevant information.
• The Join Page has a map of the gym's location, information about the car park and the details for Opening Hours and Contact information.
• Contact Information is also listed in the Footer section of every page (address, phone and email), along with general information, so users can view this information from every page.

1. As a Frequent User, I want to check to see what time the free group workout classes are on each week.

• The user would already be comfortable with the website layout and can easily go to the Classes link where the Class Schedule link is listed at the centre of the page.

2. As a Frequent User, I want to check to see if there are any new or upgraded membership options (with added benefits).

• The user would already be comfortable with the website layout and can easily go the Join Page which has all of the relevant information and links.

3. As a Frequent User, I want to confirm if opening hours have been amended or contact the gym with specific enquiries (e.g. is gym open on a bank holiday)

• At the bottom of every page there is a Footer which has all relevant current information for the gym.

• The website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers, and was found to operate satisfactorily on all of these.
• I also tested the website in Google Lighthouse, which returned the following scores; (i) Performance: 73, (ii) Accessibility: 90, (iii) Best Practices: 79 & (iv) SEO: 92.
• The website was viewed on a variety of devices such as Desktop, iPad, iPhone 6 & iPhone X. All formats were in order with no sections out of line or overlapping owing to changes to margins/padding etc. I had implemented during the build process when I noted that there were issues with viewing the site in different screen sizes.
• I completed a large amount of detailed testing to ensure that all links were working correctly and that external links opened, and was happy that there were no broken links. This involved going into every page of the site and clicking every link/button that is available to a user (as part of their journey through the site) to ensure that everything was fully functional.
• I tested adding (i) a JavaScript onclick function to the Enquiry Form and/or (ii) a modal Bootstrap button to display a "Submitted" popup text when submit button was clicked, but it became too complicated (as the button would change to "Submitted" even when a field was empty), so I left the Enquiry Form as it was (e.g. all fields must be filled in and then submit button is clicked, following which text is cleared (e.g. enquiry form has been submitted to gym staff)).
• As part of the testing process, my family members were asked to review the site and documentation to point out any bugs and/or user experience issues, and I also listed the project on the Peer Review channel on Slack to take on board any suggestions offered from that.

• N/A - Note: Previously the dropdown links for the navbar (on mobile devices) were a little difficult to see when a page had a white background (owing to the purple colour). I resolved this issue by adding a black background to the collapsed hamburger menu following a suggestion from the Peer Review Channel.

This project was developed using Gitpod. I planned the site outline and structure over several weeks and then committed the code to git and pushed to Github.

To deploy this page to GitHub Pages, the following steps need to be followed;

1. Log in to the GitHub website and locate the GitHub Repository containing the project.
2. At the top of the Repository, locate the "Settings" Button in the menu area.
3. Scroll down the Settings page until you come to the "GitHub Pages" Section.
4. Under the section named "Source", click the dropdown menu called "None" and select "Master Branch".
5. The page will automatically refresh and the website is now deployed and is able to be viewed as a web page.
6. Scroll back down the page to locate the now published site link in the "GitHub Pages" section.

By forking the GitHub Repository, this enables you to make a copy of the original Repository on the GitHub account to view and/or make changes without affecting the original repository;

1. Log in to GitHub and locate the GitHub Repository which contains the project.
2. At the top of the Repository (as opposed to the top of page) just above the "Settings" Button on the menu, locate and then select the "Fork" Button.
3. You should now have a copy of the original Repository in your GitHub account which you can inspect.

1. Log in to your GitHub account and locate the GitHub Repository which contains the project.
2. Under the Repository name, click "Clone or download".
3. If you wish to clone the Repository using HTTPS, you should copy the link under "Clone with HTTPS".
4. Proceed to 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 from the link that is detailed in Step 3 above.

• $ git clone https://github.com/USERNAME/REPOSITORY

7. Press Enter and your local clone will then be created and available to be inspected and reviewed.

• Bootstrap w-100: I studied this post in order to split the page into four boxes on the Classes Page and retain the Call to Action "Classes Schedule" button in the middle of the page.
• Insert a Google Map to Your Website: I watched this Youtube Tutorial to understand how to input an interactive Google Map into the Info Page.
• Build A Complete HTML & CSS Website with Bootstrap 4: I watched this Youtube tutorial before I commenced my project to gain a more detailed understanding of how Bootstrap is applied when constructing a website.
• Bootstrap4: I used the Bootstrap Library throughout the project to make the site more responsive through using the Bootstrap Grid System and employing Bootstrap elements for the Navbar, Footer, Jumbotron, Sections and Query Form.
• z-index 9999: My dropdown menu was not showing in mobile so I followed advice on StackOverflow to put the Z-Index to 9999 which resolved the issue.
• Using Background Images for Divs - screen reader: As I used a few images to fill Divs (background-size: cover) in the website, I followed the instructions for this post so that these images would still be fully accessible to someone with a screen reader.
• Using Title in Enquiry Form - screen reader: I was having difficulty adding screen reader information for the Hero Image on the Query Page, so I used the reply from this post which advises to use "title" to assist screen-readers who cannot see the hero image.
• Background Colour for Collapsed Menu: I noted that list items in collapsible hamburger menu were difficult to see. This post explained how to add a background colour to the collapsed Navbar so the purple links are clearly visible.

• All content within this project was written by the developer.

• The images used in the project were all sourced from Unsplash, which is a photo site with a large catalogue of high-quality free to use images which are not the subject of copyright. The attributions for these images are listed below;

  • Home Page Hero Img - John Arano
  • About Page Hero Img - Scott Webb
  • About Page Man Testimonial Img - Jurica Koletic
  • About Page Woman Testimonial Img - Štefan Štefančík
  • Facilities Page Weights Img - Greg Rosenke
  • Facilities Page Man Img - Nathan Dumlao
  • Facilities Page Woman Img - Logan Weaver
  • Facilities Page Workout Img - Ulissa Tagle
  • Classes Page Group Workout Img - Meghan Holmes
  • Classes Page Personal Training Img - Jonathan Borba
  • Join Page Hero Img - Daniel Opadaca
  • Gym Info Page Img - Trust Tru Katsande
  • Enquiry Page Hero Img - Victor Freitas

• The logo for Roche Fitness was created using a template which I made on a design website called FreeLogoDesign, and which I amended in respect of colour scheme and design. This is a website which allows people to make brand logos for free.

• The map on the Info Page was input from Google Maps.

• I want to thank my Mentor, Maranatha Ilesanmi, for continuous helpful feedback during the various processes of this project.
• I also want to thank Tutor Support and Student Care at Code Institute for their support and advice during my first term.