APRÈS SKI LTD

Index

• Project Definition
• UX
• Features
• Technologies Used
• Testing
• Deployment
• Credits
• Acknowledgements

The main objective of the website in this project is to present the services and options provided to University Skiing and Snowboarding social clubs by the travel and events organiser “Après Ski LTD”.

Après Ski is a winter sports and events organiser for small and large groups of university students from Spain and the United Kingdom. The website provides a wide range of options with information about six of the most popular resorts across the continent. Furthermore, the website contains information on Après Ski and how the company began along with illustrating how the booking process works. The contact page is the final page of the website where the user can request a full quote based on their resort selection and the size of their group.

The main aim of Après Ski is to offer university students package holidays at the best resorts in Europe at reasonable prices while taking away the hassle of them having to organise it all themselves.

UX

Who this website is for?

This website is aimed at university students in Spain and the United Kingdom interested in finding affordable Skiing and Snowboarding holidays.

What it is that they want to achieve?

Students visit the website in order to obtain the following:

• To obtain information about the resorts available.

  Also, what they have to offer in terms of Skiing and Snowboarding such as size and difficulty of the slopes and location. Along with nightlife, restaurants and other activities on offer.

• To learn about the holiday provider Après Ski.

  Investigating if the provider is an experienced reputable company and learn about the services offered before going any further with the booking process.

• To understand how the process works.

  This could be with regards to travel arrangements, accommodation and Ski/Snowboard lessons. Also, to learn the steps involved after the quotation has been requested.

• To register for a Quote.

  To get in touch with an advisor to answer any queries they may have.

• To view all website content in the desired language.

  There are two language options provided so the content can be presented to the user in English or Spanish.

How your project is the best way to help them achieve these things?

• Après Ski’s website contains a Resorts page available in both English and Spanish providing the user with key information of the six resorts available. This is the interactive part of the website where six photos (one of each resort) are displayed and the information of that resort is visible when the user hovers over one of the photos. The purpose of this page is to allow the user to quickly view all the options available and obtain the key information necessary without having to scroll through pages and pages of resorts. Also enabling a possible comparison between resorts to help further aid their choice.

• The website also has an entire page named “About us” enabling the user to learn all about the provider. Thus, clarifying any queries, the user may have. In this section the user can learn why Après Ski is unique and what extra services and events are offered during the holiday. The aim of this page is to provide the user with an overview of the travel provider to put the user at ease by describing the specialities and experience on offer.

• A step by step guide is provided to the user using images accompanied with a brief description illustration the process beyond the quotation and the extra options available for specific travel needs. This is for users that may never have booked through a travel provider before and aims to show the wide range of options available along with how stress free the process can be.

• A “Get a quote” page enables the user to put in their email address, resort choice and group size in order to be contacted by an advisor with a full quotation. Furthermore, the provider’s contact details such as an email address, telephone number and fax are provided if the user has any further inquiries.

• The language dropdown option allows the user to view the website content in either English or Spanish. All information throughout the entire website is provide in both languages and can easily be selected in all screen sizes by the dropdown.

Website Wireframes

Below are the links to the website wireframes. All wireframes were created using Balsamiq.

