Milestone Project 1 - User Centric Frontend Development

[View the live project here.](https://nicobrown.github.io/MilestoneProject1/)

---

Introduction

This is the website for a fictional gym business based in Bristol, the purpose of the webiste is to give information to members on the gym location, pricing and facilities. The site was developed using HTML and CSS and is responsive on a range of devices, making it easy to navigate for customers.

Design

Colours

The site colour palette was chosen to be bold with colour primarily being used for icons and highlights throughout the site.

The colour choices can be seen here on Coloors.

Layout

The sites layout was developed using bootstraps grid system.

Features

Naviagtion

The sites navigation was responsive and changed depending on the screen resolution. At larger screen sizes the navbar looked like the below:

For tablets and medium screens the navbar was simplified, and for mobile screens it was removed and a dropdown menu was added in a fixed position on screen:

I wanted the inital screen to have as much information as possible and act as a miniture website, an arrow button was included at the bottom of the screen to take you to the about section below the hero video.

About section

The first section was a short explanation on the gym and the benefits of excercise

Pricing section

this section featured pricing cards showing the available membership options and features:

Gallery section

The showed images of the gym equipment and helped the site visiter to understand the facilities.

Contact Section

The contact section showed the contact information for the business, the location and the opening times.

Footer Section

the footer section has links to the companies social media feeds.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find information on the gym.
    3. As a First Time Visitor, I want to locate their social media links to see their followings on social media to determine if I am interested in joining.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
    2. As a Returning Visitor, I want to find community links.

  • Frequent User Goals

    1. As a Frequent User, I want to check to see if there are any newly added photos or information.
    2. As a Frequent User, I want to check to see if there are any new features added.

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap 5.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
3. jQuery:
   • jQuery came with Bootstrap to make the dropdown menu work.
4. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
5. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate the project to ensure there were no syntax errors in the project.

• W3C Markup Validator
• W3C CSS Validator

####Lighthouse results show the site was optimised over time. the initial score was:

and finally after following the reccomendations in the document:

The reccomendations were that the sites size be reduced, the images and video were not optimised for web. I used an online conversion process to reduce the file sizes by over 90%. I preloaded one of the images used in place of the video

Errors

The console was showing errors relating to a depreciated method which was noted as not being removed in the future, I used javascript to clear the console on page load.

The local repository folders were named with capitals, when this was changed the remote repositories did not update, this caused issues with resources not being found.

Accessibility testing

The site was run through the webaim contract checker this resulted in three colours being flagged with not enough contrast as shown in the screenshot below. the first being shown in error, and the second two being highlight colours only used for underlines, and icons in the format shown.

Further Testing

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of manual testing was done to ensure that all pages were linking correctly.

Known Bugs

• The gaps between section are inconsistent

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. 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 in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• The full-screen hero image code came from this StackOverflow post

• Bootstrap5: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System and by using their components.

• This ReadMe file's heading's and general layout were copied and adapted from the Code institutes Sample Read Me project

• Sheilds are generated by shields.io

• Gallery - initial layout taken from here

• Google map code taken from here and here

• Background image gradient code below taken from here

• Map colour filter code taken from here

Media

• All Images were sourced from pixabay

Acknowledgements

• My Mentor for helpful feedback on the optimisation process.