Skip to content
Stream One Project - Tee in the Sun
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
css
js
.gitignore
README.md
booking.html
index.html
pricing.html
property.html
resort.html
teeinthesun_wireframe.pdf

README.md

Tee in the Sun - a Golfing holiday home rental website

The purpose of this website is to advertise a holiday townhouse for rental on a golf resort in Spain. The site illustrates the accomodation available, the resort facilities, and offers an easy way for users to send a booking enquiry. Navigating around Tee in the Sun is straightforward with the navigation bar and has several aesthetic features which improve user experience. I have created this website to demonstrate the skills I have obtained from Stream One of the Code Institute Full Stack Web Developer course.

UX

This site is aimed at adults, families or groups who are looking for a holiday rental apartment on a golfing resort in Spain. The original site this is based off of was looking a bit dated in terms of the UI, so I wanted to rebuild the front-end of the site so that it was more appealing and had a better UX experience for the user.

User Stories

  • The user would like to view information about the resort and the property for rental: The user lands on the homepage, where they have the option via the navigation bar to look through information regarding the resort, the property and the cost of renting the property. There are images of the property and resort, and a video showing the resort facilities. There are links to social media accounts, and an interactive map.
  • The user would like to book the holiday apartment: The user has the option to go straight to the booking page. They may be a regular visitor or have visted the resort before. On the booking page, there is an enquiry form that the user can fill out with their details and desired date of stay. The form has a calculator to work out how much the users stay at the resort will cost for the rental of the property.

The site has been created with a mobile-first design, so the navigation bar shrinks down to a hamburger icon on mobile/tablet and images line up vertically. I have attached a PDF of the desktop wireframe for this site here: Wireframe PDF This wireframe was built using Mockflow

Features

Existing Features

  • Fully responsive layout at various screen sizes
  • Use of a table to display pricing options
  • Booking form with validation - a 'thank you' pop-up appears upon successful completion of the form.
  • Pricing calculator on the booking form
  • Links to social media accounts of the golf resort
  • Lightbox image pop-ups when you click on an image on the property and pricing pages.

Technologies Used

The technologies that I have used to build this site are:

  • HTML5) for the structure of the website elements.
  • CSS3 for styling of the components (e.g. colour schemes, fonts, images). I have separated the CSS content into different files for consistency and readability.
  • CSS Grid for the flexible layout of the website.
  • Bootstrap for the responsive navigation bar.
  • Google fonts (Poiret One and Arial used throughout)
  • JQuery and Javascript to enable the lightbox feature on the images and to change the colour of buttons/social media links upon hovering.
  • Javascript is also used to manage the alert box and datepicker on the booking form, and is used to power the price calculator on the booking form.
  • Git/Github for version control.

Testing

I have carried out manual testing on the site to ensure that all the features are working as they should.

  • Firstly to test the responsiveness of the site layout I checked to see how the site looked, and that features functioned correctly in various browsers (Google Chrome, Mozilla Firefox, Internet Explorer, Opera) and screen sizes (desktop, tablet and mobile phone). The bootstrap navigation bar shrinks to a minimised drop-down button in smaller screen sizes and the CSS grid layout enables the layout to react to changing screen sizes.
  • Each of the links in the navigation bar navigate to the page they are supposed to.
  • The images that have the added lightbox functionality react as a pop-up when clicked and close when the 'X' button is clicked.
  • Social media links (icons) route to the necessary social media sites
  • Booking form: Each of the fields in this form are set to be 'required', meaning there are validation features that appear if these are not complete or completed with invalid input. The phone and email input fields appear with a red outline if the input is incorrect or left blank. A guidance note also appears under the input field if this is the case. Once all fields are entered correctly and the submit button is clicked, an alert window will open at the top of the screen to indicate that the form has been submitted. The price calculator displays the cost for the stay based on the number of guests staying and number of days they are staying for.

Deployment

This project was deployed to Github Pages: The code was committed to Github, and then Github pages was configured in the settings of this repository.

Contributing

  1. Firstly you will need to clone the repository for 'Tee in the Sun' by running git clone <https://github.com/charlotteskinner90/teeinthesun.git> command
  2. Make your changes
  3. If you think the changes you have made to the code will benefit this project, please submit a pull request.

Credits

Content

  • I followed the instructions from http://lokeshdhakar.com/projects/lightbox2/ to integrate the lightbox image functionality. I adapted a small part of the Javascript to make the lightbox image resize faster than the default value (changed 700ms to 100ms, see script.js line 6)

Media

  • The photos used in this site were obtained from the original site I was rebuilding plus some additional from the site owner. The video was obtained from Youtube.

Acknowledgements

  • I would like to thank my mentor at the Code Institute Yoni Lavi for his advice and suggestions regarding using a Google Maps API integration and adding a custom Thank You pop-up rather than the in-built browser version (for better user UX)
You can’t perform that action at this time.