• index.html both on Desktop & Mobile (https://github.com/ElJefe111944/Milestone-1/blob/007c0ddf6f60e8186f6beab803468d97a6a59791/apr%C3%A8s-ski/assets/wireframes/index.html-wireframe.pdf).

• about-us.html both on Desktop & Mobile (https://github.com/ElJefe111944/Milestone-1/blob/007c0ddf6f60e8186f6beab803468d97a6a59791/apr%C3%A8s-ski/assets/wireframes/about-us.html-wireframe.pdf).

• resorts.html both on Desktop & Mobile (https://github.com/ElJefe111944/Milestone-1/blob/007c0ddf6f60e8186f6beab803468d97a6a59791/apr%C3%A8s-ski/assets/wireframes/resorts.html-wireframe.pdf).

• get-a-quote both on Desktop & Mobile (https://github.com/ElJefe111944/Milestone-1/blob/007c0ddf6f60e8186f6beab803468d97a6a59791/apr%C3%A8s-ski/assets/wireframes/get-a-quote.html-wireframe.pdf).

Features

As mentioned in the previous section, this website contains several features which are aimed at enhancing the user’s experience.

Existing Features

• Navigation bar – Situated at the top of each page of the website the navigation bar allows the user to access the pages most relevant to their needs with ease as well as providing an overview of the content available to the user on the other pages of the website. All the user has to do is to click on the links displayed in the navigation bar to browse the page of interest on the website. Language dropdown options – The Language dropdown options located in the top right throughout the website is a feature of the navigation bar. This allows the user to view the website content in either English or Spanish. All information throughout the entire website is provide in both languages and can easily be selected in all screen sizes by the dropdown. The user selects the dropdown bar labelled “language” and is presented with the two language options. Once they have clicked on the language desired the current page will reload with all text in the relevant language.

• Carousel – Located on the home page just behind the navbar is the Carousel. This provides a brief overview of the three other pages and indeed the website itself. Links are provided in the centre of each of the pictures. The pictures displayed in the carousel grab the user’s attention and the links guide them to the section they are most interested in.

• Landing page – The landing or home page welcomes the user to the website and provides a small pitch and introduction about the travel provider Après Ski and what it can offer the user.

• Resorts page – The resorts page enables the user to learn about each of the six resorts on offer just by moving their mouse across the six different photos. As the user hovers over one of the resorts (represented as one of the six photos) the image transitions into text which contains the key information and distinguishable features of each resort. This not only allows the user to obtain all the information necessary in a short space of time but also provides a comparison between resorts helping them make their decision. The text presented behind the photo which is brought to the front when the user wants to interact with that photo is clear, concise and not too long to avoid overwhelming the user with information.

• About us page – The about us page allows the user to learn about the travel provider and the steps to the process involved after booking a quotation. This is done by a question and answer section in the centre of the page. The background image attracts the user’s attention and the questions are specifically about the experience and uniqueness of the holiday provider. The second part of the page illustrates with a small image and accompanying text the steps involved after the booking process.

• Get a quote page – The final page of the website allows the user to request a quote based on the information they have provided. This is done by having the user complete the input section with their email address, resort choice and group size. Furthermore, if the user has any additional queries there are several ways of contacting the provider detailed under the “For all other queries section”. In this section links are provided to the provider’s email address, phone number, fax number and location on google maps.

• Footer – At the bottom of each page of the website, the footer consists of social media icon links, the address of the provider and the privacy policy, terms and conditions and data security policy. Here the user can access the provider Après Ski’s other social media accounts just by clicking on the different icons available. In this section the user can download in a new tap in all screen sizes the privacy policy, terms & conditions and data security policy just by clicking on the different links presented.

Technologies Used

Below is a list of languages, frameworks, Integrated Development Environment, Software Development Platforms and other tools used to construct the website in this project.

Languages:

• HTML5 (https://en.wikipedia.org/wiki/HTML5)

  The project uses HTML (Hyper Text Mark-up Language) as this is the standard mark-up language for structuring and presenting the content on webpages.

• CSS3 (https://en.wikipedia.org/wiki/Cascading_Style_Sheets)

  The project uses CSS (Cascading Style Sheets) as this describes how the HTML elements should be displayed on the webpages.

• JQuery (https://getbootstrap.com/docs/4.5/getting-started/introduction/#js)

  JQuery was used in this project to enable the use of other Bootstrap components such as the carousel.

Frameworks:

• Bootstrap 4 (https://getbootstrap.com/)

  The project uses the Bootstrap 4 framework for faster and easier web development. Bootstrap 4 also allows us to create a responsive website with ease.

Integrated Development Environment:

• GitPod (https://www.gitpod.io/)

  The website for this project was created using the online IDE Gitpod.

Software Development Platform:

• GitHub (https://github.com/)

  This project was saved in GitHub as a repository using GitHub’s hosting services.

Other Tools:

• Font Awsome (https://fontawesome.com/)

  The vast library of icons available from font awesome are used throughout this project to compliment texts and links making the design clearer and more concise.

• Pixlr (https://pixlr.com/x/)

  The photos used in this project have been edited using the online photo editor PIXLR.

• Google Fonts (https://fonts.google.com/)

  The online library of licensed fonts was used in this project.

• Balsamiq (https://balsamiq.com/)

  The industry standard wireframing tool was used at the start of this project to design and skeleton plan of each of the pages in this website on both desktop and mobile views.

• CSS Beautifier (https://www.cleancss.com/css-beautify/)

  A free online tool providing helps clean up messy style sheet code and helps with the formatting.

Testing

The following Web Development tools were used for this project for testing, debugging and optimising different variation of CSS. The Web Developer tools were also used to view the layout and structure of the website through different devices and to test the behaviour of the website on standard screen sizes to cover all media devices.

• Chrome Developer Tools
• DevTools (Firefox)

This website has been tested on the following devices:

• Moto G4
• Galaxy S5
• Pixel 2
• iPhone 5/SE
• iPhone 6/7/8
• iPhone 6/7/8 Plus
• iPhone X
• iPad
• iPad Pro

User stories

In this section, we will go over all of the user stories from the UX section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.

• To obtain information about the resorts available:

  1. Click on the link to the "Resorts" page which is located in the navigation bar.

  2. Scroll down the page to view each of the six available resorts.

  3. Learn the names of all six resorts offered by the provider.

  4. Hover over each of the resort photos to obtain the further information about the resort of interest.

  5. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.

• To learn about the holiday provider Après Ski:

  1. Click on the link to the "About us" page which is located in the navigation bar.

  2. Scroll down the page to view the question and the corresponding answer regarding the provider.

  3. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.

• To understand how the process works.

  1. Click on the link to the "About us" page which is one of the links in the navigation bar.

  2. Scroll down the page to view the “How the process works section”.

  3. Learn each of the steps involved and the various options available at these stages of the booking process.

  4. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.

• To register for a Quote:

  1. Click on the link to the "Get a quote" page which is one of the links in the navigation bar.

  2. Enter an email address in the box labelled “Email address”.

  3. Select one of the six resort on offer in the dropdown box labelled “Choose a resort”.

  4. Select the group size in the following dropdown labelled “Group size”.

  5. Try to submit all the input and the page will refresh to let the user know the process is complete.

  6. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.

• To view all website content in the desired language:

  1. Go to the dropdown at the right-hand side of the navigation bar labelled "Language" which is available on all pages.

  2. Click on the box labelled “Language” to activate the dropdown.

  3. Select one of the two language options available in the drop down which are either “English” or “Spanish”.

  4. Observer the transition of all content to the desired language.

  5. Revert back to the original language by repeating the process and selecting the alternative language option.

  6. This process can be repeated in mobile views. Please note, the link is in the navigation bar dropdown which can be activated by clicking on the burger icon at the top right-hand side of the page.

Interesting bugs or problems

No major bugs or problems were encountered during the making of this project. Any issues that were encountered were only minor ones such as the mistyping of code and white spaces between elements.

All the minor issues which did occur could have been avoid but due to my lack of experience and this being my first individual project I was unsure on the best practices. This led me to adopt more of a trial and error approach to creating the website.

An example of this was the media queries on the resorts page. They were originally based on the text in the English version of the website. So, on smaller screens the font size was reduced enabling it to fit inside the card body. However, as Spanish sentences naturally are longer the media queries set out for the English version were not sufficient for keeping the text inside the card body in the Spanish version. This meant that I had to redo all the media queries for this page based on the Spanish version. This was a process that was continued through the rest of the website.

Deployment

The project was developed with the use of Gitpod’s Intergraded Development Environment. All developments and changes made to the project were saved and pushed to an external repository stated below using GitHub. This eliminates the risk of deleting a key component of the project by accident as all steps can be reversed thus undoing any unwanted changes made.

Deploying the project to the hosting platform GitHub:

1. Go to the repository created from my GitHub account called below: https://github.com/ElJefe111944/Milestone-1.

2. Click on the settings tab located in the menu at the top of the page.

3. Scroll down the page to the GitHub Pages section.

4. Change the source to Master branch which will refresh the page.

5. Further down in the GitHub pages section a green box will appear confirming the website has been deployed.

6. Click on the link in the green box (also displayed below) to go to the live website. https://ElJefe111944.github.io/Milestone-1.

Credits

Content:

The texts for all the information about the resorts in the resort section were taken f m Wikipedia listed below:

• Auoriaz (https://en.wikipedia.org/wiki/Avoriaz)
• Pas de La Casa (https://en.wikipedia.org/wiki/El_Pas_de_la_Casa)
• Les 2 Alpes (https://en.wikipedia.org/wiki/Les_Deux_Alpes)
• Val Thorens (https://en.wikipedia.org/wiki/Val_Thorens)
• Laax (https://en.wikipedia.org/wiki/Laax)
• Sestriere (https://en.wikipedia.org/wiki/Sestriere)

Code from external sources:

Please note, I have differentiated between code that was directly used from an external source and an idea from an external source where the code has been altered and not directly copied for the purpose of this project.

• The idea of the navigation bar over an image was taken from (https://www.w3schools.com/howto/howto_css_navbar_image.asp).

• The code for the navigation bar was taken from (https://getbootstrap.com/docs/4.5/components/navbar/).

• The idea for the Semi-transparent navbar was taken from (https://www.youtube.com/watch?v=LytVxCGtRSw).

• The code for the carousel was taken from (https://getbootstrap.com/docs/4.5/components/carousel/).

• The idea for the resort section was taken from (https://www.youtube.com/watch?v=d2vrbiRAsdU).

• The code for the resort section was taken from (https://getbootstrap.com/docs/4.5/components/card/).

• The idea and code for the fixed background image was taken from (https://www.w3schools.com/cssref/pr_background-attachment.asp).

• The idea for the “How it works section” was taken from (https://www.youtube.com/watch?v=YNX4La5KJ7U&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb&index=32).

• The code for the “How it works section” was taken from (https://getbootstrap.com/docs/4.5/layout/grid/).

• The code for the “Get a quote” section was taken from (https://getbootstrap.com/docs/4.5/components/input-group/),

Media:

• Unsplash

  This project has used the images available from the website Unsplash.com as all images can be downloaded to pdf and jpeg form. All pictures provide a visual representation for the user.

• Pixabay

  This project has also used images from the website Pixabay which is a free-to-use website for sharing and downloading photos. (https://pixabay.com/es/)

• Font Awesome

  The vast library of icons available from font awesome are used throughout this project to compliment texts and links make the design clearer, more concise and user friendly.

• Google Fonts

  The online library of licensed fonts was used in this project. The Google fonts used for this project were Orbitron and Play. https://fonts.google.com/

• CSSgradient

  The free online CSS gradient generator tool was used in this project. https://cssgradient.io/

Acknowledgements

• Allen Thomas Varghese (Code Institute mentor) Thank you for your advice and guidance throughout this project helping improve the design and over function of the website.

• Code Institute Slack Community Thank you for your guidance with any queries or problems I have encountered during the making of this website.

• Juliana Stefania Moya Guaje Thank you for your helping reviewing and editing the resort content.

• Elisa Vidal Thank you for your helping reviewing and editing the website content.