FORK & KNIFE

First Milestone Project

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.

Table of Contents

• Demo
• UX
  • Buisness Goals
  • User Goals
  • User Stories
  • Structure
  • Skeleton
    • Wirefrmaes
  • Design Choices
• Features
• Tecnologies Used
• Testing
• Deployment
• Credits
• Acknowledgement

Demo

• Live Website

• Am I Responsive
• 

UX

• BuisnessGoals

  • 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.

• UserGoals

  • 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.

• UserStories

  • 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.

• Structure

  • 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.

• Skeleton

  • Here I have inlcuded the images for Wirefrmaes

    • Wirefrmaes

      • Homepage
        • Homepage Web
        • Homepage Tablet
        • Homepage Phone
      • Menus
        • A La Carte Menu Web
        • A La Carte Menu Tablet
        • A La Carte Menu Phone
        • Lunch Menu Web
        • Lunch Menu Tablet
        • Lunch Menu Phone
        • Pre-Theatre Menu Web
        • Pre-Theatre Menu Tablet
        • Pre-Theatre Menu Phone
      • Offers
        • Offers Web
        • Offers Tablet
        • Offers Phone
      • Contact
        • Contact Web
        • Contact Tablet
        • Contact Phone

• DesignChoices

  • 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
    • There are two fonts used throughout the project, both with a serif fallback. These font-faces inspire classiness and elegance:
      • Playfair is used for all the call out headers.
      • PT Serif is used for the rest of the text through out the body.
  • 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.

Features

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.
• 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.
• 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.

TechnologiesUsed

• Workspaces
  • Windows 10 is used as operating system.
  • Gitpod is used as integrated development enviornment.
• Languages
  • HTML 5
  • CSS 3
• 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
  • Git was used as version control system.
  • Git Hub was used for repository hosting services.
• Wirefrmaes
  • Miro was used to create wirframes for webpages.
  • Balsamiq was used to create wireframes for phones and tablets.
• 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.

Testing

• Click here to see the whole testing process

Deployment

• GitHub Pages

  • The project was deployed to GitHub Pages using the following steps:
    1. Log in to GitHub and locate the Fork & Knife Repository.
    2. At the top of the Repository, locate and click the "Settings" Button on the menu.
    3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
    4. Under "Source", click the dropdown called "None" and select "main" branch.
    5. The page will automatically refresh.
    6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

• Forking the GitHub Repository

  • 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:
    1. Log in to GitHub and locate the Fork & Knife Repository.
    2. At the top right of the Repository just above the "Settings" Button on the menu, locate and click the "Fork" Button.
    3. You should now have a copy of the original repository in your GitHub account.

• Making a Local Clone

  • The project can be cloned from GitHub pages using the following steps:
    1. Log in to GitHub and locate the Fork & Knife Repository.
    2. 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.
    3. To clone the repository using HTTPS, under "Clone" and click on small "clipboard" icon to copy the link.
    4. Open Gitpod and log in.
    5. Type "git clone", and then paste the URL as shown below:
       • 
    6. Press Enter. Your local clone will be created as shown below:
       • 

Credits

• 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.

Acknowledgement

• My Mentor: Nishant Kumar for continuous helpful feedback.
• Tutor support at Code Institute for their support.
• Slack Code Institute community for feedback.