Milestone Project 2 - Ishaans Travel Agency

This is my second milestone project . I named this website called Ishaans Travel Agency.This website mainly for the travellers who wants to visit to India for short vacations.The traveller can find special packages also.

The deployed website can be found here

UX

As a designer of this website , i can say this website is different from others travel agencies. The travellers can find top six destination places in India with google map and history of the places.

I want to give the travellers with good experience for the first visit itself.The website also included packages for the visiting places with the main places to visit.

User Stories

• as a user of the website, I can easily navigate between the sections of the website.

• as a first time user of the website, I can easily know what iam looking for in the website.

• as a first time user of the website, I can quickly get a sense of what the business is about and what they offer.

• as a potential customer, I can easily locate the business' social media profiles where I will be able to get more information and read reviews.

• as a returning customer, I can quickly get in touch with the business to discuss my next vacation without necessarily having to go through the other sections.

• as a potential customer who is trying to pick a destination, I can find information on the individual cities and compare my options.

Wireframes

I draw the images how the webiste looks like so any one who wants to see ,its easy for them to understand the concept of the website.

• Navigation bar

• website concept

Features

Home:

The main feature for the home page is the Tajmahal image of the city HYDERABAd with title it displayed as WELCOME TO ISHAANS TRAVEL AGENCY. Home page is minimal and mostly an introduction to the site.

Destinations:

The destinations page has 3 main features. The first one is the images of the distination places. The second one is when you click the image it will display a modal.The third one is the modal has two sections, one is google map of the destination place with three markers and second one is history of the visiting place.

packages :

The website has packages section which shows what are the packages for the destination place and whar are the places to visit in the destination place.

Contact Us:

The contact us page has one main feature, the form you fill in to request further information. The main thing on this page though is to fill in the form and the user will be alert by a message of Thankyou for the information when they click submit.

Future Features

• The user can see videos of the distination places in the website.

• The user can search in google map in the modal what places he wants to visit.

• The user can chat live with customer care of the website so he will get details what he want.

Technologies Used

• Javascript - This was used to add the google map functionality, the modal section and the contact form functionality.
• HTML - I used this to build the entire site and each individual page.
• CSS - This was used to style the html code.
• Bootstrap Bootstrap was used to make the site responsive on all devices and add the youtube videos and the main structure of the site.
• JQuery This was used with bootstrap to allow you to place certain elements and functionality on your page.
• GitHub This allowed me to upload my local repository onto a remote server for access for anybody.
• VSCode I used this as my ide. The local repository along with all my code was stored here.
• Google Maps JavaScript API was used to render the maps

Testing

The HTML code was put through the W3C Markup Validator to check for syntax errors. Similarly, the CSS code was put through the W3C CSS Validator.

All the following testing has been carried out on smaller screens running both iOS and Android and on larger screens running both macOS and Windows in multiple browsers. In addition, Chrome's developer tools were used extensively to test on all screen sizes including medium size which I did not otherwise have access to.

I also given close attention to the following scetions:

• Navigation bar
• images
• Modals
• Maps
• Images

Tested to open the pages on all sizes available in Chrome, Firefox, but not Edge, as it only had Slider available.

• 60 x 640 Galaxy S5
• 375 x 667 iPhone 6/7/8
• 375 x 812 iPhone X
• 411 x 731 Pixel 2
• 411 x 823 Pixel 2 XL
• 414 x 736 iPhone 6/7/8 Plus
• 768 x 1024 iPad
• 1024 x 1366 iPad Pro

Deployment

Steps to deploy the website from GitHub.

Go to GitHub.

Click Repositories.

Locate milestone-project-two.

Open the repository milestone-project-two

Click Settings.

Scroll down to GitHub Pages.

Select Master branch under Source.

Credits

• the JS code for collapsing the navigation bar on small screens after clicking a link was kindly provided to me by fellow student Sarani.

• The code for modal box is taken inspiration from w3schools.