Giters

akshatnitd / milestone-project-02

This is a travel website created with HTML 5, CSS and JS where i have to add google API, Sky Scanner API and email.

Home Page:https://atiqbeenrahim.github.io/milestone-project-02/?fbclid=IwAR0FxONZlqkzICA_ERvJ5rwnekemD5S5c-8NQiGwaURMdZ5Md-4OLqM90wU

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Milestone Project 02: Interactive Frontend Development

Royal Touristz - Travel Website

View the live project here.

This is the Interactive Frontend Development project for Full Stack Software Developement course. I decided to make travel website because it has more scope to use JavaScript. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for potential visitors and customers.

User Experience (UX)

  • User stories

    • First Time Visitor Goals

      1. I want to easily understand the main purpose of the site and learn more about service.
      2. I want to be able to easily navigate throughout the site to find content.
      3. I want to look for the information and details of the company that it is experienced and trusted. I also want to locate company's social media links to see it's followings on social media to determine how trusted and known this company is.

    • Returning Visitor Goals

      1. I want to find information to contact with the company for information and services.
      2. I want find the location of it's offices in the google map.
      3. I want to find filights information from this websites directly.

    • Frequent User Goals

      1. I want to check to see if there is any newly added services or offers has announced.

  • Design

    • Colour Scheme

      • The two main colours used are pink and purple (#f64c72 and #242582).

    • Typography

      • The Playfair Display font is the main font used throughout the whole website with Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Playfair Display is a clean font used frequently in programming, so it is both attractive and appropriate.

    • Imagery

      • Imagery is important. In the Hero section, I use video clip to be striking and catch the user's attention. It also has a modern, energetic aesthetic. It will help me to promote my brand image and increase the trust of the customers.

  • Wireframes

    • Large screen Wireframe & Mobile Wireframe- View

Features

  • Responsive on all device sizes

  • Interactive elements

Technologies Used

Languages Used

Frameworks, Libraries & Programs Used

  1. Google Fonts:
    • Google fonts were used to import the 'Roboto Slab & Baloo Tomma 2' font into the style.css file which is used on all pages throughout the project.
  2. JQuery:
    • JQuery was used for interactive sections.
  3. Google API:
    • This is used for intigrate google maps with marker in the website.
  4. Rapid API (Sky Scanner):
    • This API used for intigrate flight search facility directly from website.
  5. Email JS:
    • This API used for intigrate email facility directly from website.
  6. Font Awesome:
    • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
  7. Git
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  8. GitHub:
    • GitHub is used to store the projects code after being pushed from Git.
  9. draw.io:
    • draw.io was used to create the wireframes during the design process.

Testing

The W3C Markup Validator, W3C CSS Validator and BeautifyTools JavaScript validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

Testing User Stories from User Experience (UX) Section

  • First Time Visitor Goals

    1. I want to easily understand the main purpose of the site and learn more about the developer.

      1. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a Hero section with greetings and travel qoutes with dialogues for promotion of the company.
      2. The main points are made immediately with the Hero section.
      3. The user has two options, click the navigation buttons or scroll down, both of which will lead to the same place, to learn more about the company and services.

    2. I want to be able to easily be able to navigate throughout the site to find content.

      1. 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.
      2. On the page index, navigation bar is sticky so it's always helpful to navigate around also user dosen't get lost in the pages.

    3. I want to look for the details of the Offers, Gallery and Services and see if company is 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.

      1. Once the new visitor has read the About me, they will notice the Get started button to navigate to contact section which will lead them to contact page.
      2. The user can also scroll to the bottom of any page on the site to locate social media links in the footer.

  • Returning Visitor Goals

    1. I want to find the new updates regarding his offers, informations and any new pricings.

      1. These are clearly shown in feature section for offers, gallery for ideas and search flight section to see flight pricings.
      2. They will be directed to a page with navbar or can scroll down.

    2. I want to find the best way to get in contact with the company with any questions I may have.

      1. The navigation bar clearly shown the "Contact" Page.
      2. Here they can fill out the form on the page and send message.
      3. The footer contains links to the company's Facebook, Twitter and Instagram page and it will ope up in separate tab.

Further Testing

  • The Website was tested on Google Chrome, Firefox, Internet Explorer, Microsoft Edge and Safari browsers.
  • The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
  • 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.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

  1. Log in to GitHub and locate the GitHub Repository
  2. Scroll down the Settings page until you locate the "GitHub Pages" Section.
  3. Under "Source", click the dropdown called "None" and select "Master Branch".
  4. The page will automatically refresh.
  5. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Credits

Code

  • W3_Schools: Got different kinds of solutions from this website throughout the project mainly in HTML, CSS styling and JavaScript.

Content

  • All content was written by the developer.

  • Psychological properties of colours text in the README.md was found here

Media

  • All Images and Video taken from pixabay.com.

Acknowledgements

  • My Mentor for continuous helpful feedback.

  • Tutor support at Code Institute for their support.

About

This is a travel website created with HTML 5, CSS and JS where i have to add google API, Sky Scanner API and email.

https://atiqbeenrahim.github.io/milestone-project-02/?fbclid=IwAR0FxONZlqkzICA_ERvJ5rwnekemD5S5c-8NQiGwaURMdZ5Md-4OLqM90wU

Languages

Language:HTML 40.9%Language:CSS 40.6%Language:JavaScript 14.1%Language:Shell 4.4%