This project is designed to create a travel website that has three pages that will demonstrate my ability with using HTML , CSS and JavaScript for my Milestone Two project for Code Institute. The project uses core front end technologies along with the Bootstrap front-end framework for added responsivness and for improved cross browser compatability and CSS ,JS libraries gives more details. The site also takes advantage of Google Fonts,icons to allow for more of a modern feeling typography set.

• Demo
• Project Description
• Technologies
• Libraries
• Project Features
• Project Strategy
• The scope of this project
• UI / UX
• Users stories
• Wireframes
• Testing
• Deployment
• Inspiration
• Credits

A live demo of the site can be found hosted on Github pages by following this link:

https://sree0831.github.io/Milestone-project-two/

This project is a five page HTML,CSS and Javascript travel website project, where users can explore different parts of World to travel.

1. The main page Index page welcome's you with colourful navigation , good typography, 3D image slider as hero images , travelers can explore adventures, offers, places to explore ,testimony of clients and can know more about the Destinations-travel agency with more helpful footer.
2. The second page About Us has more information about Destinations-Travel agency where you can know what we provide ,history of agency,adventures we offer to clients ,successfull tours ,newsletter to hear more from us with our clients testimony and informative footer.
3. The third page Vacation users can explore different places around world to travel , can choose best deals ,can choose more travel options with days and prices and ends with informative footer.
4. The fourth page Contact Us users can view address ,contact number with Email address represented with icons , a clear map and users can also reach us with their name ,Email and send us message !
5. The fifth page Book Now gives users to choose destination, favourite activities with a check-in and check-out dates and also a price range slider where users can select price to book a trip .

• Responsive Navigation Bar: this provides navigation around the site.
• Image slider : 3D image slider takes users attention with 3D rotation of hero images.
• About Section: this is expected to grab users attention with icons and typography about travel agency
• Images: Images are life to this project which draws users attention to wonderful places on our Earth to travel.
• Offers: grabs users attention with changing times ,discount offers and best deals .
• testimony : users can view clients reviews by moving curson on images with changing tect and color
• maps : used in contact page with appropriate use of JavaScript APIs .
• Contact: users can view address on map ,contact number and can send message to us .
• Footer: Informative footer with some useful social media links that can be used as an alternative way of contacting the website.

To complete this project I have used a variety of front end technologies.

1. HTML 5: Modern HTML with semantice elements to form the structure of the site.
2. CSS 3: Used to style the site includes flexbox and a grid system for modern layouts and responsive design.
3. JQuery: A Javascript library that has been used to add dynamism and more feautures to the website.
4. Bootsrap: A front end framework that simplifies the grid system and comes with many components and utility classes that help make front end development as easier experience.
5. Google Fonts and Icons: Allows for a wider choice of fonts and Icons.
6. Github: Used for version control and to store a remote copy of the project.
7. Github pages: a feature of Github that allows us to deploy a static website and have it hosted online.
8. Gitpod: Gitpod is an online IDE (Integrated Development Environment) which can be launched from any GitHub page.
9. VsCode: An IDE (Integrated Development Environment) that was created by Microsoft was used to build the website.
10. Balsamiq: A design tool that was used to create the wireframe mockups.

• Code Institute
• w3schools
• Bootstarp
• JavaScript
• I took reference from these libraries !

This project has a few interesting features that I feel need special mention.

• Responsive Navigation Bar: The navigation bar is sticky and changes to a dropdown menu in smaller screens.
• Navbar Background colour: Initially the navigation bar doesn't have any colour. As the user scrolls down the page the navigation bar gets a background colour applied to it. By doing this it allows the navigation links to remain visible and not get obscured by the lighter colours on some of the section backgrounds.
• Image slider : 3D imageslider as a hero image on index page takes users action on rotating images created by using JS
• Images: The images on all pages are responsive and draws users attention.
• Responsive travel cards: The travelcards in Vacation page are designed to draw attention of users with eye catching backgrounds ,images and offers users can choose to travel.
• Offers : offers in index page is created using JS which changing time in seconds,minutes,hours and days.
• Testimony : users can view clients reviews by moving cursors on images and with changed text ,created by using JS
• Contact Form : The form takes users input and can take users message with a map of travel agency address using JS and API.
• Footer : Users have inforamtive footer with social links.
• Footer Date: The date on the footer updates itself automatically through the use of JQuery.

