We Ride Cycling Club is a fictional cycling community for expats in Europe. We Ride Cycling Club matches expats with "Local Leaders" in the city they are moving to. The cyclists can join group rides lead by the Local Leaders, meet fellow expats and get access to a database of cycling routes to upload to their Garmin to explore solo.

The goal of the We Ride Cycling Club website is to help the club build a community network of cyclists across Europe, help expats discover their new home with the guidance of local cyclists, educate users about the cycling club, and provide an easy sign up registration process for cyclists. We Ride Cycling Club wants to make it easy and less daunting for cyclists to discover their new home.

The completed product can be viewed here: https://orlagh-sweeney.github.io/we-ride-cycling-club/index.html

1. User Experience
   • Project Goals
   • User Stories
   • Colour Scheme
   • Typography
   • Wireframes
2. Features
   • General
   • Home Page
   • About Page
   • Join Us Page
   • Contact Page
   • Future Features
3. Technologies Used
   • Languages
   • Frameworks, Libraries and Programmes
4. Testing
   • Testing User Stories
   • Code Validation
   • Accessibility
   • Tools Testing
   • Device Testing
   • Browser Testing
   • Feature Testing
   • Bugs
5. Finished Product
6. Deployment
7. Credits
   • Content
   • Media
   • Code
8. Acknowledgements

• Build a clean, modern website for a cycling club which conveys a strong sense of community.
• Clearly outline how the cycling club works.
• Provide a registration form for cyclists to join the club.
• Provide a contact form and contact details for users to be able to ask for more information.

• As a user, I want to be able to easily navigate the website to discover more about the cycling club.
• As a user, I want to understand how the cylcing club works.
• As a user, I want to be able to join the cycling club.
• As a user, I want to be able to find contact information for the cycling club.
• As a user, I want to be able to find the cycling club on social media.

• The colour scheme used was teal green, charcoal grey and white. A green colour was chosen to be representative of being outdoors, with the teal shade giving a modern, clean feel to the website.
  

• Barlow Condensed was used for the logo and headings with sans-serif as the fallback font.
• Montserrat was used for body/paragraph text with sans-serif as the fallback font.

• Balsamiq was used to develop wireframes in the planning stage of the website:
  • index.html
    
  • about.html
    
  • join-us.html
    
  • contact.html
    

• The website incorporates a responsive design so it can be used across multiple device sizes.
• The website uses a consistent colour scheme across the site.
• Each page has a responsive navigation bar containing the club logo and links to each website page to allow for easy navigation for the user.
  
• Each page has a repsonsive footer with social media links. Social media links open in a new browser window.
  

• Hero Image
  • The homepage has a photograph of three cyclists overlayed with the club tagline, Together We Ride.
  • The section aims to portray a strong sense of community and inclusion.
    
• Introduction
  • This page also has a brief introduction explaining that it is a cylcing club for expats where they can join weekly rides.
  • This section also has a selection of images as a design feature to convey the inclusive, community values.
    
• How it Works
  • This section explains how the club operates and uses icons to support the explanation and enhance user experience.
    
• CTA button
  • This section contains a CTA button that will bring the user to the Join Us page of the website.
    

• The about page is split into 3 sections: Our Story, Our People and Missions and Values.
  
  
  
• The page aims to give the user a more indepth look into the cycling club to encourage then to join.
• The page has a video with a motivational quote underneath.
  
• The page contains a CTA button to bring the user to the Join Us page.

• The Join Us page has a photo of cyclists overlayed with a form.
• The form has brief instructions telling the user to fill in their information to be matched with a Local Leader.
• Hover effects have been added to text fields and buttons to enhance user experience.
  

• The Contact page has a contact form for users to submit any queries or questions they may have.
• The Contact page also has the club contact details should the user prefer to get in touch directly.
  

• An "Insights" page which would publish weekly blogs from We Ride Cycling Club members, articles on latest cycling trends, and general cycling advice articles.
• On the Join Us form a future feature includes a pre-populated dropdown menu of cities based on the Country that the user selected.

• HTML
• CSS

• Balsamiq: this was used to create wireframes in the planning stage of the project.
• Fontpair: this was used to find fonts that compliment each other.
• Google Fonts: this was used to import fonts into the style.css file.
• Coolers: this was used to create a colour pallete for the website.
• Font Awesome: this was used to add icons to pages to enhance user experience.
• Pexals: this was used to find images and videos for the project.
• Gitpod: this was used to write, commit and to push the code to Github.
• Github: this was used to host and deploy the finished project.
• Chrome DevTools: this was used throughout the project to check responsiveness and debug.
• W3C Markup Validator: this was used throughout the project to validate HTML code.
• W3C CSS Validator: this was used throughout the project to validate CSS code.
• Responsive Design Checker: this was used to check responsiveness on various device sizes.
• Am I Respsonsive?: this was used to create an image to show how the site looks on different device sizes for this README file.

• As a user, I want to be able to easily navigate the website to discover more about the cycling club.
  • The website menu bar allows the user to navigate through the pages of the website.
  • The website pages have clearly identified sections for the user to be able to scan and digest the information.
• As a user, I want to understand how the cylcing club works.
  • The website clearly explains how the club operates in the how it works section.
• As a user, I want to be able to join the cycling club.
  • The website provides a registration form for users to join the club.
• As a user, I want to be able to find contact information for the cycling club.
  • The website has a dedicated contact page where a user can submit a request using the contact form or directly contact the cycling club using the information provided.
