Demo
A live demo can be found here.
UX
User Stories
As a user who wants to learn how to dive I want to see the available courses and the diving team.
As a user who already know how to dive I want to see upcoming events.
Strategy
My goal was to create an user-friendly website where users can view details about the diving team, available courses and the upcoming diving events.
Scope
For users who want to learn how to dive I wanted to include an "about us" section to learn about the diving centre and also display the available courses that the centre is offering.
Structure
On the main page there is a full-page cover and three sections providing some info about the centre, presenting the team and testimonials from previous users. "Courses" page presents the courses that are available at the centre. "Events" page shows the user the upcoming events that will take place at the centre and "Contact" page presents the user a form from where they can send the centre a message or ask for more information and also you can find the address, phone number or the opening time of the centre.
Skeleton
Surface
The color scheme offers a contrast between a dark gray and blue. Page titles, header and footer are consistent across all pages.
Technologies
- HTML
- CSS
- Bootstrap (v4.4.1)
Future Plans
In the future, I would like to add the option to book time for a specific course and also a new page when the centre can service diving equipment.
Testing
Both as a new diver or an experienced diver you can find what courses you can do or the events that you can attend at the centre. Tested across multiple browsers (Chrome, Safari, Internet Explorer, FireFox) and on multiple mobile devices to ensure compatibility and responsiveness.
When submitting the contact form without a first name, last name, phone, message or an invalid email address, there will be an error asking to correctly input those fields. If all fields are valid, the page will reload.
Deployment
The site is hosted on GitHub, deployed from the master branch. The deployed site will update automatically upon new commits to the master branch.
To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/onisstudio/diving-centre-ms1.git into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.
Credits
Content
The content from "About Us" section, "Testimonials" section and "Services" page is written by me and it is a fictive content. All the names used are fictive. Some content used on "Courses" and "Events" pages are taken from: Dive Rutland
Media
The photos used in this site were obtained from Pexels.