When creating this project I needed to develop an overall strategy which would help me to understand the purpose of this project. I needed to keep these ideas in mind when implementing the completed design.

1. Demonstrate the skills that I have acquired from the Code Institute curriculam thus far and pass the assesment criteria of Code Institute.
2. Create a fully featured front end project that I can use to draw attention to my skills and attract potential users/clients.

With these criteria in mind I determined that a five page fun colourful travel website would be the best option. It would make navigation and organization of the data simple. It would allow me to showcase some of my design ability in creating 3D image slider using JavaScript, date changer in offers and allow me to focus on primarily HTML , CSS and JavaScript , though it lack overall complexity ,which I can accomplish by using more technologies in coming projects . I needed to be careful not to overload the user with too much information in the form of text as this could lead to a very cluttered looking site.

The main scope of this project was to demonstrate what I have learned thus far in the Code Institute course with regards to HTML , CSS, JavaScript and I tried to use the best colour combination, the type of fonts, icons ,images and the best layout options for this project.

The main scope of this project was to demonstrate what I have learned thus far in the Code Institute course with regards to HTML , CSS and JavaScript. With this in mind I needed to be careful that I didn't get distracted with trying to be overly complex remembering the examination criteria.

A secondary part of the scope for me was to create an attractive site using the above mentioned technologies. For this reason I spent lots of time exploring and deciding to use more CSS libraries, JS libraries for the best colour combination, the type of fonts,icons and the best layout options for this project.

The layout and content of the site has been carfully curated to logically tell the user about Destinations travel-agency. The 3D slider section contains an eye catching images that attracts users to explore new places and is designed to grab attention with more offers. The about us page informs the user about our travel agency and gives them information about their travel options. The Vacation page highlights users with more travel destinations according to their desires. The contact section allows the user to get in touch with us for further information about their travels with interactive map on our location.Finally book now page allows users to book their destination with options to choose activities ,check-in and check-out date with price select slider to book their trip.

To help develop the site I created some user stories from my perspective as the site owner, along with user stories for potential employeers or clients. By doing this, it helped me to identify what was important information that needed to be included and also helped me to identify things that I could leave out so that the site doesn't become overly bloated with content or difficult to navigate.

1. As the owner I would like a site that will attract users with eye catching colors ,images and inforamtion.
2. As the owner I would like a site that would allow users to navigate easily.
3. As the owner I would like a site that would showcase travel options with more exciting deals and offers.
4. As the owner I would like a site that would allow a member of the public to contact me.

1. As a user I would like to get a feel to explore more after first look of the site.
2. As a user I would like to get a feel of having more options to choose destinations for travelling.
3. As a user I would like to see more offers ,exciting deals and images of places to explore.
4. As a user I would like to be able to contact the site owner in an easy manner.

To help visualize the website I created wireframes of what the site would look like on desktop as well as what it would look like on mobile devices. The wireframes can be found here:

To implement this project successfully I made certain design decisions that had an impact on the project some of these decisions are:

Bootstrap is used throughout this project. The use of Bootsrap was choosen as it presented many advantages. The main adavantages of Bootsrap was that it allowed for a complex page layout with the use of its grid system and flexbox utilities. Bootstrap also contains many useful margin and padding classes that reduced the need for repitive CSS . Bootstrap also helped with cross browser compatability. The downsides to using Bootsrap is that it made the HTML code difficult to read and overly complex with regards to the many classes that are applied to the HTML elements. One final area that Bootstrap had an negative affect on the project was when it came to testing using the CSS validator. The CSS validator did not regonize alot of Bootstrap CSS as valid and raised a lot of errors but if you copy and paste my code directly from style.css into the CSS validator it displays no errors.

