This is a website I am creating for an imaginary restaurant called Fork & Knife. This restaurant offers authentic Indian cuisine for couples, families and childrens. The main goal is to get the users interested & book a table with us. Fork & Knife is an educational project to serve as a a milestone project for the software development programe of Code Institue.
-
- The main goal of any restaurant is to attaract customers by their unique style of cuisine. In this case Fork & Knife is offering a mix of North Indian and South Indian dishes.
- Other main goals are to attaract couples, families and childrens to book table with us.
- Buisness is also responsible to promote unique style of menu which attracts all age groups.
-
- Having a healthy menu that attaracts families with their childrens.
- Having the ability to know before hand on what to order and the prices.
- Having the options to conatact the restaurant staff if in any doubt.
-
- As a User I need to:
- to be able to navigate through the website comfortably and easily.
- to be able to see through mobile first and pass it to my peers.
- to easily understand the purpose of the page.
- to be able to find who owns the Buisness and how to contact them, This will give me more confidence to book a table and also the restaurant.
- to be able to view some photos of popular dishes.
- As a User I need to:
-
- I decided to separate the website into Four sections Home page, Menu page, (with 3 dropdown menu links) , Offers page and Contact page. The navbar (fixed) and footer allow the user to easily find ways to get in touch and each page is to show a consistency throughout. Each page is designed to provide practical information, with inspiring images and content enough to enable the user to know what the restaurant provides.
-
- Here I have inlcuded the images for Wirefrmaes
-
- Homepage
- Menus
- Offers
- Contact
-
- Here I have inlcuded the images for Wirefrmaes
-
- Colors
- The Color Palette is carefully selected to invite users and excite them to book a table. It is also responsible to give a warm feeling and is inpired by the "Eye Comfort" reading mode for most screens.
- Typography
- Media
- All the images used through out the projects were carefully selected to potray a relation of what the containing section is about.
- All images are sized and compressed for the best UX flow.
- Icongraphy
- Icons are used throughout the project to help user understand more efficiently the meaning of the content. They are a very good asset to improve UX.
- Colors
Website's features are presented in an importance order.
- Index Page
- Navigation Bar
- Allows users to navigate through the page. Website is split into 6 pages and all navigation links are at the top of the page. Navigation bars are placed at the top of every page and collapsing down for mobile veiw.
- Full Width Callout
- Allows users to understand the page's purpose in the first look. Also attracts users by giving on-point bite-size information. Allow business to acommplish the main goal by providing users with the booking and viewing the menu posibility. This is only showed on 80% of the screen height, the remaining 20% are left visible on purpose to let users know there is more content and to invite them to scroll through it.
- Book a table Modal Form
- Allows users to book a table by having them fill out the provided form.
- Discover the menu button
- Allows user to see the main menu the restaurant offers to make a decision.
- About section
- Gives the user a small history of when the restaurant started and how it formed.
- Gallery section
- Images are placed in Carousel for users to scroll through them with back and forward buttons.
- Review section
- Gives users an oppurtuniity to read reviews about the restaurant and also having a button to submit thier own feedback.
- Navigation Bar
- Menu Pages
- Buttons for Menus
- Placed three button for menus for accessibility, so the user wont have to go back up to the Navigation link always.
- Menu Items
- Menu items are placed in 2 rows with 3 to 2 food items in each row to keep the menu simple and exicitng.
- Buttons for Menus
- Offers Page
- Offers page created seperately to make the user aware of any offers currenlty going on.
- Currently split into 2 different sections to show the offers going on at the moment.
- Contact Page
- About Location
- Gives the user a breif description about the location of the restaurant.
- Contact Form
- User is given a form to fill in if they would like to contact us with anything such as like any questions.
- Location
- User is given a map via Google Maps, in case if they need directions to the restaurant.
- About Location
- Workspaces
- Windows 10 is used as operating system.
- Gitpod is used as integrated development enviornment.
- Languages
- Frameworks and Libraries
- Bootstrap 5 was used for its great responsivness and styling classes.
- Font Awsome was used to asthetics and most importantly to potray what user was reading or clicking at.
- Google Fonts was used as main resource for Fonts.
- Pixabay was used as main resource to select images.
- Version Control
- Wirefrmaes
- Media
- Adobe Photoshop was used to improvise the images and quick compressions.
- Pixabay was used as main resource to select images.
- Other
- Coolors.co as tool tool to Color Palette picking.
- Chrome Lighthouse Testing as a tool to test the performance of the weboage.
- Browser Ling used to test responsivness in Windows 7 and Android 7.
- W3C Markup as tool to check for errors in HTML code.
- W3C CSS as a tool to check for errors in CCS Code.
- Google Maps used as a tool to give directions to the user.
-
- The project was deployed to GitHub Pages using the following steps:
- Log in to GitHub and locate the Fork & Knife Repository.
- At the top of the Repository, locate and click the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "main" branch.
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
- The project was deployed to GitHub Pages using the following steps:
-
- 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:
- Log in to GitHub and locate the Fork & Knife Repository.
- At the top right of the Repository just above the "Settings" Button on the menu, locate and click the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- 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:
-
- The project can be cloned from GitHub pages using the following steps:
- Log in to GitHub and locate the Fork & Knife Repository.
- At the top of the Repository just above the list of files, locate and click the "Code" with a litte download icon beside "Green Gitpod" icon.
- To clone the repository using HTTPS, under "Clone" and click on small "clipboard" icon to copy the link.
- Open Gitpod and log in.
- Type "git clone", and then paste the URL as shown below:
- Press Enter. Your local clone will be created as shown below:
- The project can be cloned from GitHub pages using the following steps:
- Contents
- Dakhin Restaurant as a general content insparation.
- Code Institue was used to look back modules.
- Media
- Pixabay was used as main resource to select images.
- Code
- Code Institue was used to look back modules.
- Stack Overflow for general questions such as like how to write such and such codes.
- W3 Schools was used to get help for general purposes.
- My Mentor: Nishant Kumar for continuous helpful feedback.
- Tutor support at Code Institute for their support.
- Slack Code Institute community for feedback.