Eastern European Experience

View the live project here. This is the main marketing website for Code Institute. It is designed to be responsibe and accessible on a range of devices, making it easy to navigate for potential students and partners.

User Experience (UX)

User stories
- First Time Visitor Goals
  1. As a First Time Visitor, I want to explore Eastern Europe as a potential holiday destination. The main purpose of this website is to promote Eastern European tourism for the Ukraine, Poland, Hungary and Czech Republic. For the purposes of this webite, Eastern Europe will be limited to 4 countries Poland, Ukraine, Hungary and Czech Republic.In particular, the cities of Krakow Poland, Budapest Hungary, Prague and Kiev.
  2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content that provides a historical context for each city, lists the main attractions for those cities.
  3. The website will show case the most famous attractions in each city and include a gallary feature and a map to showcase these cities
  4. The website is essentially promoting a travel booking service and will allow the customoer to exchange contsct details and be able to get into contact with the company to book.
- Returning Visitor Goals
  1. As a Returning Visitor, I want to browse the gallery and decide which city is the best visit.
  2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
- Frequent User Goals
  1. As a Frequent User, I want to see if new cities ave been added to the site packages list.
  2. As a frequent User, I want to check to see if there are any new articles or sales.
  3. As a frequesnt user, I want to sign up to t he newsletter so that I am eamailed any major updates and/or changes to the website or organisation.
Design
- Colour Scheme
  - The two main colours used are Code Insititue light prurple (#3B3380), and white.
- Typography
  - The Oswald font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. The logo was two words and was styled in the redressed font which was sourced from Google Fonts.
- Imagery
  - Particular attention was paid to the imagery of this website to promote the beauty of Eastern European architecture. The large, background hero image of Prague city was used to provide a striking visual and catch the user's attention. The hero image was cosen as it strikes the perfect balance to the timeless beauty that is the city of Prague and also vibrant and dynamic sunrise.

Wireframes
- Home, Mobile and Contact Page Wireframe - View

Features

Responsive on all device sizes
Interactive elements such as a google maps api, an interative information window within the map, an interactive javascript api automatic email service, the navigation bar is scrolls down the page with the browser, the social media icons are clickable will ligthup with a hover around the icon.
Javascript API Fancy box gallery showing 4 number of pictures and a grid.

Technologies Used

Languages Used

Frameworks, Libraries & Programs Used

Bootstrap 4.4.1:
- Bootstrap was used to assist with the responsiveness and styling of the website.
Hover.css:
- Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
Google Fonts:
- Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
Font Awesome:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
jQuery:
- jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
GitHub:
- GitHub is used to store the projects code after being pushed from Git.
Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
YouTube:
- Youtube was used to research general techincal queries relating to CSS3, HTML5 and Javascript.

Testing

The W3C Markup Validator and W3C CSS 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. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
  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.
  2. The main points are made immediately with the hero image. It showcases eastern europe as a potential travel destination.
  3. Directly under the hero image, there is a paragraph and a column of pictures show casing the four cities with a button which links to individual city webpage.
2. As a First Time Visitor, 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. At the main landing page there are 4 call to action buttons for the four cities on offer.
  3. The cities show case 4 tourist attracts which can be viewed in the gallery and google maps.
Returning Visitor Goals
1. As a Returning Visitor, I want to find the new travel package offers.
  1. I want to book a holiday or get additional information form the company interms of pricing and availabilty.
  2. They will be directed to a page with another hero image and call to action.
2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
  1. The navigation bar clearly highlights the "Contact Us" Page which is setup to recieve email to mock business account.
  2. Here they can fill out the form on the page or are told that alternatively they can message the organisation on social media.
  3. Under the hero image of each page the social media icons are positioned to link to the organisations Facebook, Twitter and Instagram.
3. As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.
  1. The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.
  2. Alternatively, the user can scroll to the bottom of the Home page to find the Facebook Group redirect card and can easily join by clicking the "Join Now!" button which like any external link, will open in a new tab to ensure they can get back to the website easily.
  3. If the user is on the "Our Favourites" page they will also be greeted with a call to action button to invite the user to the Facebook group. The user is incentivized as they are told there is a weekly favourite product posted in the group.
Frequent User Goals
1. As a Frequent User, I want to check and compare the different cites of Eastern Europe and decide to book another holiday.
  1. The user would already be comfortable with the website layout and can easily click the different cities for more information.

Further Testing

The Website was tested on Google Chrome, 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.

Known Bugs

On some mobile devices the Hero Image pushes the size of the social icons into the hero image
On some mobile devices the size of the "independence Square" text on the kiev.html.
The heading inside the info window on the map looks too big on certain mobile phones
On Microsoft Edge and Internet Explorer Browsers, all links in Navbar are pushed upwards when hovering over them.
The nabar overlaps the hero image text on some mobile phones.
Dropdown menu when you click on cities dropdown, in some mobile phones creates a border radis and it moved to the left.
According to HTML validator, the button element must not appear as a decendent of the anchor tag. I wasn't able to resolve this.
JavaScript had a number of undefined variables however teh map and info windows were fully functional and no errors

Deployment

GitHub Pages

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

Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
Scroll down the Settings page until you locate the "GitHub Pages" Section.
Under "Source", click the dropdown called "None" and select "Master Branch".
The page will automatically refresh.
Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
I cannot fork because I own the repository and I am not a member of any organisations.

Credits

Code

The full-screen hero image code came from this StackOverflow post
Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
MDN Web Docs : For Pattern Validation code. Code was modified to better fit my needs and to match an Irish phone number layout to ensure correct validation. Tutorial Found Here

Content

https://www.lonelyplanet.com/ Details regarding the cities
How to make a Responsive Travel Website using Html CSS & Javascript | Step by Step Tutorial [YouTube.comm]
How To Make Responsive Website Using Html CSS & Javascript | Gym & Fitness Web Design Tutorial [YouTube.com]
Adding Social Media Icons | HTML & CSS [Youtube.com]
Send Email directly from JavaScript | Tutorial [YouTube.com]
Googgle maps API tutourials | Google Developers [YouTube.com]
CSS Tricks Retina Display Media Query [https://css-tricks.com/snippets/css/retina-display-media-query/]
Google maps Info Window [https://developers.google.com/maps/documentation/javascript/infowindows]
Wild Atlantic Surfing website [https://github.com/Jaihsun/Wild-Atlantic-Surfing]
How to add maps using Javascript API - Geocasts Google Maps Patform [YouTube.com]
Working with markers: custom markers and marker clustering - Geocasts Google Maps Patform [YouTube.com]
Interactive Resume 2.0 - Code Institute [YouTube.com]
Sticky Navigation Bar On Scroll Using Vanilla JavaScript | [YouTube.com]
Banner image/Hero Image Tutorial with HTML and CSS [YouTube.com]
Bootstrap Grid System The Complete Guide - In Action [YouTube.com]
Learn HTML/CSS - #12 - Margins and Paddings [1080p] [YouTube.com]
Responsive Banner and Navigation Bar using Bootstrap 4 | Responsive Web Design [YouTube.com]
Animated Responsive Navbar Tutorial [YouTube.com]

Media

Acknowledgements

My Mentor for continuous helpful feedback.
Tutor support at Code Institute for their support.

code-institute-submissions / eastern-european-experience Goto Github PK