The project I chose to do is a booking website that provides the user with information about everything they need to plan a trip. It consists of two pages, the first page allows the users to find hotels in any part of the world by just entering the city and the country they are visting. The second page helps the users to look for famous sites, restaurants and any place wherever they are going. My website is simple, only providing what is related to the trips with easy navigation back and forth between both the pages. I used a colour scheme that would catch the user's eye and it also is the same colour pattern on both pages to show consistency.

This website is mainly for users who are planning on a trip and they would like to check prices, destinations and everything related to their trip. It contains all necessary information to help users decide on a destination, a responsive map is provided to show them the exact positions of hotels and other places, along with star ratings and person-like icon that allows the users to drag it onto the map and they would be able to see real-time view of the places that they are looking up.

Below are a couple of user experiences upon which the website was built-up:

1. As a user, I should be able to communicate with the agency to get all the information that I need before I book.

2. As a traveler, I want to be able to look up places to plan a good trip and not be limited to the places provided on the site.

I used Balsamiq wireframe to demonstrate my ideas, this is a link to the wireframe:

https://balsamiq.cloud/somd7fy/pllh0kf

Navbar- the navbar allows to the user to go back to the main page when clicking on the logo, the dropdown navbar is made for mobile users to help them go back and forth between the two pages since the box with the tablinks do not show up on small screens.

landing page- on the first page, a tab shows up that allows the user to "search for hotels" - it goes down to the map section. if the users chooses to click on the explore part, they are taken to the second page where they are able to look for places by clicking on the "find places" button.

maps- on both pages, maps are provided to be able to look for hotels(first page) and other places(second page). the maps have an autocomplete feature that helps the users in their searches, users could look in any country and maps are not restricted to only a few countries. ratings, telephone numbers and all the necessary information are given when users look for hotels. when looking in the explore page, the full address is given when the user chooses a place. As mentioned before, a person-like icon allows the users to drag it to be able to have a clear look at the restaurants, streets or any place that they are looking for.

Famous Holiday destinations- this section-on the first page- shows 3 famous holiday destinations to give the traveler an idea to start off with, incase they do not have a country in mind.

Booking with us- this is a section on the second page that gives a positive thought to the users, ensure them that they are in the right hands.

Contact- allows the users to communicate the booking team, to make a booking or complaints or just to get in touch to be provided with more information.

I would like to add a payment page, and a flight section for the users to be able to book their flights and pay on their own. As the booking lines could get busy and users would like to carry out the transactions on their own.

A multiple of technologies were used in the making of this website, Such as: HTML5,CSS were used to write the code and design it and Javascript was added to give functionality to some aspects. Frameworks like Bootstrap was added to help out with the layout design and make the website look better and satisfy the user experience. A library such as W3Schools helped in identifying the style and the understanding of some features implemented in the website.

My website was tested using various methods, including the "Inscpect" feature on the browser and choosing different devices. responsinator.com was also used in the testing to make sure the content shows on different device sizes. According to the User Experiences mentioned in the UX section, the users wanted a communication platform and the ability to look places, hotels etc. Therefore, a contact form was provided along with responsive maps that have a search bar to help them look for places anywhere in the world.

Contact form:

1. Go to the contact section
2. without filling in the form, try to send the form
3. the form will ask the user to fill in the fields, by showing a "Please fill out this field" message.
4. Now, fill in the form
5. Click the send button
6. The Message written will be sent to the email associated with the website.

The look of my website on different sized devices and browsers is as follows:

Large Screens(min-width=900px):

1. Both pages have a landing page with a background image and a box that has tabs to navigate through the website
2. the maps adapt great to the screen size, the search box changes size accordingly.
3. the contact form is shown,right aligned as well as "booking with us" section.
4. the navbar continues to have the dropdown menu incase the users just want to go to the other page without going through the content.
5. on the first page, "famous holiday destinations" part, all 3 boxes are next to one another, equally sized.

Medium Screens (min-width=670px):

1. Like in the large screens, the landing page has both the background image and tab box shown.
2. the maps adapt to the page size as well as the search box.
3. contact form, booking with us are all right aligned.
4. on the first page, "famous holiday destinations" part, all 3 boxes are next to one another, equally sized.

Small Screens (max-width=600px):

1. Unlike larger screens, the landing pages do not have the section with the background image and tab box shown. And, that is why the dropdown menu was provided to allow users of small screens to navigate between the pages.
2. the maps adapt to the sizing of the device and the search box as well.
3. the contact form, "booking with us" are right-aligned and fully shown.
4. the "famous holiday destinations" part, all 3 boxes are aligned vertically one above the other and contents fully shown.

