Milestone Project 1

Fortitude Gym

Purpose:

Fortitude gym is fictional gym created using HTML and CSS for my first milestone project. It will provide users with information on the gym and it's services for existing and potential members.

User Stories:

As a user, I wish to be able to:

Easily navigate the site to find what I need.
Find out what services are provided.
Find location and contact details.
See what's included in membership.

As the site owner, I wish to:

Aquire new customers and provide existing customers with any relevant information.

Structure:

All pages will consist of a navigation bar, a callout with a sign up button for membership deals and special offers and a footer with contact and membership details and links to social media.

Wireframe mockups:

Home Page

Classes

Lifestyle

Features:

The navbar will bring users to their desired location.
The join now button will trigger a pop out modal prompting users to enter their details.
The social media links will direct users to the associated website in a new window.
The logo wil bring users back to home page

Technologies:

HTML
CSS
Bootstrap 4 was used for layout, to reduce navbar to hamburger menu and for the modal popout. https://getbootstrap.com/
Google fonts was used for the fonts used on site(Piedra an Roboto). https://fonts.google.com/
Font Awesome was used for the social media icon links and also for the hamburger menu icon on mobile. https://fontawesome.com/

Testing:

The nav links bring you to the desired location. No dead links, modals work as expected.
The join now button triggers the modal - appropriate inputs are required.
The social media links bring you to the corresponding page in a new tab.
Ran through V3 html and CSS validators - html is good, checked the CSS error but seems to be flagging bootstrap code incorrectly, code working as desired

Bug fixes:

Not many interesting/noteworthy bugs to speak of, more time experimenting with styling and occasional Bootstrap conflicts
Contrast issues found with dev tools but easy fix using lighter shade of color
Layout issues appeared on tablet, headings appeared beside block text instead of above it, fixed by using 'class-row' class from classes page on lifestyle tab

User story Testing:

Easily navigate the site to find what I need:

Clearly marked navigation links, contact information and membership details on footer of all pages.
Site logo always navigates back to homepage
Clear join button for any users interested in membership

Find out what services are provided:

information on equipment, classes, and extra services provide through their respective nav-links

Find contact info and details:

contact and membership details in footer of every page along with join button for extra details and offers

Deployment:

Live site

This project was developed in gitpod development environment, commited to Github using the built in function in the terminal.

To deploy to Github pages, the following steps were taken:

Log in to GitHub
From repositories list select patricksingleton86/milestone-1-gym
From the menu items, select Settings
Scroll to Github pages section, select master branch in dropdown menu and click save
The link to the deployed website should now be displayed by the Github pages heading

Running project locally

Install Gitpod browser extension for Chrome
Log into Gitpod
Open the repository from Github
Click the green Gitpod button above the repository
Project should now open in your own gitpod workspace

To run project in a different environment

Open project repository
Click the code dropdown beside the gitpod link
Copy the clone url
In your own IDE terminal, change the current work environment to the location you wish the cloned directory to be made
Type 'git clone' and paste the previously copied url