Winchester Mountain Bike Club

Winchester mountain bike club is a page designed to be a responsive and intuitive site that allows users to view different styles of riding and local trails to the south of England.

https://bluiss.github.io/winchester-bike-club/index.html

• User Experience

  • User Stories

• Design

  • Colour Scheme
  • Typography
  • Imagery
  • Wireframes

• Features

  • General Features on Each Page
  • Future Implementations
  • Accessibility

• Technologies Used

  • Languages Used
  • Frameworks, Libraries & Programs Used

• Deployment & Local Development

  • Deployment
  • Local Development
    • How to Fork
    • How to Clone

• Testing

• Credits

  • Code Used
  • Content
  • Media
  • Acknowledgments

👩🏻‍💻 Initial Discussion Winchester Mountain Bike Club (WMTB) is an online site dedicated to the various biking disciplines and trails surrounding the south of England, more specifically Winchester. Users are able to view different definitions of riding and a wide range of images associated with the styles, and sign up to a newsletter that goes over the latest news an updates within the MTB world. Key information for the site

• 3 types of mountain biking
• Local trails and bike parks
• How to sign up for a newsletter
• Gallery showing off local trails and what to expect
• About us section stating the reason behind the site

• To be able to view all pages on a variety of devices
• To make it easy for users to sign up to the newsletter
• Make it clear for users to view new photos and explanations of local trails

• For new users to understand the different types of trails and styles
• To be able to navigate the website easily across all devices
• To be able to find all social links easily

• Find any new information on trails or the gallery

Google Fonts was used for the following fonts:

• 'DM Sans', sans-serif / For all text

Written content was generated using Chat GPT: - About us - Discplines - Trails descriptions - Landing page - Error 404

All images were sourced from:

• https://www.pexels.com/
• https://unsplash.com/
• https://www.freeconvert.com/

Wireframes were created for mobile, tablet and desktop.

The website is comprised of three pages which are accessible from the navigation menu (home page, trails & newsletter). • All Pages on the website have:

• A responsive navigation bar at the top of all pages, allows the user to navigate through the site. To the left of the navigation bar is an image of WMTB club’s logo. To the right of the navigation bar are the links to the site’s pages (home page, trails & newsletter). To allow a good user experience of the site, when viewing with mobile devices the navigation links change to a burger toggler. This was implemented to give the site a clean look and to promote a good user experience, as users are used to seeing the burger icon when on mobile devices to navigate a site.

Reference - https://codepen.io/alvarotrigo/pen/MWEJEWG

A footer which contains social media icon links to Instagram, Twitter, YouTube & Facebook. Icons were used to keep the footer clean and because they are universally recognisable.

• Home Page.

• Hero image that states the club’s moto and main header
• Reference - https://codetheweb.blog/fullscreen-image-hero/ - hero image
• About Us Section. – Gives and overview of the clubs’ goals and how it can help both new and old riders. Also explains the purpose of the club
• 3 images with explanations, going over the different disciplines (Enduro, Downhill, Dirt Jump) with an overlay header

• Trails Page

• 3 hero images with an overlay header, that explains local trails.
• Gallery of various images pulled from royalty free sites. (https://css-tricks.com/zooming-images-in-a-grid-layout/)

• Newsletter

• Simple form for users to sign up and receive a newsletter

• Landing page

• Simple landing page that thanks users for signing up and directs them back to home page

• Error 404

• Page to explain when there as been a 404 error, directs users back to home page

• Future Implementations.

• Create a login so users can upload their own images

I have been mindful during coding to ensure that the website is as accessible friendly as possible. I have achieved this by:

• Using semantic HTML.
• Using descriptive alt attributes on images on the site.
• Ensuring that there is a sufficient colour contrast throughout the site.
• Ensuring menus are accessible by marking the current page as current for screen readers.

HTML and CSS were used to create this website.

Balsamiq - Used to create wireframes.

Git - For version control.

Github - To save and store the files for the website.

Google Fonts - To import the fonts used on the website.

Font Awesome - For the iconography on the website.

Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.

Favicon.io To create favicon.

Am I Responsive? To show the website image on a range of devices.

Github Pages was used to deploy the live website. The instructions to achieve this are below:

Log in (or sign up) to Github. Find the repository for this project, winchester-bike-club. Click on the Settings link. Click on the Pages link in the left hand side navigation bar. In the Source section, choose main from the drop down select branch menu. Select Root from the drop down select folder menu. Click Save. Your live Github Pages site is now deployed at the URL shown.

The local development section gives instructions on how someone else could make a copy of your project to play with on their local machine. This section will get more complex in the later projects, and can be a great reference to yourself if you forget how to do this.

To fork the Winchester-Bike-Club repository:

Log in (or sign up) to Github. Go to the repository for this project, /Bluiss/winchester-bike-club. Click the Fork button in the top right corner.

To clone the Winchester-Bike-Club repository:

Log in (or sign up) to GitHub. Go to the repository for this project, /Bluiss/winchester-bike-club. Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory. Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.

See full testing doc - testing

https://codepen.io/alvarotrigo/pen/MWEJEWG - Top nav hamburger

https://codetheweb.blog/fullscreen-image-hero/ - Hero image

https://css-tricks.com/zooming-images-in-a-grid-layout/ - Gallery

Chat GPT was used to create the content only, throughout the site

• https://www.pexels.com/
• https://unsplash.com/