code-institute-submissions / ifd-milestone-project-3 Goto Github PK

Milestone Project 2: Interactive Frontend Development - Code Institute

The website is designed for public tourist attraction of Bmayn one of the province in the heart of Afghanistan. A short description of the province and the most ancient places to visit is introduced. It helps tourists to to find locations and hotels around it. The main goal of this project is to provide information for the tourists who travel from other part of the world.

Functionality

The Website is 5 pages. It include a main page as "Bamyan","History", "Guide", "Hotel" and "Contact".

1. Bamyan page gives a short introduction of Bamyan province, a link to the activities list and google API to show the location.
   
2. "History" page showes the history of Bamyan.
   
3. "Guide" page gives information to tourists where to visit.
   
4. "Hotel" page gives information about hotels and google API is used to show the locations.
   
5. "Contact" page gives oportunity for the browserr to stablish contact. It is a contact form linked with email address.

UX

the project is designed very simple and user-friendly. I have put an image background in to the main page and light grey colors to the rest of the pages to keep the pages as simple as possible. The reason i put the image in the background is to highlight the purpose of the website. in the main page there is a link to another page which gives information about different activities. There is also some pictures which showes different places. In the footer i have only one link to facebook which gives the oportunity to follow us on facebook. my user experience notes helped me a lot when i was stucking on something. my original planning and mapping is available for review in GitHub. They are linked as follow:

• Project Scope - [https://github.com/asifdanishyar/IFD-Milestone-Project/blob/master/assets/PDF-Files/Project-Scope.pdf]
• Project Skeleton - [https://github.com/asifdanishyar/IFD-Milestone-Project/blob/master/assets/PDF-Files/2ndMileStoneProject-Prototype.pdf]
• Project Schedule - [https://github.com/asifdanishyar/IFD-Milestone-Project/blob/master/assets/PDF-Files/Project%20Schedule.pdf]
• Project Structure - [https://github.com/asifdanishyar/IFD-Milestone-Project/blob/master/assets/PDF-Files/Project%20Structure.pdf]

Project expansion

The initial focus of this project is to provide information for the travellers. There is a huge scope for expansion to include travel services like by car or flights and also the possibility of linking local travel agencies to provide transportaion ease to the specific placs.

** Used Technologies**

• HTML
• CSS
• Bootstrap 4
• Javascript
• JQuery
• JSON
• GitPod
• GitHub
• Google maps API
• Google places API

Deployment

The website is created in GitPod and deployed in GitHub. Website can be found here [i should put the link of github here] The deployed site will update automatically as improvements and updates are pushed to the repository from the GitPod coding platform. All coding and initial testing was completed in GitPod. This platform was used to write the HTML, CSS and JavaScript code. The display and functionality were tested using GitPod. I used the following process to deploy written and tested code to my GitHub repository;

• git add -A "to select all the changes i made".
• git commit -m "description of commiting".
• git push... to push the changes to the repository.

Testing

Basically testing were done in dailybases as the project build was ongoing. I have used gitpod tools to test the look, size and functionality of the project. I have used multiple media queries for pages to control the size both small and large screens. Testing was carried out as the project build was going on. The website were tested in GitPod and Chrome browser in both large and small screens. During the testing i have consistently changed the CSS queries to provide good looking and make it device-friendly page. Even though i couldn't find images with best resolution but yet i tried to use CSS to ensure the presentation of the images and forms to be user friendly look.

Coding Credits

• I used Bootstrap and w3school coding plus the JS required code.
• I have got the Javascript code from google and edit it according to my needs.
• I spent lots of time on menu toggle Class which was not working when i was testing in smaller screen. I shared this issue with Slack Community, mentor, totur support and finally playing with the coding words in js, i was able to solve the issue and move forward. Of course i have got reply to my question, but it was already done.
• Credit to my mentor Sandeep Aggarwal for his recommendations and suggestions to improve my site.

Author

Asif Danishyar