Even though the number of cyclists has grown exponentially over the past 4 years, Nynäshamn still lacks a community of cyclists that is brought together by the love of this sport and the willingness to explore the Swedish nature in a different manner.

The main purpose of this website is to form a MTB community in the city of Nynäshamn, in the southern region of the Stockholm Metropolitan Area.

The website mostly targets beginners of different ages and backgrounds. Hence, the code of conduct (which also serves as a reminder for the intermediate or advanced users), necessary equipment and the trails graded by colours with the suitable explanations.

Needless to say, everyone is welcome to our MTB sessions, as long as they have a bike with sound brakes, a helmet and a wish to join a lovely community.

• User Stories

  • Visitor Goals

    a. As a mountain biking beginner, I want to use the site for information regarding the equipment I will be needing, the rules I must follow and the types of trails I will be visiting.

    b. As a person who has recently moved to the area, I want to use the site in order to pick up a new hobby, join the community and get to know the area where I am living.

    c. As a parent, I want to use the site to join the events and get in shape, while also spending quality time with my kids/family.

• Design

  • Colour Scheme

    The two main colours used are dark grey and yellow green/moderate yellow.

    Color scheme taken from Colourco .

  • Typography

    The two main fonts used are Oswald (headers) and Roboto (body), with Sans Serif as a fallback.

• Wireframes

  • Balsamiq Wireframe

• Existing Features

  • Feature 1 - Home Page - allows the user to get familiar with the scope of the site;
  • Feature 2 - Trails - introduces the user to the types of trails available in the area;
  • Feature 3 - Events - presents the events that will take place in the near future;
  • Feature 4 - Gallery - showcases images from the scenic routes;

• Features Left to Implement

  • Sign In/Up form

• Languages Used

  • HTML5

  • CSS3

• Frameworks, Libraries & Programs Used

  • Bootstrap v4.4.1

  • Google Fonts

  • Font Awesome

  • Hover.css

  • Gitpod

  • GitHub

  • Balsamiq

• Testing

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

      W3C Markup Validator - Results
    

  

  

  

  

    Jigsaw CSS Validator - Results
  

  

• Automated Testing

  For the automated testing, I have used Lighthouse. Results can be found in the Testing Folder.

• Testing User Stories from User Experience (UX) Section

  Upon entering the site, users are automatically greeted with the logo (which is self explanatory) and an easily understandable icon bar to go to the page of their choice.

  On each page, besides the logo and the icon bar, the users can see the hero image and a body which contains a structured layout that conveys the purpose of the site, general rules, equipment and a gallery.

  At the bottom of each page, the user will find the social icons, which will redirect him/her to the appropriate social media accounts, where he/she will find the necessary contact information and daily updates.

  The site is responsive, so the user will have the possibility of viewing the information on smaller devices, such as mobiles or tablets.

  a) As a mountain biking beginner, I want to use the site for information regarding the equipment I will be needing, the rules I must follow and the types of trails I will be visiting.

  1. The user will be able to access the site and find relevant information regarding the purpose of the site on the home page, along with information regarding the equipment that will be needed for the advertised activity.

  2. On the second page, the user will see information regarding trail types, difficulty and a code of conduct aimed at beginners and not only.

  3. On the third page, the user will see the schedule for future events. Events are organized weekly (Monday-Saturday) and every event is graded by color of the trail (green, blue, red, black)

  b. As a person who has recently moved to the area, I want to use the site in order to pick up a new hobby, join the community and get to know the area where I am living.

  1. The user will be able to access the site and find information about MTB and the MTB community here in Nynäshamn, which hopefully will make him/her want to join or at least trigger the desire of joining.

  2. By accessing the social links, the user will have the possibility of checking out the social media accounts, which contain videos, images and daily updates of the community.

  c. As a parent, I want to use the site to join the events and get in shape, while also spending quality time with my kids/family.

  1. The user will be able to use the site to find out when and where the events are generally taking place, if there are any updates on the social media platforms or on the site and retain information about the rules and equipment for the children and for him/herself.

• Further Testing

  • The Website was tested on Google Chrome, Microsoft Edge and Opera browsers.

  • The website was viewed on a variety of devices such as Laptop, Huawei P30 Pro, Huawei P20 Pro and Samsung S9.

  • A large amount of testing was done to ensure that all pages were linking correctly.

  • Friends (Toth Csaba, Carla Barzacovschi, Victor Dobre and Vlad Mălureanu) were asked to review the site and documentation to point out any bugs and/or user experience issues.

• Fixed Bugs

  • Images not loading in events.html (cards) and index.html. Fixed by using external links.

• Known Bugs

  • On some mobile devices with smaller resolutions(320px), the audio in the Gallery doesn't center, pushing the right margin. As such, a white gap can be seen on the right side of the page.

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, 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. Click "Save" and refresh the page.

6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

• Content

  • Part of information found on the home page and trail page was copied from Forestry and Land Scotland.
  • Part of information found on the home page and trails page was copied from MTB Weekly.
  • The information found on the events page was taken from Trailforks.

• Media

  • The full-screen hero image was obtained from Shutterstock.
  • The circle cover image was obtained from SCOTT Sports.
  • The first card image from the Events Page was obtained from Cottage Life.
  • The second card image from the Events Page was obtained from Roanoke Mountain Biking.
  • The third card image from the Events Page was obtained from The Green Trails.
  • The fourth card image from the Events Page was obtained from Google Images.
  • The fifth card image from the Events Page was obtained from 303 Magazine.
  • The images from the Gallery Page were obtained from Unsplash.

I received inspiration for this project from the Love Running Project featured at the end of the HTML/CSS module and the Whiskey Drop Project and Resume Project featured in the User Centric Fronted Development module.

Inpiration for the README.md came from Awkale.me, Markdown Tutorial, Code Institute Solutions/Anna Greaves.

Last, but not least, I would like to thank my mentor, Mark Railton, for helping me get through this challening first milestone project.