Website presents an informative platform for users to find content relating to the fictional womens only gym called "Women Only Workouts".

As part of the Code Institutes milestone project 1, the main aim of this project is to build a responsive website with HTML, CSS and Bootstrap. I have decided to use bootstrap as my framework for consistency and ease of use.

• UX
  • Website owner business goals
  • User goals
    • New user goals
    • Returning user goals
    • Website owner business goals
  • User stories
  • Structure of the website
  • Wireframes
  • Surface
• Features
• Technology
• Testing
  • Functionality testing
  • Compatibility testing
  • Code Validation
  • User stories testing
  • Issues found during site development
  • Performance testing
• Deployment
• Credits
• Screenshots

The gym owner is interested in attracting new members and retaining current members. It requires a platform that is:-

• User friendly
• Attractive
• Intuitive
• Encourages new members to join
• Engages existing members
• Outlines specifics about the business e.g. location, opening hours, contact details, timetable.

• User is able to clearly navigate the website to their desired location.
• User is able to locate the opening hours and contact details easily.
• User is able to see what classes are available / A timetable / schedule of classes.
• User has a glimpse of the business and what it has on offer before taking the next step and joining.
• User is able to contact the business with their enquiry via a contact form.

• Returning user is able to see what is "going on" e.g. regularly updated events that are taking place, social events being advertised.
• Returning user is able to navigate to the timetable easily.
• Returning user is able to contact the business via a contact form.

• I wish to present my business in a professional and informative manner that users will find easy to use.
• I wish the online presence to match the business brand.
• I would like to build relationships with new customers while engaging with and retianing current members. Ensuring that the website provides quality information to both.

• I want to know more about the business from a website that is easy to use e.g. classes on offer. Timetable of classes etc
• I want to find the contact information quickly should I need to book a class or induction and see business hours.
• I want a map so I can see where the gym is located.
• I would like to keep informed of any offers coming up, and possibly follow the business on social media for a while before committing as a member.

• I would like to check the class timetable to plan my workout schedule ahead of time.
• I may need to contact the business to re-arrange a class or make a booking.
• I would like to check what's going on; for the social aspects that the gym offers e.g. Summer events.
• I may need to show my friend where the gym is using their map.

The website has been designed to be responsive and user friendly on all devices. The content, colours and images have been chosen in line with the business brand The header and footer will be identical across all pages for ease of navigation and structure. The user will have interaction in the form of links and buttons with active hover effects.

To create the wireframes I used Balsamiq Wireframes.

Viewable pdf here

Main colours used in this project, in conjunction with the businesses brand colours provided by the logo:

• background color: #401d35
• font color: #310b25 or #fff
• testimonial colour:#310b25
• link color: #f72585
• hoover color: #f72585

• As a main font I used Lato, and as a backup font sans-serif.

• Images mages from Pexels.com and there are credited in credits section.

Back to Table of contents

The website consists of 3 pages:-

• A Main/ Home page; accessible from the navigation bar or by clicking the Womens Only Workout logo on the right hand side of the Navbar.
• A classes page; which outlines the classes available and includes a timetable. Accessible from the navbar.
• A contact page; accessible from the navbar.

The website has below features:

• Navigation bar is located at the top of every page. Fully responsive; changes into a burger icon on medium and smaller devices.

• Navigation scheme:

  • On the left hand side of the navbar there is a logo with a href to direct user back to the home page once clicked.
  • On the right hand side of the navbar there are three links/ burger menu for smaller devices.
  • It contains:
    • Home
    • Classes
    • Contact

• Each webpage has different content depending on the page; see below. However the main body of the webpage is filled with content and this is consistent across all pages.

• The footer is consistent on all pages.
• The left hand side has social links. Each link will open in a seperate tab.
• The right hand side has a "sign up for our newsletter" info block and button.

• Jumbotron

  • The jumbotron includes a full width image, overlaid with a custom/ brand logo and information about the gym; including a new members offer.

• Reasons To Join Us Section

  • This section includes brand relevant images outlining 4 reasons that should inspire new members to join this gym.

• What's Going On Section

  • This section offers information relating to upcoming events in the form of bootstap cards. It gives an image and a brief description of the event.

• Classes Section