I used the Bootstrap container class extensively throughout this project as I felt it improved the overall look of the site. The container-fluid class is often used as a default by alot of developers but i feel that it places content (espically text content) too close to the screen edges. Most peoples eyes are drawn towards the center of the screen and I feel that by using the container class it provides a better user experience.

The use of fonts was also carefully considered in this project.I mainly used Roboto, sans-serif fonts for all my text and headings .

I used most of the libraries for my site icons ,carousel, animations and for date picker.

For this project I did my best to keep the amount of text to a minimum so as to not overwhelm the user with useless or unneccessary information. With this in mind I tried to keep each block of text to about fifty words. Except for about page where I have to give description about travel agency .

Throughout the process of developing this site I regularly checked my code using the W3Schools HTML ,CSS validators and JavaScript validators online.

The results of the HTML validation can be seen in the below image:

The CSS validator highlighted a lot of issues and errors when the site was tested by using the URL as input. This is because the site is also testing the Bootstrap style sheet and it does not recognize CSS variables as valid CSS .

The reults of the URL input test can be seen in the screenshot below where it is highlighted that the Bootstrap stylesheet is the cause of the errors:

🐛

When the CSS is inputed directly can clearly see that there is no fault with any of the CSS that I have created directly as is shown in the below image:

The results of the JS validation can be seen in the below image:

For responsivness I checked a website called am I responvie. I also checked how the site looked on a variety of devices and browsers. The devices that I checked the site on were:

1. 15 inch HP Laptop
2. 13 inch Macbook pro
3. 21 inch desktop PC
4. Samsung galaxy phone
5. Iphone 4/5/6/7/8/X
6. BlackBerry The site looked great on all these devices and didn't seem to show any problems.

The browsers I used for testing are as follows:

1. Google Chrome
2. Firefox
3. Safari
4. Microsoft Edge
5. Microsoft Internet Explorer

The site looked perfect and responsive :

# Create a new local git repository
git init

# Add individual  files 

git add index.html
git add about.html
git add Vacation.html
git add contact.html
git add book.html

# Add all files 

git add .

# Check the git status to double-check that they've been
# added
git status

# Did my first commit
git commit -m "Initial commit"

# Add a remote
git remote add origin <project url>

# Push from our local repository to the remote
git push -u origin master
    

This site is deployed using a feature of Github known as Github Pages. To make your site go live on the internet you need to follow the following steps:

1. Select the repository that you wish to make live.
2. Make sure that the home page is called index.html
3. At the top of the page click on the settings tab.
4. Once in the settings section scroll down the page untill you get to a section called github pages.
5. Where the option exits to select a branch to deploy change the option from none to master branch.
6. If you have followed these steps correctly the page should reload.
7. Scroll back down to the github pages section and you should see a message that reads something like this: your site is ready to be deployed at username.github.io/example
8. Wait for a few minutes and refresh the page and the if successfully the message should now read: Your site is published at ...

To create a local copy of the project you can select the repository and just above the readme file you will see a button that gives you the option to download or clone the file.

This project would not have been possible without the following:

• The text in content page is copied from https://www.wikipedia.org/
• The photos used in this site were obtained from https://www.google.com/webhp?hl=en&sa=X&ved=0ahUKEwjJy6KX_-3nAhUIqYsKHaxzBsQQPAgH
• icons were sourced from https://fontawesome.com/
• images were taken from https://unsplash.com/
• CSS and JavaScript libraries.
• For my Mentor who guided me in building this website.

• From my 8 year old Daughter who always encourages me with her ideas and suggestions in building this project ! 🤔