Bugs:

I did not come across any bug during my testing.

The process of deploying the project to GitHub was as follows:

1. After successfully pushing the files to GitHub,start the deployment.

2. I went on settings and to the page section, changed the branch name to Master Branch.

3. A link was operated and that was the Live URL to my website.

Deployment: is making the website Live and accessible by anyone who opens the link provided.

Development: is using Git commands to upload the file used in the making of the website to GitHub in order to be downloaded or viewed by the assesor and checked.

To run my code locally, and ensure that it perfectly works, the user should download the source files used along with the HTML code and run it on their device.

The text used in the "Famous Holiday Destinations 2018/2019"

Marrakech, Morocco: https://www.google.com/destination?q=marrakech&sa=X&rlz=1C1CHBD_enES842ES842&output=search&dest_mid=/m/054rw#dest_mid=/m/054rw&tcfs=EhUKCC9tLzA1NHJ3EglNYXJyYWtlc2g

Tokyo, Japan: https://www.google.com/destination?q=tokyo&rlz=1C1CHBD_enES842ES842&output=search&dest_mid=/m/07dfk&sa=X&ved=2ahUKEwiV8LzI9ariAhVQbBoKHVsOBD4Qri4wJHoECBAQAw#dest_mid=/m/07dfk&tcfs=EhEKCC9tLzA3ZGZrEgVUb2t5bw

Maldives: https://www.google.com/destination?q=maldives&rlz=1C1CHBD_enES842ES842&output=search&dest_mid=/m/04ty8&sa=X&ved=2ahUKEwjm1PKx9ariAhUJXRoKHdIVDucQri4wJ3oECBAQAw#dest_mid=/m/04ty8&tcfs=EhQKCC9tLzA0dHk4EghNYWxkaXZlcw

First page background image: https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwiImMC_qaviAhWFyoUKHaCjCN8QjRx6BAgBEAU&url=https%3A%2F%2Fwww.andrevicentegoncalves.com%2Fshop%2Fproduct-prints%2Fwindows-of-the-world-chefchaouen-morocco&psig=AOvVaw0_ErV8do9iUsqyEy9qt4SE&ust=1558483466141367

Second page background image: https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjfpubkqaviAhXE7eAKHdE-B14QjRx6BAgBEAU&url=https%3A%2F%2Fwww.worldtravelguide.net%2Ffeatures%2Fcity-highlight%2Fcity-highlight-beijing%2F&psig=AOvVaw0ffk4u6c7oOliuts3-sU5k&ust=1558483548301157

Marrakech, Morocco image: https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjQ7r-FqqviAhWHlxQKHSDfDJIQjRx6BAgBEAU&url=https%3A%2F%2Fwww.traveltodesert.com%2Fproduit%2Fprivate-morocco-desert-trip-from-marrakech-to-merzouga%2F&psig=AOvVaw0C5VRzVEbUPMdK6f07jRha&ust=1558483440665249

Tokyo, Japan: https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi4gbaiqqviAhUl8uAKHUG4CCYQjRx6BAgBEAU&url=%2Furl%3Fsa%3Di%26source%3Dimages%26cd%3D%26ved%3D%26url%3D%252Furl%253Fsa%253Di%2526source%253Dimages%2526cd%253D%2526ved%253D2ahUKEwjC-PuhqqviAhWJEBQKHXGiDa0QjRx6BAgBEAU%2526url%253Dhttps%25253A%25252F%25252Fwww.cntraveler.com%25252Fdestinations%25252Ftokyo%2526psig%253DAOvVaw2fQhK1Td0dh1yPzs38vhEA%2526ust%253D1558483656725152%26psig%3DAOvVaw2fQhK1Td0dh1yPzs38vhEA%26ust%3D1558483656725152&psig=AOvVaw2fQhK1Td0dh1yPzs38vhEA&ust=1558483656725152

Maldives: https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwic1ZiwqqviAhX9DGMBHYGuBYcQjRx6BAgBEAU&url=https%3A%2F%2Fwww.booking.com%2Fhotel%2Fmv%2Fmercure-maldives-kooddoo-resort.html&psig=AOvVaw2vNt5dyhvGDbwscoWiLK3J&ust=1558483702627291

I received inspiration for this website from a couple of booking/ travel websites including: Booking.com , Airbnb. I have combined my ideas with modern website styles and came up with my website.