• This section offers information on classes available at the gym. Using a bootstrap card template that provides the user with a brand relevant image, a brief description of the class and a "View Classes" button that when clicked takes them to the timetable lower down the page. The button has active hover effects.

• Classes Timetable

• This section offers a colour branded class timetable that shows what classes are available on each day of the week.

• Contact Us Section

• This section displays all the relevant contact information for the business e.g. phone number, email, business address and opening hours.

• It also includes a google map location of the business and a conact form allowing users to get in touch directly through the website.

• Create a members sign in page; where members can purchase tickets for events and book classes.
• Add a sign up page; where the business can recruit new member through the website and take payments.
• Create a blog to encourage enagagement with the current members, ensuring they stay active with the business.
• Add a virtual tour video to the main page; to show future members the layout.

Back to Table of contents

• As a structure language.

• As a style language.

• [email protected] as a CSS framework

• As an icon library for a social links and on contact us page.

• As a font resource.

• As a software hosting platform to keep project in a remote location.

• As a version-control system tracking.

• As a development hosting platform.

• As a wireframing tool.

• As an image editor.

Back to Table of contents

Mozilla, Safari and Chrome developer tools were used throughout the project to check responsivity and to debug errors.

Compatibility was tested on:

• Iphone 11
• HP Pavillion Laptop
• Ipad pro Using safari, Mozilla and Chrome.

I wish to present my business in a professional and informative manner that users will find easy to use.

• I wish the online presence to match the business brand.
• I would like to build relationships with new customers while engaging with current members. Ensuring that the website provides quality information to both.
• I would like to provide intuitive learning for the user while using the website.

• I wish to present my business in a professional and informative manner that users will find easy to use

  Intuitive, user friendly design; Navbar and footer to be identical across each page allowing for intuitive learning. Present at all times.

• I wish the online presence to match the business brand.

  Use custome brand logo and corresponding colours to create a brand relevant website.

• I would like to build relationships with new customers while engaging with and retianing current members. Ensuring that the website provides quality information to both.

  Social media links to be added to the footer of each page. Brand specific images to be added to the content of each page with relevant information pertaining to the business.

• wish to find information about personal trainer and check her/his qualifications.

  User can see essential description on the home page. More information can be find in about page.

• I want to know more about the business from a website that is easy to use e.g. classes on offer. Timetable of classes etc

  Give the use information about the business and what it has on offer in the form of images and text relevant to each page. Navbar and footer present on every page and identical in information providing unification and ease of use.

• I want to find the contact information quickly should I need to book a class or induction and see business hours.

  contact page with all relevant information, available directly from the navbar. Social media channels are also available in the footer of each page.

• I want a map so I can see where the gym is located.

  Google map element in the contact us page.

• I would like to keep informed of any offers coming up, and possibly follow the business on social media for a while before committing as a member.

  Offers for new members displayed on the main/ index page to entice new members. Social links to the footer.

I would like to check the class timetable to plan my workout schedule ahead of time.

• I may need to contact the business to re-arrange a class or make a booking.
• I would like to check what's going on; for the social aspects that the gym offers e.g. Summer events.
• I may need to show my friend where the gym is using their map.

• I would like to check the class timetable to plan my workout schedule ahead of time.

  A timetable of classes available within the class page on the navbar.

• I may need to contact the business to re-arrange a class or make a booking.

  contact us page with relevant contact information and a contact us form so user can contact business directly from the website,

• I would like to check what's going on; for the social aspects that the gym offers e.g. Summer events.

  a what's going on element within the main page to keep current members engaged with the business and show new/ perspective members that the business regularly holds events.

• I may need to show my friend where the gym is using their map.

  map located on the contact us page showing the location of the business as well as business address allowing for the use of satnav should the friend wish to join.

• Navbar Alignment.

I used bootstrap to create the navbar and then customised the css to apply the desired look. However I could not get the text to sit to the right hand side of the page. Using mozzilla developer tools I applied margin-right elements and padding but this caused problems with the responsiveness in smaller screens. I tried justify-content elements and they didn't work either.

I read bootstraps documentation on Spacing and flex but didn't find the answer.

I watched a you-tube tutorial by RTECH-INFO which outline the me-auto and ms-auto functions and changed the code within github to follow these new rules.

