The Oslo Hotel Website
Milestone Project 1
- The aim of this project is to create a static front end site of at least 3 pages or sections using the technologies I have learned so far such as, HTML, Css, and optional Bootstrap or other libraries. The aim of the site is to present useful information in an ordered way to a set of users.
- I have decided to created a website for a fictional hotel. I have utilised all the elements I have learned in the previous modules to create this page and used principals of good user experience to create a responsive, well designed functional website.
- My site consists of a landing page to introduce the hotel and the section pages. The site then has 3 pages, one for the hotel guest rooms, one for the hotel food and bar options, and the final for the spa and leisure options. There is also a booking form section for potential guest to fill out to book rooms.
Live project
Screenshots
Landing page screenshot
Section page screenshot
Booking-form screenshot
- All screen shots created using Am I responsive
Table of contents
Table of contents generated with markdown-toc
User experience
User Stories
Prospective guest
- As a prospective hotel guest I would like to be able to see images of the hotel rooms and their prices.
- As a prospective hotel guest I would like to see what food option there are at the hotel and their menus.
- As a prospective hotel guest I would like to see what leisure activities there are at the hotel.
- As a prospective hotel guest I would like to be able to book a room.
- As a prospective hotel guest I would like to see if there are any packages for the hotel.
Booked Guest
- As a booked guest I would like to see the hotel location and how to get there from the airport.
- As a booked guest I would like to see the hotel contact information.
- As a booked guest I would like to see what the rooms contain.
Wire frames
- I created wire frames for the project using Balsamiq and have included a link here to access them in pdf form.
View the wireframes in pdf here
Design
Colour Scheme
- I used two main colours throughout this site, a stone colour #f5f4ef, and a dark green colour #052d26. I alternated the text and background colour between my two main colours to create defined sections when scrolling and to create a slight monochrome feel.
- I also used a light green colour #108f79 for my hover effect on the links to show the user that they element is a link.
Typography
- I wanted to create a strong look with my typography so i used a very graphic font Monsterrat Subrayada in large size for my headings, and Raleway for all other text.
- Both fonts where imported to my css stylesheet from Google Fonts.
- I used sans-serif as a fall-back font in case for any reason my fonts were not imported.
Imagery
- Imagery was very important to me and I choose images that conveyed the feel of the hotel I wanted to present and placed them throughout the site.
- Each section consists of a main title image that conveys to the user what the section is about.
- I then placed images of the guest rooms, the restaurants and the spa and gym throughout the site so the user can see what the hotel is like.
- I used two sources for my images.
- I also placed video in each of the section pages with controls so the user can take a room tour, see some food being prepared for the resturant and see a treatment in the spa.
- All video was sourced from.
Icons
- I used directional arrow icons from Font Awsome to encourage users to scroll and to show links to a seperate section page.
Features
Current Features
-
Reponsive
- Through using mobile first design I have created a fully responsive wbsite on all screen sizes
-
Interactive
- Videos placed on each section page with controls so the user can choose to play it.
- Google map iframe to show users the location of the hotel.
- Drop down navbar on smaller devices.
-
Social - Links to social media in the footer section.
-
Booking - A booking form for users to book their stay.
-
Informative - Packages section to show the user the packages and prices for their stay.
Future Features
- Booking- In the future as I learn how to I would like to add a feature that thanks a customer for booking when they submit the form.
Technologies used
Languages Used.
Frameworks Libraries and Programs
-
- I used bootstrap throughout the site to make it responsive. I also used bootstrap to create the navbar and to create the booking form.
-
- Two fonts were imported from google fonts. Monsterrat Subrayada the headings, and Raleway for the other text.
-
- I used different icons from font awesome throughout the site for design features and for user experience to encourage users to scroll.
-
- Git was used as a version control in the terminal.
-
- Github was used to create and store the project repository.
-
- Gitpod was used to create my files and code the project.
-
- Balsamiq was used to create Wireframes for the project during the initial planning stage.
-
- Am i responsive was used to take screenshots of the page at different screen sizes.
-
- jQuery was imported from bootstrap to make the navbar responsive on smaller screen sizes.
Testing
Testing User Stories
Prospective guest
-
As a prospective hotel guest I would like to be able to see images of the hotel rooms and their prices.
- On the landing page there is a room section entitled Sleep with an arrow the user can click to get to the room section page.
- There is also a link to the sleep page on the navbar so users can navigate to it from any page.
- Once on this section page there are images of the 3 types of rooms for the user to see.
- There is also a brief description of the rooms amenities
- There is also a video showing a room tour.
- There is a from price per night shown for each type of room for the user to see the cost.
- All links have been tested and shown to work.
-
As a prospective hotel guest I would like to see what food option there are at the hotel and their menus.
- The Landing page also contains a section entitled Eat for the food and drink options with an arrow that the user can click to get to the Eat section page .
- There is also a link to the Eat page on the navbar so users can navigate to it from any page.
- Once on this section page there are images of the restaurant, the cafe, and the bar so the user can see what option there are.
- There is also a video showing a dish being made in the restaurant.
- There are links to pdf versions of the restaurant menu, a wine list and the cocktail list so the user can see before their stay.
- All links have been tested and shown to work.
-
As a prospective hotel guest I would like to see what leisure activities there are at the hotel.
- The Landing page also contains a section entitled Relax for the spa and leisure options with an arrow that the user can click to get to the Relax section page.
- There is also a link to the Relax page on the navbar so users can navigate to it from any page.
- Once on this section page there are images of the spa, and the gym and pool for the user to see the options.
- There is also a video showing a treatment being carried out in the spa.
- There is a link to a pdf version of the spa treatment list so the user can see what treatments are available.
- All links have been tested and shown to work.
-
As a prospective hotel guest I would like to be able to book a room.
- There is a booking link in the navbar on larger screens and just below the title on smaller screens that the user can click to get to the booking form.
- On the Sleep page under each room description there is a link to the booking form.
- The booking form requires all the information and has been tested, not filled out, half filled out and the user will be informed of sections they missed.
- the booking form will reset after the form is filled out and the book now button is clicked.
- All links have been tested and shown to work.
-
As a prospective hotel guest I would like to see if there are any packages for the hotel.
- On the main landing page there is a section that contains information on the hotel packages.
- There is a link to this section on the navbar on each page.
- Each package also has a book now link.
- All links have been tested and shown to work.
Booked Guest
-
As a booked guest I would like to see the hotel location and how to get there from the airport.
- On the home page there is a plan section that is linked to from the navbar of all pages and it contains location information and how to get to the hotel from the airport.
- There is also an iFrame of the map on this page.
- There is also a link to the map in the footer accessible from all pages.
- All links have been tested and shown to work.
-
As a booked guest I would like to see the hotel contact information.
- The hotel contact information is contained in the footer. The email is linked to open in the email application.
- This contact section is linked to from the navbar.
- All links have been tested and shown to work.
-
As a booked guest I would like to see what the rooms contain.
- In the room section the different rooms are clearly titled and their amenities are listed.
- Icons are used to make this visual
Code Testing
-
My code has been passed throught the W3C, Css and HTML validator.
Know issues
- When I passed my booking form HTML code through the validator It warned that the input type="date" didn't work on all browsers. When I researched the issue the solution seemed to be to add some javascript to place a pollyfill. As this is currently out of my scope of knowledge I instead placed the date format of dd/mm/yyyy in the label for the date input to show the user what is expected in this input section. As my knowledge of javascript improves I will revisit the issue to improve on the solution.
Further Testing
Once finished I tested the site across different screen sizes and different browsers.
- I noticed the heading text was very small and less noticeable on smaller screens so I enlarged its size and added an opaque background to make it stand out more.
- I also noticed some minor spelling mistakes which I have fixed.
- I've also checked all links numerous times to make sure they all work.
404 error
- I used github to add a custom 404 error page if the user enters a wrong url to the page. I created a 404.html page on my repository by clicking the add file button and then added my html and css to it. I've added my navbar and footer to this page as well as a link back to the index.html page.
Deployment
Github, Gitpod, Git and Gitub pages
To start the project I used Github and Gitpod.
- I first created a repository cloning the Code Institutes template on my github page.
- Once created I opened the page in Gitpod.
- I then used the terminal to create my index.html file ie, touch index.html.
- I then created my assets folder ie, mkdir assets, to hold my images and my css folder.
- I then created the style.css file within the css folder.
- I then created the other pages sleep.html, eat.html, relax.html and booking-form.html.
Git
- Once I created the main files and folders I then used the git add . command to add them to the staging area.
- Once they were staged I then used git commit -m "initial commit" to commit them to github.
- I then used git push to push the files onto my gihub page.
- I used these steps to commit the project regularly throughout the development to keep everything saved and up to date on my github.
To make my project live I then used github pages.
- I First signed into github and located my repository
- At the top of the repository I selected the settings option.
- I then scrolled down the page until I reached the github pages section.
- Under sources I selected the Master Branch.
- The page then refreshed itself.
- I then scrolled back down and the link to my live page was then visible.
Credits
Code
- Bootstrap 4 code was used to create the navbar and the booking-form. It was also used to make the website responsive using it's grid system.
Media
-
- Unsplash was used to source some of the images for the site.
-
- Pexels was used to source some images and the videos for the site.
Content.
- All content was written by myself.
Acknowledgements
-
Code Institute for getting me to this point
-
My Mentor for his help with this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
