Holiday destinations

Find the perfect snowboarding destination around the work! We've picked out the best places in the world suitable for all your snowboarding needs! Perfect for kids, couples, travellers and everyone inbetween!

Project goals

The goal of this project is to help users find the ideal snowboarding destination based on their needs. This project was aimed towards snowboarders who wished to find the best places to board all around the world.

User goals

• To use a website that helps them find out information about the best snow holiday for them.
• Have an interactive map top allow users to pick a holiday destination.
• Contact details provided to allow the user to ask any questions based on their holiday.
• Interactive on both desktop and mobile devices.

Site owner goals

• Gather information on where people tend to go when snowboarding.
• Receive contact details through the use of contact form. The contact form does not send to a local email account. However this is a future feature which will be added.

User requirements

• Have an interactive Google maps available to see certain holiday destinations.
• Navigate through the website by using an popout nav bar to save from clutter on the desktop and mobile site. Contact form needs to have a validation system in place to prevent spam and unwanted emails.
• create a visually easy and appealing site.

User Expectaions

• Pop out navigation bar on desktop and mobile devices to save on clutter.
• The navigation bar should direct you to specific places on the website whem clicked.
• Have a fully functional map available with added points to mark the locations being described.

Design choices

The main theme of this webiste was to create a simple yet modern design to a holiday destination website.

Font

I chose to use the font Merriweather as it applies a very simple yet easy to read style to the final website. The writing isnt too close together and allows for easy reading even on a small device.

Icons

The only icon I thought was neccessary for the webiste to contain was a 'scroll to top' arrow, located in the bottom right hand corner of the screen. This is presented to allow for the user to easily scroll to the top of the webiste, allowing for fast and easier access to the navigation bar.

Colours

By choosing white text on a dark grey background allows the website to have a sleak design. This decreases eye strain and strengthens reading stamana in comparison to white text on a solid black background.

• The primary colour used for the backgrouns is #0c0c0c. A dark grey which allows for a good comparison and easy read against it.
• All text used #c5c5c5. This is a similar colour to the pop out nav bar allowing for constistancy to be continued throughout the website.

Background and images

The background image I chose to use was a free image sourced from a royalty free website called unsplash.com. With the image being relatively large at the start of the website it invites people in. Making them question where the image was taken and to make them say 'I'd love to go to somewhere like that!'.

Wireframes

In a seperate folder within my code are my wireframes. This shows how I intended the website to look on desktop. On mobile the only edit that needed to be made was the destinations information all being below one another. This would allow for a cleaner and less crowded appearance.

Features

• Interactive Google Maps with location markers.
• Form validation at the end of the contact form to decrease spam.
• A pop out navigation bar.

Technologies Used

• HTML
• CSS
• JavaScript
• Bootstrap
• Googlemaps
• Font awesome
• Github
• JQuery

Testing

• Throughout the whole project there was rigorous testing down to make sure that the Google Maps section worked efficiently and didn’t have any glitches or faults when loading. This allowed me run the website with a max load time of 10-20 seconds load time depending on internet accessibility.
• Multiple testing was done on various internet browsers such as Firefox, Safari, Internet Explorer and Chrome. There were no issues that I could find personally but it was noted that when testing on the Iphone SE, but found that the site requires horizontal scroll on screens as large as the Iphone X.
• The only item that is off screen on a mobile device is the 'scroll to top' button. This was done on purpose. When holding a mobile phone in one hand (usually the right hand), it is very easy to accidently mis-touch the screen and tap on the bottom right corner with your palm. This doesn't affect the user experience as all the content is visible even without horizontal scroll and keeps a vertical screen clean.

Overall design

Personally I like the overall design of the site as it is minimalistic and clean to the eye of the user. However many websites use lighter colours to draw in their clients but with a more sleek design it appeals to those who want a relaxing/sleek holiday.

Bugs

Originally there was an issue with the google maps where it wouldn’t load on the screen but this issue was resolved and fixed thanks to some editing in the stylesheet.css. Another issue that was found was the ‘scroll to top’ button had a boarder/background around it. However when I tried to impliment this the background waa not centered with the icon. To resolve this I decided to remove this feature completely in order to keep to a clean and minimal look to the overall website. Other than the two problems above, there doesn’t seem to be anything which is causing a glitch to the website itself.

Deployment

When deploying on github please follow these steps.

1. Open the github browser.
2. Sign in.
3. Create a new repository. This will get you started!
4. Create a name for your site.
5. Within the setting tab, scroll down to a section called 'Github Pages'.
6. Under the 'source' tab, click the dropdown and select 'master branch'. This will create a live site link for your website.

When commiting to Github, follow theres steps...

1. Ensure you are on the /environment/ in your ternimal.
2. If not, use cd .. to got back one file at a time till you reach 'environment'.
3. Enter git add . to add all content to github.
4. git commit -m "Initial commit This code will commit your code and add a a small description.
5. git push will upload this file to a remote repository.

Deployment locally

cloning the repository

1. Navigate to Snow Holiday
2. At the top of the page click 'clone or download'
3. Copy the URL in the drop box when clicked
4. Using an IDE open up a terminal
5. Navigate to the file location
6. Copy the following code and input it into your terminal to clone snow holiday!

git clone https://github.com/Wini996/SnowHoliday.git

Credits

Throughout this project I need to thank the Code Institute tutorials for guiding me through the use of Google Maps and API's. Thanks to Eric Terwan, for his tutorial on Navigation bar which pops out on desktop and mobile devices. Thanks to Brian Macharia, for the help and support with this project. All suggestions to this site we revised, and edit had been made to make the website more responsive and user friendly.