Code before applying the new rule. Code after applying the new rule.

After gaining more experience with bootstrap I also altered the code snippet that bootstrap provided; removing the search bar. I applied custom css to the navbar for styling, using the Mozzilla developer to ensure that all code was responsive. Below is an image of the final Navbar.

• Image and text display.

I orignially used the same style template as the Code Institute Love Running Project with the col and row system to try and replicate the writing in line with the image for the classes pages and the home page of my project.

It lead to a whole host of responsive design issues when trying to float the cols left and right.

I watched a tutorial to better understand the relationship between rows and cols Acedemind

I rewatched Code Institute videos regarding div and span rules I also read the containers information available at Bootstrap, to completley get to grips with the grid system.

After gaining more experience with bootstrap I became aware of the Grid cards and their responsivity built in. I used custom styling using the mozzilla developer to ensure that the code was responsive on all devices.

• Footer Newsletter Sign Up, Button Missing.

I orignally tried to mimic/ adapt the code from the the Code Institute- Rosie Project for the footer as I liked the elements grouping, but the design I was working on didn't really call for the quantity of cols used.

I didn't want to leave the remaining space in the footer blank... usually there would be room here for the contact details, but I have included a contact page in the design. I opted to place a "sign up to our newsletter" email input into this element to encourage new and existing members to sign up for further information from the business.

I added the code from the navbar search bar that I had originally installed from bootstrap, and was going to further edit the code to apply to this, but the button didn't appear.

I then installed a button element that I had used for the Classes page testing_issue_3

This caused issues with responiveness and didn't look right.

I researched other options available for input and button options using [bootstrap add ons] (https://getbootstrap.com/docs/5.0/forms/input-group/#button-addons) and that worked. I changed the col settings in the footer from col-sm-8, col-sm-4 to col-sm-6, col-sm-6 to allow for the button to sit well in the footer.

testing_issue_3

I customised the css and here is the finished button

[testing_issue_3_resolved] (assets/md_images/footerbutton4.png)

To test performance I run the Lighthouse developer tool. I plan to edit the photos to reduce loading time and increase the performance of the webiste.

Website Performance Best Practices

Throughout the project I have used 2 validators to check and validate code

• W3C CSS Validator to validate CSS
• Nu Html Checker to test HTML

Back to Table of contents

This project will be deployed through Github.

Gitpod was the development tool for writing the code: Git add and Git Commit commited all changes to git. The push command in Gitpod was used to save changes in GitHub.

To deploy the project I had to:

• Log in to GitHub and click on repository to deploy (Repository)
• Use the Settingsbutton on the command line above the green gitpod button; it has a cog icon.
• Scroll down the page to the 'GitHub Pages' section, almsot near the bottom of the page.
• Inside a highlighted bar: Pages settings now has its own dedicated tab! Check it out here!, click the href link.
• At the top of the page there will be a highlighted href link Your site is published at https://ceryslloyd.github.io/first-milestone-project/
• click and it opens in a new page.

To run localy:

• Log in to GitHub and click on repository to download (Repository)
• select Code and click Download the ZIP file.
• after download you can extract the file and use it in your local environment

Alternatively you can Clone or Fork this repository (Repository) into your github account.

Back to Table of contents

• To complete this project I used Code Institute student template: gitpod full template

• Ideas and knowledge library:

  • w3schools.com

  • css-tricks.com

  • Understanding row and cols

  • getbootstrap.com/docs Used for:-

    • CDN via jsDelivr
    • Navbar
    • Jumbotron / this also came from the Code Institute tutorial for Whiskey Drop
    • Burger Menu

• Timetable: Timetable
• Testimonials idea: Love Running
• Bootstrap: Navbar
• Bootstrap: Burger Bar
• Bootstrap: Card Grid
• Bootstrap: Footer Button
• Code Institute: Jumbotron

• General content: My own creation

• Bootsnip

• Google maps

• boxfit

• [bootcamp]

• community

• confidence

• core

• empowerment

• ladies-header

• legsbumsandtums

• party

• strength

• warrior

• [yoga]

• Lauren, Kirsty, Lisha and rainbow run photos are all personal images from my own collection.

Back to Table of contents