Stream One Project: User-Centric Frontend Development - Code Institute

FOR EDUCATIONAL PURPOSE ONLY

This website serves as information platform about the race to interested participants. It gives a brief description of the race course, shows the pricing of the different packages and what's included in each of them as well as a form to directly sign-up for the race. It also serves as platform for the race sponsors to showcase their support.

User Stories.

• As organization, I want to give all information about the race, so I can get people interested
• As skipper, I want to know prices so I can decide if I want to participate
• As skipper, I want an easy way to sign-up so I can participate
• As a Sponsor, I want my company to be shown to visitors so I can get a positive ROI
• As aficionado, I want centralized access to all social media, so I can follow the event

Wireframes For the skeleton element of the UX design of this project, the balsamiq.cloud tool was used to create the wireframe. The wireframe can be viewed here.

The site is responsive and mobile first, with lighter code being loaded for small devices due to the elimination of some images from the design.

A scrollspy feature from Bootstrap is also used in the navigation menu to provide a visual indication of the section of the website that is being viewed.

• The form should validate the email entered is in a valid format
• The form could direct to a payments gateway to make the payment

1. HTML
2. CSS
3. Bootstrap (v4.3.1) https://getbootstrap.com

The site has been tested in multiple browsers (Chrome, Chromium, Safari, FireFox), in multiple OS (MacOS, Linux) and on multiple mobile devices (Android 7 phone & iPad mini) to ensure compatibility and responsiveness.

All links have been tested and all the ones linking to external websites open in a blank tab.

All user stories have been checked to confirm the website offers a solution to them.

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html

To run locally, you can clone this repository by pasting git clone https://github.com/jordy-silva/ci-costa-brava-msp.git into your terminal, given that git is installed in your machine.

• The text for section Race Course was partically copied and then adapted from the Barcolana website
• Text from the Deployment section of this document has been copied and adapted from Code Institute's example project

• Main Photo by Quintin Gellar from Pexels
• Logos were obtanined from the websites of the respective organizations and belong to them.
• The map image of the section Race Course was created by myself using Gimp.

• I received inspiration for this project from Barcolana website
• StackOverflow was consulted for help with diferent challenges during the project.
• Bootstrap documentation and examples have been used as base for some parts of the website.
• How to make Bootstrap cards deck responsive and show on a colum was inspired from here: https://o7planning.org/en/11971/bootstrap-cards-tutorial