code-institute-submissions / bellerestaurant Goto Github PK

<em>User Stories:</em>

1. As a new user, I want to be able to navigate through the website with ease.

2. As a potential customer, I would like to see what the restaurant are willing to provide in relation to the food menu.

3. As a new user, I would like to know where the restaurant is based.

4. As a new user, I would like guidance on how to make a booking.

5. As a new user, I would like to see contact details for the restaurant.

   User Goals:

6. Find the webpage easy to use.

7. Understand the information provided by the business.

8. Use a visually appealing website.

9. Submit a booking form and a review request.

10. Submit a contact form.

User Expectations

1. The website is easy to navigate using navbar & scroll on all types of screens.

2. The ability to interact with the restaurant via booking forms, reviews in a quick and efficient manner.

3. All information shown on website to be informative and clear.

4. Provide an online welcoming environment in order to entice new customers in the area.

   Insight In providing insight, I included the following to my website:

5. A scrollable website for better user experience while navigating the page.

6. A nav bar was used to set up to assist in navigating the webpage for the user.

7. Three images used to split up the various sections in order to make the webpage more user friendly and visually appealing.

8. Booking and Reviews sections with easy to read placeholders.

9. Footer included a Google map of the Doughiska area, as well as the location of the restaurant.

10. Links to social media websites attached. The links will open Facebook, Instagram & Twitter in a separate tab - easy access to both webpages for the user. Attached twice in the webpage in order to attract and promote the links.

WIREFRAME

Webpage Features

Home Page

The home page consists of my title, header, my navbar, my first image and my image text. I wanted this to be very simple and aesthetically pleasing. I chose my background colour to be #d5d5d5 as I wanted a soft subtle background, with the font colour being #3a3a3a to contrast the darker colour with the lighter. This made the font easier to read. I chose Late as my font-family with a font weight of 400 to also add contrast to the words.

My NavBar consisted of the 5 sections of my webpage - Home (index.html); Food Menu (#foodmenu); Bookings (#booking); Reviews (#review-container); Contact (#contact). This was to allow users to tap on the section they would like to find.

The background image is an image of three pizzas, with my image text including the name of the restaurant as well as the location and a logo. The red colour of the image text was to contrast with the #d5d5d5 background, as well as to blend into the colours of the image behind it.

The navigation bar stretches 100% of the screen, as does the images in the webpage. This is to ensure that it is seen on every device. When you hover over the navbar titles, you will notice each title underlines. This is to help with visibility of the nav bar.

Webpage Content

In my webpage, additional contents I have added include : a link to a Youtube video provided by Jamie Oliver’s account - https://www.youtube.com/watch?v=1-SJGQ2HLp8&t=1s. This was to learn how to add a Youtube video to a webpage, but also to add a fun interactive piece for the user to enjoy.

I have included a map from Google Maps which pinpoints where the restaurant is in Doughiska, Co. Galway. This is to encourage people to visit, as it is very easy to figure out the distance / route to the restaurant by using Google Maps.

I have added three images - one being an image of three pizzas, one being an image of a man cooking in the kitchen, another being a shrimp pizza. These were to add aesthetically pleasing elements to my website, and to split up the content. It would also be intended that the images would entice customers to visit & try the food shown.

I have also included social media links to promote the business on social media as part of the social media marketing strategy and campaign.

<>

Forms

In doing this website, I wanted to include as many forms as possible in order to make the webpage more interactive with the user. The user can make a booking with the restaurant, and leave a friendly review for the restaurant to give feedback that may be used to promote the restaurant in future.

In styling both the booking forms, I decided to add orchid as my colour as I found it very visually appealing and wanted to add a pop of colour to my project overall. The “Send” buttons are a darker shade to distinguish it from the rest of the form.

I wanted to add date and time elements to my project, so I did under bookings. Under reviews, I used placeholders as opposed to

s in order to create differences between the two forms.

Contact

As stated above, I wanted to build a website where users could easily interact / engage with the content of the webpage instead of physically having to call / text / walk-in in order to get informations regarding booking, leaving a review, looking at the restaurant menu & searching for the location of the restaurant. It can all be found on the webpage. I also have a contact number attached for bookings & a contact email for queries that cannot be answered over call / website.

Technology Used in Building the Webpage

1. GitHub was the platform I used to build my website on. It was a very useful tool in building my CSS & HTML files on.
2. CSS - I used CSS to style my website and emphasise the features of the website. This was a requirement as it is what I had studied.
3. HTML5 - I primarily HTML5 for building the webpage and the layout. This was a requirement as it is what I had studied.
4. Bootstrap - I used Bootstrap for the navbar and the footer mainly, as well as the social media links. This was a big help in pulling the project together.
5. Font Awesome was used to avail of the icons (twitter, Facebook, instagram) I wanted to implement in my code. This was a great help in styling my code.
6. Google Fonts was a great tool in order to allow me to style my fonts. This added definition and style to the words in my website.
7. W3C CSS and HTML Validation Service was used to spot any errors in my code. Unfortunately at the end, I struggled with a few HTML validations as I could not find where I was going wrong.

Browser Compatability

The website was viewed among a series of browsers listed below in both mobile and desktop configuration in order to get an insight into what the user may see:

1. Safari
2. Chrome
3. Internet Explorer
4. Edge
5. Firefox

Devices Used and Tested

1. MacBook Pro
2. iPhone XR
3. Samsung Galaxy S8+
4. iPhone 8
5. iPad Air
6. Galaxy Fold
7. Pixel 5

I found no issues with the responsiveness of my website on any of these platforms or devices.

My Webpage Issues / BUGS

1. *****Unresolved - I am not sure why but html lang="en" fails on my validator.
2. Resolved - I had a hard time with the form because I struggled with the label for element. It showed up on my validation report as “The for attribute of the label element must refer to a non-hidden form control”. I wasn’t too sure if it was serious, and couldn’t find any answers online. As I didn’t want to take it out - I decided to leave it in as it was a crucial part of my webpage. In response to this, I changed the initial code to leave a text box to help with bookings. It unfortunately didn’t look as appealing, but the code passed the verification.
3. Resolved - I initially had a very difficult time attaching my images to the CSS folder. It took me about four days to attach it. I was confused by GitHubs U, A and M symbols. The W3 website, as well as Stack Overflow greatly helped.
4. Unresolved - I tried to link a Youtube video to my webpage but for some reason couldn’t figure out how to incorporate it in via code. Unfortunately, due to my best efforts, I had to take out the video. Below is the photo evidence to show my issue with the video.

W3 Validation Testing

In testing my website on the W3 HTML markup validator and CSS validator, I was able to discover nearly no errors in HTML (except one that I am very unsure of - I am pretty sure it could be a mistake by the validator).

In testing my website on the CSS validator, I discovered no issues.

Sources

In helping build this website, I have chosen to acknowledge: www.codeinstitute.net www.w3schools.com https://developer.mozilla.org/ www.validator.w3.org https://www.youtube.com/watch?v=1-SJGQ2HLp8&t=1s Traversy Media, YouTube, https://www.youtube.com/watch?v=JttTcnidSdQ&t=330s