This project is designed to showcase a front end design built with the following
'Now-Tour' website was created to help showcase a highly interactive aproach to booking a holiday. There are many travel websites in the current market place, but many fail to deliver on getting a balance between use of narrative, imagery and interactive website functionality.
A single page website has been created to avoid the user having to navigate to many web pages that can result in a frustrating user experience.
- The User holiday experience starts by their use of Now-Tour website
- Great holiday product offerings are made available
- Access to bespoke holiday experiences happen via Contact Us function
- Ease of booking, preferably via website or telephone
- Clear information on holiday packages, with guidance notes on local tradition, customs and required innoculations
- Promotion of the latest holiday and custom experiences to generate customer demand
- Regularly market new holiday experiences to help leverage customer interest
- Secure access required to customer details for efficient payment and delivery of holiday experiences
- Social media link access to further promote Now-Tour and encourage both direct and indirect holiday bookings
- Increase product density through expanding scope of products the ultimate holiday experience
- Leverage footfall data to attract commercial online advertising, with resultant revenues used to maintain and grow website
- Affiliate with holiday experience vendors to encourage exclusivity on new holiday experiences
- Explore new social media channels to promote 'Now-Tour'
- New website to be a one page design
- Holiday pricing and booking function to be closely aligned and preferably built in the same container
- Promote high end holiday experiences
- Include links tohelp user navigate easily within same webpage
- Stunning images of holiday destinations must be on show
- A 'Contact Us' form must be present to support user in requesting further information on 'Now-Tour'
- Navbar design to include links to other webpages such as 'Home', 'Tours', 'About Us', 'Offer' and 'Contact Us'
- Allow for future development into a formal e-commerce website
Bootstrap was the chosen framework for styling my project. I used the Bootstrap grid extensively to support responsiveness on mobile, tablet and desktop devices.
Colours used in this project were sourced from visme.co. Essentially, the colours are seeking to capture key attributes of travel through new horizons, fun, energy and relaxation.
| Colour | Hex Code |
|---|---|
| Royal Blue | #3486E5 |
| Very Light Grey | #F2F2F2 |
| White Colour | #FFFFFF |
| Gun Metal Grey | #4D4D4D |
| Pencil Grey | #808080 |
| Foggy Grey | #B3B3B3 |
| Charcoal Grey | #333333 |
| Smokey Grey | #EEEEEE |
| Black | #000000 |
Vollkorn and sans-serif fonts were used throughout this project.
Font Awesome 5 icon graphics were used in conjunction with Bootstrap 4, primarily to support the features section, as viewed in index.html page
| Page | Function | Font |
|---|---|---|
| index.html | Return to top button | fas fa-angle-double-up |
For all device viewpoints, the navbar offers 4 functions on show. The navbar has been designed to both collapse and open on all devices / viewpoints via a Javascript toggle control
- Home
- Tours
- About Us
- Offer
- Contact
• HTML used as the markup language
• CSS used to style the HTML
• JavaScript used mostly for DOM manipulation
• Bootstrap used to enable styling of front page and support aesthetic design
• jQuery used The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with
• Font Awesome to provide the font icons for Papa's Tops Pizza website
• AWS Cloud9 a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser
• Balsamiq is a small graphical tool to sketch out user interfaces, for websites and web / desktop / mobile applications and used to visualise my project through mock-up design
• Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency
• Jigsaw - CSS validation this validator checks the markup validity of CSS style sheet and ensure coding convention is upheld
• JS Hint a tool that helps to detect errors and potential problems in the javascript code
• W3C - HTML validation this validator checks the markup validity of HTML web documents
• GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere
The following browsers were used in testing 'Now-Tour' application. Internet Explorer was out of scope for testing due to obsolete capability
| platform | version |
|---|---|
| Chrome | 110.0.5481.78 |
| Edge | 110.0.1587.41 |
| Firefox | 109.0 |
| Safari | 16.3 |
| Opera | 95.0.4635.25 |
The following media queries were added to improve the project responsiveness on all tested devices.
| Media Query | Device | Class | Comments |
|---|
This app was developed using the AWS Cloud9 IDE, committed to git and pushed to GitHub using the built in function within Cloud9.
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub
- From the list of repositories on the screen, select Spagettileg/now-tour
- From the menu items near the top of the page, select Settings
- Scroll down to the GitHub Pages section
- Under Source click the drop-down menu labelled None and select Main Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website
To clone this project from GitHub:
- Follow this link to the Project GitHub repository
- Under the repository name, click "Clone or download"
- In the Clone with HTTPs section, copy the clone URL for the repository
- In your local IDE open Ubuntu Bash
- Change the current working directory to the location where you want the cloned directory to be made
- Type
git clone, and then paste the URL you copied in Step 3
git clone https://github.com/USERNAME/REPOSITORY
- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub
- Balloon drift animation idea was sourced from Udemy, with the actual balloon image and flight direction of the balloon updated for improved UI
- All images were sourced from Pixabay and are royalty free
This site is used for educational purposes only.