Here is a link to the final project

• The initial idea for this project was to create a website where a user to be able to get help on selecting a romantic getaways or a honeymoons destination. While also being able to use the website destination picker that gives them more information and the exact location.

• User Experience

  • User Stories

• Design

  • Color Scheme

• Wireframes

• Features

  • Future Implementations

• Solved Bugs

• Unfixed olved Bugs

• Technologies Used

  • Languages
  • Design
  • Database

• Deployment

  • Initial Deployment
  • How To Fork A Repository
  • How To Clone A Repository
  • How To Make A Local Clone

• Testing

  • Code Validators

• Content

  • Images
  • Text Content

• Acknowledgements

Back To Top

• As a user, I would like to be able to …

1. Easily navigate throughout the website;
2. Check different place options to a romantic trip on map;
3. Be able to check place details when click on map mark;
4. Be able to find information about romantic and honeymoon gateways;

The colour scheme was generated using hero image, and coolors to generate the colour pallet.

Back To Top

Wireframes were created using Balsamiq and exported into a pdf format, which can be viewed here

• Fixed Navbar with Home, Destination Picker, Getaways and tips options to allow the user easy access to all sections.

• Collapsed navbar on smaller devices to wrap in all options and assure better navbar design.

• Google maps with markers on listed romantic destinations

• When users click on a destination, they can check the place with a zoom in and a pop up modal with destination details shown on the centre of the page.

• Divided into two - Romantic and Honeymoon - users can find several destinations accordingly with their interest.

• Divided into three areas - site name, team, social media links. The team name links allow the user to access each team member's GitHub page.

Back To Top

• Add more destinations on Json file;
• Add google street view map on detail's information modal.

No major bugs were found during the production of this project, just a few typos and stray tags

Google Maps API markers don't have any label on them, resulting in an error on the Wave report.

This accessibility bug will be solved in a future release by adding an overlay feature on each marker.

Back To Top

Am i Responsive was used to create the image in my Final Design section.

Bootstrap was used to assist with the style and responsiveness.

Favicon was used to create favicon for the website.

Firefox Developer Tools was used for troubleshooting and trying new visual changes without it affecting the current code.

Git was used for version control by using the Gitpod terminal to add and commit to Git and push to Github.

GitPod was used as an IDE whilst coding this site.

GitHub is being used to store all the code for this project after being pushed from GitPod.

Lighthouse was used to ensure that the site was performing well, conforming to best practices, SEO and Accessibility guidelines.

Font Awesome was used for a few icons in the footer on all of this site's pages.

Google Fonts was used for all the text content on the site pages.

Balsamiq was used in the initial design process to make wireframes.

Coolors was used for the colour palette on the page, based on the hero image.

This site was deployed using GitHub Pages with the following the steps below:

1. Login or Sign Up to GitHub.
2. Create a new repository named "HoliDates".
3. Once created, click on "Settings" on the navigation bar under the repository title.
4. Click on "Pages", on the left hand side below Secrets.
5. Under "Source", choose which branch you wish to deploy, In most cases it will be "main".
6. Choose which folder to deploy from, generally from "/root".
7. Click "Save", then wait for it to be deployed. It may take some time for the page to be fully deployed.
8. The URL will be displayed above the "source" section in GitHub Pages.

If you need to make a copy of a repository:

1. Login or Sign Up to GitHub.
2. On GitHub, go to manni8436/HoliDates.
3. In the top right corner, click "Fork".

If you need to make a clone:

1. Login in to GitHub.
2. Fork the repository "manni8436/HoliDates" using the steps above in How To Fork a Repository.
3. Above the file list, click "Code".
4. Choose if you want to close using HTTPS, SSH or GitHub CLI, then click the copy button to the right.
5. Open Git Bash.
6. Change the directory to where you want your clone to go.
7. Type git clone and then paste the URL you copied in step 4.
8. Press Enter to create your clone.

If you need to make a local clone:

1. Login in to GitHub.
2. Under the repository name, above the list of files, click "Code".
3. Here you can either Clone or Download the repository.
4. You should close the repository using HTTPS, clicking on the icon to copy the link.
5. Open Git Bash.
6. Change the current working directory to the new location, where you want the cloned directory to be.
7. Type git clone and then paste the URL you copied in step 4.
8. Press Enter, and your local clone will be created.

• HTML

  Passing the HTML from index into the (X)HTML5 Validator no errors or warnings have been found Validator.nu.

Code Validation results:

Index Page

• CSS

No errors were found when passing through the official CSSlint.

CSS validation results can be viewed here

25 (not relevant) warning have been found.

CSS validation warnings can be viewed here Index Page

• JavaScript

Both javascript files have been tested with the jshint and no error were been found.

Reports can be found on links:

maps.js   floatingText.js  

Click Here to view the full testing steps that were completed on every device and browser.

Lighthouse tools have also been used to ensure SEO and achieve high performance on the website.

The website was verified about accessibility using Wave.

The report and errors can be viewed here:

The nine errors found on this page are related to Google Maps API markers. Those will be fixed in a future release.

• All pictures and images used in this project are from Unsplash or Pexels.

All text content used in this project can be seen below.

• Description

• Venice
• Salzburg
• Barcelona
• Bruges
• Rome
• Cliffs of Moher
• Lucerne

• Tips

• Paris
• Venice
• Salzburg
• Barcelona
• Bruges
• Rome
• Cliffs of Moher
• Lucerne

• Stack Overflow as a valuable resource for solving a several issues.
• W3schools for general reference.
• Google Developer for general reference about google maps API.

Back To Top