As I am a fanatic of hamburgers I decided to create a website for a hamburger restaurant. The website serves for the customer to know the history behind the creation of the restaurant, our menu with prices and another section where you can find our opening hours, location and contact.

In addition the customer also has a gallery where he can see each dish of our menu. Finally as it is a new restaurant I have created a form to get feedback from people and return them a free burger. The form serves to attract customers and to improve the quality of the restaurant.

• User Experience - UX
  • User Stories
• Design
  • Website Structure
  • Colour Scheme
  • Typography
  • Photos
  • Videos
  • Google Maps
  • Interactive Links
• Features
  • Existing Features
• Testing
  • Lighthouse
  • Validator Testing
• Bugs
• Unfixed Bugs
• Technologies Used
  • Languages Used
  • Programs Used
• Deployment of This Project
• Credits
  • Information Resources
  • Media
• Special Thanks

• As the creator of the website I want to design a website that allows the client to have a presence on the internet and at the same time let regular and new customers know about the restaurant and its updates.

• As a new visitor, I want to get to know the restaurant, see its dishes, contact information, location and opening hours.

• As a regular visitor I want to be kept up to date with news and have a telephone and email available for booking.

The Last Hamburger website is a three-page site: Home, Gallery and Free Burger. The default loading page is Home (index.html). The home page has 4 sections: (1) an introductory video, (2) Our History, (3) Menu, (4) Contact. The Home page is linked to all pages of the website via the navigation menu at the top. The Gallery has photos showing the restaurant's dishes and some photos of the restaurant itself. The Free Burger page is a form to receive feedback from customers. Each page is linked to all the pages of the website via the navigation menu at the top and all have the Footer.

The #000000 has been used for the background and #ECEFF1 for the text. And the colour #D32F2F has been used to mark the form and also for the "Hover" function.

Montserrat is used for titles and Crimson Pro is used for the rest of the website.

6 images have been used in the Our History section, 12 images in the Gallery and 1 background image on the Free Burger page.

The Landing Page has one video as a background displaying muted, loop and autoplay.

The web site has a Google Maps location section where the users can locate the restaurant in Valencia, Spain.

In the Footer, users can access the links to the restaurant's social networks (Facebook, Twitter and Instagram). Once these icons are clicked, they open in a new tab

• Navigation Bar

  • Featured on all three pages, the full responsive navigation bar includes links to the Home, Gallery and Free Burger page and is identical in each page to allow for easy navigation.
  • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

• The landing page video

  • The landing page includes a video featuring a burger with the logo.
  • This section introduces the user to The Last Hamburger with an eye-catching video featuring one of our succulent burger to capture their attention.

• Our History

  • The Our Story section will allow the user to get to know us in order to connect.
  • This user will see that the creators of the restaurant are passionate about hamburgers and that we offer quality.

• Menu

  • The Menu section will allow the user to see our menu and the prices of each dish.

• Contact

  • The Contact section will allow the user to know the opening and closing hours, the address, the days we are open, a contact email and telephone number.
  • The user also has a map where he/she can see the exact location of the restaurant.

(I have put as an example the location of the best hamburgeseria in Valencia, Spain 😍)

• Footer

  • The Footer section will allow the user to go to the social networks, a second window will be opened.
  • The user or interested person also has information about the creator of the website and links to GitHub and Linkedin.

• Gallery

  • The Gallery section will allow the user to see photos of the restaurant and of each dish on the menu.
  • The user can identify each dish because each photo has a description below.

• Free Burger

  • The Free Burger section will allow the user to receive a ticket to receive a free burger if he/she completes and submits the form.
  • The feedback helps the restaurant to improve and also attracts a customer who can order dishes in addition to the free burger.

• The website has been successfully tested on my own laptop on the following browsers:

• All links have been checked to ensure that they work and redirect correctly. In addition, 2 Slack users from the "project-portfolio-1" channel and 2 of my relatives have verified that the page works correctly.
• The Free Burger form submission button works correctly using two different email addresses.

• The Lighthouse test has given a negative result on mobile and desktop performance. The problem has been solved by optimising the images and the video. TinyPNG has been used for the images and Videosmaller for the video. The path to the HTML files has also been changed. Below you can see the results of Lighthouse on desktop and mobile:

Desktop

Mobile

• CSS:no errors were found when passing through the official (Jigsaw) validator

When I uploaded my project to GitHub Pages the CSS didn't appeared. The problem was that I wasn't using relative paths:

• HTML:Three errors were returned when passing through the official W3C validator W3C validator

1.The bug has not been fixed because it would not be possible to make the navigation bar in the form of an icon for mobile phones and small screens.

2.The width has to be 100% for the map to look correct on the web page and to adapt to the different screens.

• HTML5
• CSS3

• Google fonts were used to import the 'Montserrat' and 'Crimson Pro' fonts throughout the style.css.
• Font Awesome are used as an icons for user UX purposes.
• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
• GitHub is used to store the project's code after being pushed from Git.
• Canva was used to create the video with the restaurant logo and also to create the background photo of the form.

The website development was created in the "main" branch. This branch was deployed using GitHub Pages. This site was deployed by completing the following steps:

1. Open GitHub.
2. Click on the project to be deployed.
3. Navigate to the "Settings".
4. Navigate down to the "GitHub Pages".
5. Click on "Check it out here!".
6. Select the "main" branch and select "Save".
7. The link to the live website was ready on the top.

• Navigation bar
• W3Schools
• Stack Overflow
• CSS-Tricks

• All the text content is original.
• The video and photos are from Pexels and Canva.

Special thanks to my mentor Mitko Bachvarov Mitko Bachvarov and my colleagues at the Code Institute.