This Website was created for the purpose of completing the first Milestone Project for the Code Institute's Full Stack Developer Course. It was build using the knowledge gained from the HTML, CSS, and User Centric Design Modules.
The live website can be found here. To open on New Window ctrl+click
The OD'S Restaurant Website was built by Own Imagination. The Items shown in this website are famous and delicious south Indian dishes.
- To create a website that is speaking directly to the viewer, giving a clear idea and description of the OD'S Restaurant.
- To create a responsive design fitting all devices and screen sizes.
- The main reason to create this website is to develop my restaurant business and showcase to the people about varieties of Indian dishes are available in my restaurnat.
- As a business owner
- I want to inform the visitors about the varieties of Indian food available in our restaurant.
- I want to get the feedback from the visitors regarding our food and services.
- I want the visitors to be able to contact our restaurant via email/phone.
- As a customer
- I want to view the food menu of the restaurant.
- I want to view the gallery section to get preview of menu items.
- I want to be able to provide feedback of the restaurant.
- Home Page
- As a user they can view the image of restaurant at top of the Home Page.
- As a user they can view the menu section in the middle of home page.
- As a user they can view three different category on the menu section are Maincourse,Starters and Desserts.
- As a user they can click Maincourse will go to the Maincourse section in Menu page.
- As a user they can click Starters will go to the Starters section in Menu page.
- As a user they can click Desserts will go to the Desserts section in Menu page.
- As a user they can view slides image of dishes in the bottom of Home page.
- As a user they can view contact,social link and address of the restaurant in footer section.
- Menu Page
- As a user they can view the list of menu items in the Menu page.
- As a user they can view the tab section on left side,list and price of the items on right side.
- As a user they can view the Maincourse,Starters,Desserts and Beverages on left side tab section.
- As a user they can view another tab section on right side contains Maincourse,Starters and Desserts.
- As a user they can click Maincourse on left side tab section will display list of Maincourse items,image of items and price for that items on right side.
- As a user they can click Maincourse on right side tab section will display list of Maincourse items,image of items and price for that items on right side.
- As a user they can click Starters on left side tab section will display list of Starters items,image of items and price for that items on right side.
- As a user they can click Starters on right side tab section will display list of Starters items,image of items and price for that items on right side.
- As a user they can click Desserts on left side tab section will display list of Desserts items,image of items and price for that items on right side.
- As a user they can click Desserts on right side tab section will display list of Desserts items,image of items and price for that items on right side.
- As a user they can click Beverages on left side tab section will display list of Beverages items,image of items and price for that items on right side.
- As a user they can view contact,social link and address of the restaurant in footer section.
- Gallery Page
- As a user they can view the grid of images about dishes and overlay their name of the dishes.
- As a user they can view contact,social link and address of the restaurant in footer section.
- Contact Page
- As a user they can view contact form in contact page.
- As a user they can view contact,social link and address of the restaurant in footer section.
-
Bootstrap 4.5 - is a framework for building responsive, mobile-first websites.
-
Google Font - is a font application.
- Pantone
- Sweet Pink
- Pale Pink
back to top
This project consists of 4 pages accessible from both the navbar and the footer.
- The navbar menu at the top and footer at the bottom of the page are consistent and responsive throughout the website.
- Each page has different images.
- The Front Image shows the Image of Restaurant.
- In the Menu section having Main Course, Starters and Desserts. User can clicked on it goes to Menu Page.
- Slides of Images
- Footer contains contact details, social network, and address.
- As a user they can view tab section on left and list of items on right side of the screen.
- The tab section having list of tabs contains main courses,starters,desserts and beverages.
- As a user they can view another tab section on right side contains maincourse,starters and desserts.
- As a user they can click any items from left side tab section will display the list,image and price of items on right side.
- As a user they can click any items from right side tab like Maincourse,starters and Desserts will display the image,list and price of items on right side.
- This page will contain grid Images of south Indian dishes.
- This page display the feedback forms.
- A further features could be adding extra dishes in menu page.
- Implementing online orders.
back to top
- HTML5
- The language used to create and sort the content of the website.
- CSS
- The language used to style the HTML5 elements according to the design purposes.
- Bootstrap framework
- I decided to use Bootstrap's grid container system as I wanted to design my project with a 'mobile first' approach.
- Gitpod
- I relied on Gitpod's dev environment to write the code for my project.
- GitHub
- I hosted my deployed website to GitHub, with previous versions of my code stored through the commit history.
- Balsamiq
- I used Balsamiq to make Wireframes for the project in skeleton stage.
back to top
- All testing has been made manually and have also been tested on different computers and phones.
- Google Devtools have been used to test the site on the following devices:
- Moto G4
- Galaxy S5
- Pixel 2
- Pixel 2 XL
- iPhone 5/SE
- iPhone 6/7/8
- iPhone 6/7/8 Plus
- iPhone X
- iPad
- iPad Pro
- Surface Duo
- Galaxy Fold.
- Home Page
- Image of Restaurant on website must load correctly.
- I checked the menu section in the middle of home page and images of three different category on the menu section are Maincourse,Starters and Desserts are loaded correctly.
- I checked if I click Maincourse will go to the Maincourse section in Menu page.
- I checked if I click Starters will go to the Starters section in Menu page.
- I checked if I click Desserts will go to the Desserts section in Menu page.
- I checked the slides image of dishes in the bottom of Home page are loaded correctly.
- I checked footer section are loaded correctly and social network links are direct to the correct page.
- All elements on the Home page must be responsive and resized for different size of screen.
- Menu Page
- I checked in menu page tab section on left side,image,list and price of the items on right side are loaded correctly.
- I checked if I click Maincourse on left side tab section will display list of Maincourse items,image of items and price for that items on right side are loaded correctly.
- I checked if I click Starters on left side tab section will display list of Starters items,image of items and price for that items on right side.
- I checked if I click Desserts on left side tab section will display list of Desserts items,image of items and price for that items on right side.
- I checked if I click Beverages on left side tab section will display list of Beverages items,image of items and price for that items on right side.
- I checked if I click Maincourse on right side tab section will display list of Maincourse items,image of items and price for that items on right side.
- I checked if I click Starters on right side tab section will display list of Starters items,image of items and price for that items on right side.
- I checked if I click Starters on right side tab section will display list of Starters items,image of items and price for that items on right side.
- All elements on the Menu page must be responsive and resized for different size of screen.
- Gallery Page
- All Images on gallery page are loaded correctly.
- Display the name of dishes are displayed correctly.
- All elements on the Gallery Page must be responsive and resized for different size of screen.
- Contact Page
- Images and forms on Contact page are loaded correctly.
- Tested Submit button on Contact page without any text in inputs to ensure that it provides the desired error of 'Please fill out this field' to appropriate required fields.
- Tested Email entry input by not entering a valid email address. This provides the desired error of 'Please include an @ in the email address'.
- Once user filled everything then click submit.
- Tested overall site colour.
- Checked grammar and spelling throughout document.
- Ran README text through Online-Spellcheck to double-check on grammar and spelling.
- Bugs
- Control the Image size in different size of screen.
- Fixed the navigation bar in different size of screen.
- Fixed the gap between two images in Gallery page.
- W3C HTML Validator - Document checking Completed. No errors or warnings to show.
- W3C CSS Validator - Congratulations! No Error Found.
back to top
I created my project on GitHub and used GitPod's development environment to write my code. Use the following link to view my live project: OD'S Restaurant
To make my project viewable to others, I deployed my project to GitHub Pages with the following process:
- Got to Github and log in.
- Then go to https://github.com/vijusuren/my-first-repo1.
- Click Settings in the tab menu above the content area.
- Scroll to GitHub pages-section.
- Then choose Master Branch from the source dropdown menu.
- Click to confirm my selection, and then it's live.
To Clone this project from the GitHub:
- Go to https://github.com/vijusuren/my-first-repo1.
- Click the “Code”-button and copy the http-address.
- Open Gitpod and open a new terminal, terminal → new terminal.
- In the terminal, paste the code and press enter.
More information about this process can be found on the following link: Configuring a publishing source for your GitHub Pages site
back to top
The content of this website refers to a Imagination company. The website purpose is to look realistic.
- Opening Image in the home page
- Image of Main Course
- Image of Starters
- Image of Desserts
- Image of Menu
- Image of Gallery
- Image of Contact Page
- Image slide in Home pages shows some of the famous Indian Items. I got from Bootstrap.com and I customized code for my site.
- w3school helps me to make Grid of Image in Gallery page.
- Menu page got a template from toolplate,w3school and I customized for my site.
- Grid Image and overlay in Gallery page from w3school and I customized for my site.
- Header and Footer from Resume Mini Project Code Institute and I customized for my site.
Thank you to the following people who helped with support, inspiration and guidance at different stages in the project:
- The guidance and support of my mentor Adegbenga Adeye
- The tutor support team
- The supportive Code Institute community.
- My family and friends for their patience.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