• As a user, I want to be able to find the cycling club on social media.
  • The website has links to the clubs social media pages on the footer of each page.

The following validators were used to test the code:

• W3C Markup Validator: No errors were reported when passing the final HTML code through the validator.
• W3C CSS Validator: No errors were reported when passing the final CSS code through the validator.
  The validators were used throughout the development stage of the website as part of ongoing testing of html and css. Examples of errors and warnings can be found below which were all resolved:
  • Example 1: CSS Validator gave warnings for font family names and styling of submit buttons.
    
  • Example 2: HTML Validator gave syntax warnings for index.html.
    
  • Example 3: HTML Validator gave syntax warnings and errors for div and form elements on contact.html.
    

The following tool was used to check accessibility of the website:

• Lighthouse: was used to check the accessibility score of each site page and to see if there were issues.
  • This tool highlighted an issue with radio button labels on the Join Us page. The wrong "for" value had been assigned to the 80-100km radio button which impacted the accessbility score. After fixing this issue the accessibility score increased from 90 to 100. Initial Lighthouse report below shows the score of 90:
  
  
• Lighthouse Reports:
  • index.html
    
  • about.html
    
  • join-us.html
    
  • contact.html
    

The following tools were used to test the website:

• Chrome DevTools: This was used throughout the project to test responsiveness, to de-bug any issues, and to test changes to HTML and CSS before implementing them in Gitpod.
• Responsive Design Checker: This was used to check the responsiveness of each page of the site on different device sizes including mobile, tablet, laptop and desktop.
  • This revealed that the join-us form was too short for tablet devices of 800x1280, there was spacing underneath the footer. The height of the form-section was increased from 900x to 1200px for max-width 950px to resolve this.
  • This is also revealed that the contact.html page was too short for large desktop screens with a height of 1000px-1200px. The height of the contact section was adjusted to resolve this display issue.

The website was manually tested on the following devices with no issues:

• Samsung Galaxy S10+
• MacBook Pro 13"
• Dell 27" Desktop Monitor (P2722H)

The website was tested on the following browsers with no issues except for Safari as indicated below:

• Google Chrome
• Safari: this browser altered the styling of the Country dropdown menu. To fix this I updated the styling of the select element in CSS to appearance:none and border-radius:inherit.
  
• Mozilla Firefox
• Microsoft Edge

The following website features were manually tested:

• Clicking on the logo will bring the user to the home page.
• The navigation menu links work on each page and bring the user to the correct page.
• The join us CTA button on the home page and about page brings the user the to Join Us page.
• When social media icons are clicked the relevant social media page opens in a new window.
• The submit button on the Join Us form and Contact form does not work until all fields have been filled in by the user. Testing this function revealed that the 'Mobile Number' and 'textarea' fields were not marked as 'required' and this issue was resolved.
• The reset button clears the form.
• The hover effect added to buttons and text fields work as expected.

• The video on about.html did not work initially on the deployed site:
  • After deploying my project the video on about.html did not work. I raised a query in Slack where it was highlighted that I used an absolute filepath rather than a relative filepath. I fixed the filepath and the issue was resolved.

• The live link to the completed product can be found here: https://orlagh-sweeney.github.io/we-ride-cycling-club/index.html

The website was developed in Gitpod. It was then commited and pushed to GitHub. The finished site was then deployed to GitHub pages using the following steps:

1. Open GitHub and click on the We Ride Cycling Club repository.
2. Once inside the repository, locate and click on the Settings tab.
3. On the left handside, under the 'Code and automation' section, click on Pages.
4. In the Branch section, locate the dropdown menu and change it from None to Main.
5. Click save. The page will refresh with a link to the website.

• All content was written by the developer.

• Photos and videos were taken from Pexals:
  • Home page hero image: "Three Men Riding on Bicycles" by Pavel Danilyuk
  • Home page introduction image 1: "Woman Wearing White Helmet" by Kezia Rhesa Arman
  • Home page introduction image 2: "People Riding Bicycle on the Road" by Samuel Vogl
  • Home page introduction image 3: "Adult cyclist smiling on field by Centre" for Ageing Better
  • Our Story image: "Person in Black Long Sleeve Riding Bicycle on the Road" by Gregory Costa
  • Our People image: "High Angle Shot of Person Riding a Bike" by Niklas Jeromin
  • Mission and Values image: "Man in Black Shirt Riding Bicycle on Gray Asphalt Road" by Pack2Ride
  • Mission and Values video: "Drone Shot of Cyclists on the Road" by LegioSeven
  • Join Us background image: "Aerial Shot of People Riding Bicycle on Road Between Trees" by Pavel Danilyuk
• Icons were taken from Font Awesome.

• Stackoverflow and W3Schools were used throughout the development to educate myself and to seek help and clarification features. In particular I used the following resources in my project:
  • I used W3Schools to create the dropdown menu feature on the Join Us. I used the solution on the HTML Form Elements page.
  • I used Stackoverflow to help center the form on the Join Us page, I used the solution shared by Rhythm Shandlya.
  • I used W3Schools to find out how to add rounded corner to form buttons. I used the solution from the CSS Rounded Corners.

• Thank you to my mentor Marcel for his feedback and suggestions at each stage of the project.
• Thank you to Code Institute for providing me with the tools and skills to complete this project.
• Thank you to Emanuel Silva for helping me on Slack with the video bug.