East Sussex MTB Trails

2nd Milestone Project

View the live project here

East Sussex MTB Trails is a website aimed to help mountain bike riders to find new trails to ride in East Sussex, UK. The visitors will be given the option to select both their skill and fitness levels, the site will collate the choices of each visitor, and return the best trail that suits the rider selections.

The website has been designed to be responsive, intuitive and accessible on a range of devices, including smartphones, tablets and desktops/laptops.

Table of contents

1. User Experience

   • User stories
   • Design
     • Colour Scheme
     • Typography
     • Imagery
   • Wireframes

2. Features

   • Existing features
   • Features left to implement

3. Technologies Used

4. Testing

   • Testing User Stories
   • Bugs and some other challenges
   • Final layout

5. Deployment

   • GitHub Pages
   • Forking the GitHub Repository
   • Making a Local Clone

6. Credits

   • Content
   • Resources
   • Acknowledgements

User Experience

East Sussex MTB Trails uses the visitor choices from the dropdown menus, and displays the mountain bike trail that suits the rider characteristics, along with its location (presented to the visitor in a map) and 3 bullet points showing key information about such trail.

User stories

• First Time Visitor Goals

  1. As a First Time Visitor, I want to find out which mountain bike trail I should be attempting to ride, based on my current level of skills and fitness. Once I know which trail is suitable for me, I want to make some notes of the key characteristics of such trail.
  2. As a First Time Visitor, I want to plan directions to get to the location where the mountain bike trail is.
  3. As a First Time Visitor, I want to get in touch with the real people behind East Sussex MTB Trails, and ask some questions about a particular trail.

• Returning Visitor Goals

  1. As a Returning Visitor, since my set of skills and fitness level might have changed from my first visit, I could be using this site to check out other trails to ride, and make some notes about the key characteristics of the new trail I would like to ride.
  2. As a Returning Visitor, I might want to plan directions to get to the location where any other trails are.
  3. As a Returning Visitor, I would like to keep interacting with the owners of the site, by sending them an enquiry about anything in regards to the information displayed about the trail, location or key characteristics of it.

Design

• Colour Scheme

I wanted to keep the design of the website simple and neat. I have applied a hero image to be the main background of the website, please see below:

I picked a combination of colours that I consider to be eye-catching, and that does not take the attention of the user away from the main goal of the website.

There are 2 dominant colours that can be identified on my site:

• Black galvanised (rgb(26, 23, 23)) : Used as the background colour for the header, footer and the drop down menus as well as the result box (where the trail is revealed once the user has made their choices).

