View the live project here.

This is the main website for the company Hotelier Academy. The purpose of this website is to market the business by explaining what the Hotelier Academy training platform is, the features and the benefits to the hotel industry. The target audience is b2b users.

The design is a desktop first approach as that is the main device the target audience is using. However the website is fully responsive at its core and will be able to deliver its goals through any device.

The central design philosophy for the website is a text driven design with some complimentary images. The text is specifically laid out to be very easy to read and deliver its message quickly to the user. By using a text design the website by it nature will be fast loading.

• As a first time visitor I want to quickly understand what the Hotelier Academy training platform is so that I can see how it fits with my hotel.
• As a first time visitor I want to be able to see the list of features so that I can understand how it can replace my existing staff training setup.
• As a first time visitor I want to be able to understand the training courses available so that I can see the benefits to my business.
• As a first time visitor I want to be able to easily find the contact information so that I can get further information

• As a returning visitor I want to be able to navigate easily around the website so that I can find particular information that I was previously looking at.
• As a returning visitor I want to be able to easily find the contact information so that I can get further information

• As a Frequent User, I want to check to be able to log in to my training dashboard so that I can access my training material.

• Home Page - View
• Features Page - View
• Courses Page - View
• Contact Us Page - View

• Home Page Wireframe - View
• Features Page - View
• Courses Page - View
• Contact Us Page - View

• Home Page - View
• Features Page - View
• Courses Page - View
• Contact Us Page - View

A template file is provided for the creation of further pages in the future. The template contains the essential html and css structure that has passed W3C standards. The template uses Bootstrap 4.

Included in the template.html: View

• HTML5 Structure
• CSS3
• Javascript
• Header
• Blank content section
• Footer

Meta data tags were generated from Metatags.io for social media platforms.

• HTML5
• CSS3
• Javascript

1. Bootstrap 4.5.2:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts were used to import the 'Asap' and 'Roboto' font into the style.css file which is used on all pages throughout the project.
3. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
4. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
5. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
6. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
7. Photoshop:
   • Photoshop was used to create the logo, resizing images and editing photos for the website.
8. MockFlow:
   • MockFlow was used to create the wireframes during the design process.

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.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

The website has been tested on multiple device to ensure it is fully responsive.

Lighthouse in Chrome DevTools was used to test performance and accesibility.

First Time Visitor

• As a first time visitor I want to quickly understand what the Hotelier Academy training platform is so that I can see how it fits with my hotel.
  • Above the fold is a brief text introduction on what the website is about. 
  • The next section is a detailed explanation where the text is laid out in a inviting manner.
  • The bottom section contains the main benefits of the platform
• As a first time visitor I want to be able to see the list of features so that I can understand how it can replace my existing staff training setup.
  • There is an entire page dedicated to demonstrating the list of features.
  • This page is made very easy to see the features point by point.
  • This page is very easy to navigate from anywhere on the website.
• As a first time visitor I want to be able to understand the training courses available so that I can see the benefits to my business.
  • There is an entire page dedicated to demonstrating the list of courses.
  • This page is made very easy to see the courses point by point.
  • This page is very easy to navigate from anywhere on the website.
• As a first time visitor I want to be able to easily find the contact information so that I can get further information
  • In the main navigation there is a link to the contact us page with many options to make contact.
  • On the home page there is a call to action that is designed to stand out.
  • On the features and courses pages there is a contact form designed to be easy to fill in.

• As a returning visitor I want to be able to navigate easily around the website so that I can find particular information that I was previously looking at.
  • The navigation is in the expected position at the top and is clean and easy to read. The navigation is responsive and works very well on mobile devices
• As a returning visitor I want to be able to easily find the contact information so that I can get further information
  • The contact us page is linked form every page on the website through the navigation
  • A contact form is available on all pages.

• As a Frequent User, I want to check to be able to log in to my training dashboard so that I can access my training material.
  • A sign in button is available from all pages through the main navigation
  • This button is set in the primary colour for full visibility.

• The Website was tested on all major browsers Google Chrome, Internet Explorer, Microsoft Edge and Safari.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• All links were fully tested using the tool https://www.deadlinkchecker.com/website-dead-link-checker.asp
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues. 
• An issue and bug tracking form was created to capture and organise issues https://docs.google.com/forms/d/e/1FAIpQLSft8mJYTlqxVhtz-Ol0962CKCOQK691BjdwLPoy6QiQJ7W2mQ/viewform?usp=sf_link

• On some mobile devices the Hero Image pushes the size of screen out more than any of the other content on the page.
• A white gap can be seen to the right of the footer and navigation bar as a result.
• On Microsoft Edge and Internet Explorer Browsers, all links in Navbar are pushed upwards when hovering over them.

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

1. Log in to GitHub and locate the GitHub Repository
2. 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.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

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...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/ukkpower/User-Centric-Frontend-Development-Milestone-Project

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/ukkpower/User-Centric-Frontend-Development-Milestone-Project
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

• Animista was used to generate the CSS text animations

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• Metatags.io was used to generate the head meta tags to ensure website is properly displayed on the main socila media platforms

• All content was written by the developer.

• Psychological properties of colours text in the README.md was found here

• Images were obtained from Getty images and licences would need to be kept up to date.

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.