The site with travel information relating to flights.
-
-
- As a First Time Visitor, I want to want to make sure that I get the information I want based on the site description.
- As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
- As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their followings on social media to determine how trusted and known they are.
-
- As a Returning Visitor, I want to find information about the flight packages.
- As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
- As a Returning Visitor, I want to find community links.
-
- As a Frequent User, I want to check to see if there are any newly added packages or offers or if the company has moved in to offer other variety of travel services including car-hire, hotels, etc..
- As a Frequent User, I want to check to see if there are any new blog posts.
- As a Frequent User, I want to sign up to the Newsletter so that I am emailed any major updates and/or changes to the website or organisation.
-
-
-
- The two main colours used are blue, and white.
-
- The Baloo Paaji 2 font is the main font used throughout the whole website with cursive as the fallback font in case for any reason the font isn't being imported into the site correctly. The font is unique and gives a feeling of calmness. Also, it is both attractive and appropriate for the travel site.
-
- The background image of a destination by the beach has been chosen to reflect the calm and serene nature where tourists can feel relaxed and out of all the stress.
-
-
The website is responsive on all device sizes ranging from desktop to tablet & mobiles.
-
Interactive elements
- Bootstrap 4.0:
- Bootstrap was used to assist with the responsiveness and styling of the website.
- Google Fonts:
- Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
- jQuery:
- jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the projects code after being pushed from Git.
- Photoshop:
- Photoshop was used to create the logo, resizing images and editing photos for the website.
- Figma:
- Figma was used to create the wireframes during the design process.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
-
-
As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
- Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the section of their choice. Below the navigation bar, is a video background that gives a good sense of communication.
- The full aspect of the website is shown by the image which just stands out and puts across the actual idea of the website.
-
As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.
- The site has been designed to be fluid and never to entrap the user. At the top of each page there is a clean navigation bar, each link describes what the page they will end up at clearly.
- The content on the page is appropriately placed so as to give a good visual feedback to the user.
- On the Contact Us Page, after a form response is submitted, an alert shows up stating that their submission was a success.
-
As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their following on social media to determine how trusted and known they are.
- Once the new visitor has read the About Us and services section, they will move on to the Testimonials section which give the users an understanding of what our esteemed clients think of us.
- The user can also scroll to the bottom of any page on the site to locate social media links in the footer which have a slow transition when hovered over.
- When clicked, the user is directed to the respective homepage of that site.
- There is a 'Trips' section in the navigation bar which when clicked, will take the user to the trips page.
- Here, the user will get the flight details such as origin, destination, departure date, flight and the price.
-
-
-
As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
- The navigation bar clearly highlights the "Contact Us" Page.
- Here they can fill out the form on the page.
- The footer contains links to the organisations Facebook, Twitter, Linkedin and Instagram page.
- Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.
- The email button is set up to automatically open up your email app and autofill there email address in the "To" section.
-
-
-
As a Frequent User, I want to check to keep checking for any possible updates to the site.
- The user would be able to get updates since they will have submitted details through the contact form.
-
As a Frequent User, I want to check to see if there are any new blog posts regarding travel information.
- All updates will be made in the social network pages which is already integrated in the footer.
-
- The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
- The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
- Due to the limit of info in the api, the users will have to enter the Country codes instead of place name and currency code in caps.
- A large amount of testing was done to ensure that all pages were linking correctly.
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
- Due to limited functionality of the api, the user will need to enter the Country Code in the From & To inputs and the currency code (in caps) in the currency input. Please refer to the Aplha 2 column of this website for the list of country codes.
- The api shows only direct flights between major airports of the world.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone
, and then paste the URL you copied in Step 3.
$ git clone https://github.com/johnnyferns14/javascript-milestone-project-2
- Press Enter. Your local clone will be created.
$ git clone https://github.com/johnnyferns14/javascript-milestone-project-2
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
The test was conducted for the following countries with their country codes:
- Afghanistan - AF
- Australia - AU
- Austria - AT
- Azerbaijan - AZ
- Bahamas - BS
- Bahrain - BH
- Bangladesh - BD
- Barbados - BB
- Belarus - BY
- India - IN
- United Kingdom - UK
- United States - US
- London - LOND
- Mumbai - BOM
Most of the country codes in the Alpha 2 column of this website work with the search results.
Information is entered in the following way:
- From field contains the Origin country code (UK).
- To field contains the destination Country Code (IN).
- Currency contains the currency in which the client wants the price (GBP).
- And the date of travel in the format yyyy-mm-dd.
-
Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
-
jQuery: jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
- All content was written by the developer.
-
Images were found freely from the internet. For the testimonials, cartoon images were taken from Cartoonist website
-
The background image was freely available from the internet, taken specifically from WallpaperCave
-
My Mentor for continuous helpful feedback.
-
Tutor support at Code Institute for their support.