• Intense Orange (#ff3b00eb) : Used as the colour of the text displayed on the header, footer and the drop down menus as well as the result box (where the trail is revealed once the user has made their choices).

• Typography

The font I used for all the website is "Space Grotesk".

• Imagery

All the images I used for my project can be found in the following link

I used the site Unsplash to download all my images, with the exception of the ones corresponding to the mountain bike trails I have based my website on. I acquired those one via facebook groups where I am a member of.

Wireframes

All the wireframes I drew can be found in the following link

Features

The site counts with 1 pages in total, where the user can choose from two

Existing Features

• It is responsive to screen size thanks to bootstrap and the media queries I have put in place.

• There are 9 possible combinations of user choices from the drop-downs, as per the table below:

  SKILL LEVEL	FITNESS LEVEL	MTB TRAIL
  BEGGINER	AVERAGE	STANMER PARK
  BEGGINER	FIT	STANMER PARK
  BEGGINER	SUPER FIT!	FRISTON FOREST
  INTERMEDIATE	AVERAGE	STANMER PARK
  INTERMEDIATE	FIT	FRISTON FOREST
  INTERMEDIATE	SUPER FIT!	SURREY HILLS
  ADVANCED	AVERAGE	STANMER PARK
  ADVANCED	FIT	FRISTON FOREST
  ADVANCED	SUPER FIT!	SURREY HILLS

1. If the user selects beginner (skills) and average (fitness levels), the mtb trail we recommend is Stanmer Park.
2. If the user selects beginner (skills) and fit (fitness levels), the mtb trail we recommend is Stanmer Park.
3. If the user selects beginner (skills) and super fit! (fitness levels), the mtb trail we recommend is Friston Forest.
4. If the user selects intermediate (skills) and average (fitness levels), the mtb trail we recommend is Stanmer Park.
5. If the user selects intermediate (skills) and fit (fitness levels), the mtb trail we recommend is Friston Forest.
6. If the user selects intermediate (skills) and super fit! (fitness levels), the mtb trail we recommend is Surrey Hills.
7. If the user selects advanced (skills) and average (fitness levels), the mtb trail we recommend is Stanmer Park.
8. If the user selects advanced (skills) and fit (fitness levels), the mtb trail we recommend is Friston Forest.
9. If the user selects advanced (skills) and super fit! (fitness levels), the mtb trail we recommend is Surrey Hills.

• RESULTS BASED ON USER CHOSEN OPTIONS

1. If the result is Stanmer Park, the home page will display a picture of Stanmer Park and 3 interactive buttons to show:
   • 1.1 The distance to cover going uphill.
   • 1.2 The distance to cover going downhill.
   • 1.3 Tips about Stanmer Park trails.

• The home page will, also, display a google maps api integration and a contact form, using mailjs api integration to get in touch with us to find out more about the trails at Stanmer Park.

2. If the result is Friston Forest, the home page will display a picture of Friston Forest and 3 interactive buttons to show:
   • 2.1 The distance to cover going uphill.
   • 2.2 The distance to cover going downhill.
   • 2.3 Tips about Friston Forest trails.

• The home page will, also, display a google maps api integration and a contact form, using mailjs api integration to get in touch with us to find out more about the trails at Friston Forest.

3. If the result is Surrey Hills, the home page will display a picture of Surrey Hills and 3 interactive buttons to show:
   • 2.1 The distance to cover going uphill.
   • 2.2 The distance to cover going downhill.
   • 2.3 Tips about Surrey Hills trails.

• The home page will, also, display a google maps api integration and a contact form, using mailjs api integration to get in touch with us to find out more about the trails at Surrey Hills.

Features left to implement

back to contents

Technologies Used

• Languages : HTML, CSS, Bootstrap framework and Javascript.

• IDE: Gitpod (runs Visual Studio code online).

• Version control: Git on Gitpod and Github.

• Wireframes: Balsamiq

• Browser Developer tools : Google Chrome

• Fonts : Google Fonts

• Icons : Fontawesome

• Hover effects : Hover.css

• Colour Picker : colourpicker

• RGB Generator : rgbgenerator

back to contents

Testing

The following tools were utilised to test the website:

• Pingdom Website Speed Test

The results of such test can be seen as below:

• W3C CSS Validator - Results
• W3C Markup Validator - Results

In regards to the HTML markup, I encountered one error that even though it did not affect the functionality of the site, it was marked as non-valid code, see below:

After trying numerous types of fixes, I eventually managed to cut some code from Bootstrap navbar documentation and embedded it onto my existing navbar code I previously extracted from Bootstrap. The problem of a div element being a child of an ul was solved by changing the div element by a li, which will perfectly fit as a child of an ul. My original classes and id's were kept as they did not need to change at all.

You can check my clean, no-errors HTML here

In regards to the CSS, no errors. Please see below:

• Responsive Web Design

The website has been tested in various devices and I have also used the dev tools to make sure that the site renders adequately on all the breakpoints.

Testing User Stories

• First Time Visitor Goals

  1. As a First Time Visitor, I want to browse through the catalogue of products and make enquiries for items I want to purchase.
     • This has been tested and an user will be more than able to browse through the sections of the shop and select any items, by clicking on the call-to-action buttons to buy the product.
  2. As a First Time Visitor, I want to analyse the site and evaluate how easy it is to navigate throught it in order to check the products and content.
     • Navigation menu works perfectly, and each section has an underline efect to make sure the user sees where he/she goes next. On smaller devices such as smartphones, the menu will toggle and still will have all the functionality an user needs.
  3. As a First Time Visitor, I want to verify testimonials about the quality of the service and find out what real people think about the website. I will also corroborate all their social media channels by clicking on the social media icons displayed on the site, with the aim of getting a deeper insight of their followings on each of the social media platforms they are part of.
     • Testimonials are shown right on the home page, and all the links to social media channels are working accordingly.

• Returning Visitor Goals

  1. As a Returning Visitor, I might want to place an order or follow up on an enquiry I recently made.
     • All buttons to buy products are fully working so the user will be more than able to perfom such action.
  2. As a Returning Visitor, I want to check any possible new releases or products available on the website.
     • The website will be updated with new products on a daily basis so users can come back and check the latest releases.
  3. As a Returning Visitor, I want to keep up with any promotions running via the official social media accounts of The Vinyl Aficionado website.
     • Social media channels will always be available for the users just by clicking on the links provided on the site.

Bugs and some other challenges

One of the navigation items (shop) tends to come off the alignment with the rest of the items. I managed to apply some padding and center it with the rest of items. However, I have noticed that, when being in one of the pages of the shop, the item comes off although we are probably talking a quarter of a cm.

The Carousel slider from bootstrap was challenging and I very much enjoyed breaking down the code and implementing a first slide that will be the main sign of identity of my website, visually speaking.

The markup of my HTML showed (as previously mentioned) a piece of non-valid code. I was able to fix the issue by using the following Bootstrap navbar documents

Final layout

• Home Page: I introduced the carousel slider instead of a static photo, as per my wireframe I drew back when I was starting the project.
• Shop: I deployed a dropdown menu with all the sections of the shop, rather than displaying them all on a single page.

back to contents

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

You may wish to contribute to this website and have your contribution published, if so, you are welcome to follow these steps below.

1. Log in to GitHub and locate the GitHub Repository
2. Open https://josecastanocoding.github.io/the-vinyl-aficionado/
3. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
4. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

If you prefer working on the repository locally, you can clone the repository to your desktop by the following steps.

1. Go to the vinyl aficionado github page
2. Under the repository name, click "Clone or download".
3. • To clone the repository using HTTPS, under "Clone with HTTPS", click the paste icon.
   • To clone the repository using an SSH key, click Use SSH, then click the paste icon.
   • To clone a repository using GitHub CLI, click Use GitHub CLI, then click the paste icon.
4. Open Git Bash.
5. Change the current working directory to the location where you want the cloned directory.
6. Type 'git clone', then paste the URL you copied earlier above.
7. Press Enter to create your local clone.

back to contents

Credits

Content

• The Record Bloke
• Wasted Heroes

Resources

• Code Institute
• Typewolf
• Design Shack
• Unsplash
• Bootstrap components
• W3schools
• Code institute's Slack workspace channels
• CSS tricks
• Stack Overflow
• Hover.css
• CSS Gradient

Acknowledgements

• The Record Bloke
• Wasted Heroes
• Various people at the code institute and on the code institute Slack channel.
• Various people at LinkedIn
• My career consultant Stuart Crang.
• My mentor Aaron.

back to contents