This is protfolio project about Italian restaurant called Gourmet, it is designed to represent my journey through the project itself. You will be able to navigate through website on many devices from PC's to small portable devices without any problem.
- Motivation
- User Experience
- Website Structure
- Technology, Frameworks and Programs used
- Features
- Testing
- Testing user stories
- Deployment
- Credits
This project is about restaurant, menu and booking table. Main purpose of this project is to present landing page of the restaurant with menu, drinks, booking table and about us.
I chose this project over any other one is because how hard it is to get pictures without copyright on them. Wanted something nice and sleek.
- User Story
- As user visiting website I want you to understand what is the website about.
- As user visiting website I want you to navigate easily through the website.
- As user I want you to see landing page and navigate through it.
- As user I want you to easily navigate to Main Menu.
- As user I want you to easily navigate to Drinks Menu.
- As user I want you to easily access Booking Table and successfully use it.
- As user I want you to fill in your details in Booking form to succesfully book a table.
- As user I want you to easily access About Us and successfully use it.
- As user I want you be able to use map in About us section.
- As user I want you to see Thank you page after booking table.
- Increase customer number.
- Expand and grow as a business.
- Easy access on all kind of devices without graphical bugs.
- Clear information about restaurants services.
- Readable menu.
- Simple ways to book table at the restaurant.
- Simple ways to find us on map.
- Landing page to be nice and sleek.
- Food menu to be readable for everyone.
- Book tabel to work correctly.
- About Us to work correctly.
- Colors:
-
Colors used on the website are:
-
Gold #ffd700;
-
White #ffffff;
-
#131313b0;
-
-
Fonts:
-
Images:
- Image of restaurant used from pexels it is nice golden black colors which suit the website color design.
-
| Screen size | Breakpoint |
|---|---|
| small | >= 576px |
| medium | >= 768px |
| large | >= 1024px |
-
- Pexels was used on background picture of entire website.
-
- Google fonts was used to pick and import fonts to my project.
-
- GitHub was used to store my source code by git add . git commit and git push.
-
- Git was used with GitPod to write down the code and push it to GitHub.
-
- Balsamiq was used to design the website idea itself.
-
- Testing My website on it.
- Responsive on all devices.
- Interactive buttons
- Book table.
- About us.
-
Navigation bar will be mostly the same through out the website except for buttons they will be replaced with hamburger menu on mobile devices.
-
Mobile devices.
-
Hidden hamburger menu for mobiles.
-
Opened hamburger menu for mobiles.
-
Hamburger menu with hover for mobiles.
-
-
Tablets.
-
Small Tablets
-
Tablets
-
-
Desktop.
-
Desktops
-
-
-
Main content of website will be nicely adjusted on all devices with pictures below:
-
Mobile devices.
-
Tablets.
-
Desktop.
-
-
Thank you Website for Booking a Table!.
-
Mobile
-
Tablet
-
Desktop
-
-
Footer
- Footer looks the same on all devices just space around is wider.
-
W3C HTML Validator and CSS Validator
-
HTML Validator
- Main Page and Thank you
-
CSS Validator
- CSS
-
-
Testing on website.
-
Website has been tested in Lighthouse, Screenfly and my own PC.
- Mobile Lighthouse score
- Desktop Lighthouse score
-
-
Testing on portable devices.
-
Website has been tested with Lighthouse, Screenfly and couple of mobile devices.
-
Screenfly website.
-
-
-
Known bugs.
- Date and Time input is blank on mobile phones but not in Previews or Live website with Right Click Inspect.
- Checkbox hamburger menu wont close itself requires JavaScript to uncheck to make it hide the menu items.
- As user visiting website I want you to understand what is the website about.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User understands whats the website is about | User can see first section of website | User can see that website is about restaurant | PASS |
Picture
- As user visiting website I want you to navigate easily through the website.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User can navigate though website easily | User can see navigation bar | User can press buttons and will be brought to certain parts of page | PASS |
Picture
- As user I want you to see landing page and navigate through it.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see landing page and can navigate through it | User can see landing page and navigation bar | User can see landing page and navigation bar and use it to navigate through it easily | PASS |
Picture
- As user I want you to easily navigate to Main Menu.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see Main menu button | User can press on Main menu button | User will land on Food menu section | PASS |
Picture
- As user I want you to easily navigate to Drinks Menu.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see Drinks menu button | User can press on Drinks menu button | User will land on Drinks menu section | PASS |
Picture
- As user I want you to fill in your details in Booking form to succesfully book a table.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see form and fills it in | User can fill in the form to book a table | User will be able to press on book a table button without showing required | PASS |
Picture
- As user I want you to easily access Booking Table and successfully use it.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see Book table button | User can press on Book table button | User will land on Book table form section | PASS |
Picture
- As user I want you to easily access About Us and successfully use it.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see About us button | User can press on About us button | User will land on About us section | PASS |
Picture
- As user I want you be able to use map in About us section.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see map | User can use map to locate the restaurant if needed | User will find where restaurant is located if needed | PASS |
Picture
- As user I want you to see Thank you page after booking table.
| Feature | Action | Expected Result | Result |
|---|---|---|---|
| User see Thank you page | User can see Thank you page and return to main page | User will see Thank you page thanking them for booking and be able to return to main page | PASS |
Picture
Following writing the code then commiting and pushing to GitHub, this project was deployed using GitHub by the following steps.
- Navigate to the repository on github and click Settings.
- Then select Pages on the side navigation.
- Select the None dropdown, and then click Main.
- Click on the Save button.
- Now the website is now live on
- If any changes are required, they can be done, commited and pushed to GitHub and the changes will be updated.
- Slack Community and my Mentor!
- Simen Daehlin My Mentor very Helpfull!
- Pexels For free pictures.
- Delish for food ideas!.
- Lacucinaitaliana for food ideas!.
- bbcgoodfood for drinks ingredients.
- Google Maps for google maps.
- screenfly for testing my website ;).
- The W3C Markup Validation Service Validation of HTML.
- The W3C CSS Validation Service Validation of CSS.
- AmIresponsive for responsive look of my website.
- Autoprefixer used to prefix CSS.