Giter VIP home page Giter VIP logo

javascript-project-italian-tour's Introduction

Italian Tours 2020

This website is used to promote three different areas in Italy.

  • Rome
  • Abruzzo
  • Sicily

UX

Who is this website for?

  • This website is for people who are thinking of visiting Italy and want more information.
  • This website is for people based worldwide looking to travel for a holiday or extended stay.
  • Three different types of holidays:
    • Rome - City break
    • Abruzzo - Nature lovers holiday.
    • Sicily - Beach lovers holiday
  • It is aimed at people aged 18+ with disposable income.

What do visitors want?

  • Clear information on the three featured areas.
  • Information on attractions in each place.
  • Information on hotels and how to book.
  • Clear contact form to get more information if required.
  • A trustworthy, easy to navigate site that gives clear information about the featured areas.
  • Multiple ways to contact the page admin's including links to social media pages.

Business Goals:

  1. Build on and extend the awareness around these areas.
  2. Showcase attractions and hotels in each area.
  3. Promote Italy as a destination for every kind of holiday, relaxing beach break in Sicily.
  4. Nature lovers holiday in wild Abruzzo and finally a city of culture break in Rome.
  5. Using links to wikipedia and tripadvisor, potential clients have access to multiple information
  6. sources to help plan their holiday.
  7. Promote social media pages.

Customer Goals:

First time customer

  1. Is this site trusthworthy and easy to navigate?
  2. Is the purpose of this site clear?
  3. Do I understand the information provided by the site?
  4. Is the information provided relevant to my needs?
  5. How can I contact them to ask for more information?
  6. Can I see some of the sights I can expect to see in these areas?
  7. Can I look at potential hotels?
  8. Can I follow this site on social media for more updates?

Repeat customers

  1. If I have more questions can I easily contact them?
  2. Can I leave an online review?
  3. Can I use this site to book a hotel?
  4. Can I follow this business on social media?

Strategy

  • An easy to navigate website to promote the tourism web page and its social media accounts.
  • Promote the three regions to help boost tourism in the specific areas by highlighting the attractions located in each.

Scope

  • How to book hotels?.
  • What the regions have to offer?
    • Rome - City break
    • Abruzzo - Nature lovers holiday.
    • Sicily - Sun worshippers holiday.
  • A gallery to show pictures of the items on offer here.
  • How to contact for further information.
  • A review section.
  • An about section to give a brief history of the business.

Structure

  • A minimalist site with clear sections for each region and hotels for those regions.
  • A clear easy to use contact form and social media links.
  • Good flow through the page so the user knows what to expect and how to find information.
  • An easy to find and use contact form, with a button on the hero image that links straight to the contact form making it more convienent for repeat users.
  • Multiple social media links to appeal to more users.

Skeleton

  • Nav bar featuring links to various areas in the site.
  • Hero image with a welcome paaragraph about Italy featuring a contact button for ease of use.
  • Clickable links to tripadvisor and wikipedia for hotel bookings and info.
  • Contact for with email address, message, phone number, name.
  • Section with address, e-mail and telephone number.
  • Footer with social media links, legal info.

Surface

  • Colors used:
  • #36454f charcoal,
  • #ffffec cream,
  • #f2f2f2 off-white,
  • rgb(193, 238, 253) lightblue,
  • rgb(0, 204, 255) blue,
  • red
  • Fonts used:
  • "Dancing Script", cursive
  • "Roboto", sans-serif
  • Images:
  • All from Unsplash.com

Features

Hero Image

  • A home page with a hero image and company logo in the nav bar.
  • About us section with details of opening hours, address, e-mail address and phone number.
  • A review section featuring customers reviews and images.

Rome

  • Hero image with info text.
  • Image with link to Wikipedia info page for attractions.
  • Image with link to Tripadvisor info page for hotels.

Abruzzo

  • Hero image with info text.
  • Image with link to Wikipedia info page for attractions.
  • Image with link to Tripadvisor info page for hotels.

Sicily

  • Hero image with info text.
  • Image with link to Wikipedia info page for attractions.
  • Image with link to Tripadvisor info page for hotels.

Contact Form

  • Featuring an area for users to request info if needed.

Google Map

  • Interactive map featuring markers with info windows.

Features left to implement

In the future I would like to build on to this site by adding:

  • An online booking system.
  • A section for users to post their pictures to the page.

Technologies used:

  • HTML5
  • CSS3
  • Bootstrap 4
  • JS
  • jQuery
  • Font Awesome
  • Google Fonts
  • Google Maps

Testing

  • Located in seperate file (assets.testing.md)

User stories

  • Customer Goals
  • Business Goals
  • Repeat Customer Goals

Manual Testing Links

Tested on

  • Windows 10
  • Microsoft Edge
  • Apple Macbook Project
  • Samsung Galaxy Tab A 8.0
  • Various devices screens available on DevTools

Deployment

Deploy from GitHub

  • Sign into GitHub and access your repositories.
  • Select desired repository.
  • Once clicked on, this bring you to a code and deploy page which contains details of your READme.md, a description of the repository details and other info.
  • Located near the top, under the repository name is a tool bar. At the end of this bar is a settings selector.
  • Click on settings and scrool down to GitHub Pages. Here you will click on the dropdown menu under source. (Currently showing "None"), click on this and select "Master", click save. Page will automatically refresh. Once refreshed, scroll down to find the link to your website high-lighted in green.
  • Click on this or copy and paste into browser to access your site.

Run project locally

  • If you have a GitHub account you will need to log in. If not you will need to sign up at https://www.GitHub.com/ to access this file.
  • To run project, go to the repository for that project and click on it.
  • Click the Green button to start the repositroy. This should only be clicked once as each time it is clicked it opens a new copy of the GitHub workspace.
  • The workspace is now open to be viewed and edited locally.

To clone repository so it can be used in different editors effectively

  • To clone select desired repository.
  • Once clicked on, this bring you to a code and deploy page which contains details of your READme.md, a description of the repository details and other info.
  • Located beside the green gitpod button is a button with "Code" written on it. Here you will find a drop-down menu, that when selected gives you the option to clone or download the repository file.

Credits

Code used

  • For my navbar I used code from W3Schools/bootstrap with jquery and popper.js.
  • CSS for the row and column class for the menu page was taken from W3Schools.
  • The CSS for my hero-text was taken from W3Schools and amended to suit.

Images

  • All images used in this project were taken from Unsplash.com
  • All icons taken from font awesome.

Content

  • Content for this Milestone 2 Project was created by myself, Irene Neville, with help from the Code Institute and my mentor Brian Macharia, and other exceptions previously stated.

Media

  • All media from Unsplash.com

Acknowledgements

I would like to take this opportunity to thank my mentor Brian Macharia for all his help during this project and to Anna Gilhespy and Haley Schafer for ideas on how to complete a READMEmd.

I would also like to thank the student support team, all on the CI Slack community and everyone at Code Institute for helpful advise, videos and content.

javascript-project-italian-tour's People

Contributors

irenenev24 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.