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.
- As a user, I would like to be able to …
- Easily navigate throughout the website;
- Check different place options to a romantic trip on map;
- Be able to check place details when click on map mark;
- Be able to find information about romantic and honeymoon gateways;
- The site needs to be easily accessible.
- The navigation menu needs to be simple to use on a range of devices, including desktop, tablet and mobile.
- Manoeuvreing around the site should be simple and straightforward.
- The site should be informative and all the text should be easy to read.
- The images should be clear and not stretched or squashed.
- The site to be self explanatory on how the site is used.
- All the content to be easily read and understandable.
- Google maps to be easy to understand how to be used.
- To find new never been to before destinations.
- Recommend the site to friends and family.
- To get tips and tricks for current holiday destination planned.
The colour scheme was generated using hero image, and coolors to generate the colour pallet.
Wireframes were created using Balsamiq and exported into a pdf format, which can be viewed here
- Fixed Navbar with Home, Destination Picker, and Getaways 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 - Weekend 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.
- 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.
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.
Chrome DevTools 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.
Visual Studio Code was also used as an IDE for code development
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:
- Login or Sign Up to GitHub.
- Create a new repository named "HoliDates".
- Once created, click on "Settings" on the navigation bar under the repository title.
- Click on "Pages", on the left hand side below Secrets.
- Under "Source", choose which branch you wish to deploy, In most cases it will be "main".
- Choose which folder to deploy from, generally from "/root".
- Click "Save", then wait for it to be deployed. It may take some time for the page to be fully deployed.
- The URL will be displayed above the "source" section in GitHub Pages.
Important: don't forget to add your own Google Maps API key. Without it, map won't be displayed
If you need to make a copy of a repository:
- Login or Sign Up to GitHub.
- On GitHub, go to manni8436/HoliDates.
- In the top right corner, click "Fork".
If you need to make a clone:
- Login in to GitHub.
- Fork the repository "manni8436/HoliDates" using the steps above in How To Fork a Repository.
- Above the file list, click "Code".
- Choose if you want to close using HTTPS, SSH or GitHub CLI, then click the copy button to the right.
- Open Git Bash.
- Change the directory to where you want your clone to go.
- Type git clone and then paste the URL you copied in step 4.
- Press Enter to create your clone.
If you need to make a local clone:
- Login in to GitHub.
- Under the repository name, above the list of files, click "Code".
- Here you can either Clone or Download the repository.
- You should close the repository using HTTPS, clicking on the icon to copy the link.
- Open Git Bash.
- Change the current working directory to the new location, where you want the cloned directory to be.
- Type git clone and then paste the URL you copied in step 4.
- 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:
- 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:
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 text content used in this project can be seen below.
- Description
- Tips
- Stack Overflow as a valuable resource for solving a several issues.
- W3schools for general reference.
- Google Developer for general reference about google maps API.
- Code Institute base html and css code taken from the Love Running walkthrough, and adapted.