Kaku's Kitchen is a 100% Indian vegetarian cloud kitchen based in Penarth, established in 2020. Renowned for its authentic flavors and dedication to vegetarian cuisine, Kaku's Kitchen serves a variety of delicious homemade Indian dishes made with love and care. This project is a four main pages website designed to showcase the essence of Kaku's Kitchen, featuring a menu, a contact page, and information about the kitchen's story and philosophy. Fifth page is a success page or Thank you page in continuation with the contact page form submission. 404 page has also been added.
Deployed via GitHub Pages, this responsive website offers a delightful browsing experience and highlights the charm of authentic Indian vegetarian food.
site : Kaku's Kitchen
- Planning
- Design
- Existing Features
- Future Features
- Technologies Used
- Final Design
- Deployment
- Testing
- Credit
This website was designed with careful consideration of its purpose, target audience, and user needs. The goal was to create a visually appealing, responsive, and user-friendly platform to showcase the authentic Indian vegetarian cuisine offered by Kaku's Kitchen.
-
Vegetarian Food Enthusiasts:
- Individuals looking for authentic, homemade Indian vegetarian dishes that capture the essence of traditional Indian cuisine.
-
Cultural Food Lovers:
- Food enthusiasts seeking to explore the rich flavors and traditions of Indian vegetarian food.
-
Vegetarian Working Couples:
- Busy working couples who prefer a healthy, home-cooked alternative to eating out regularly but want the convenience of prepared meals.
-
University Students:
- Students living away from home who are vegetarians and need affordable, healthy meal options. Kaku's Kitchen offers a perfect solution for students missing home-cooked meals.
- As a customer I want to know about the business. What it is and what does it offer.
- As a customer I want to be able to easily navigate the website.
- As a customer I want to be able to easily find the contact details.
- As a customer I want to find out the menu and speciality of the business.
- As a customer I want to confirm that business recieved my queries and reply.
- As a customer I want to know if it is online order or I need to make a call to order.
- As a customer I want to make sure if cloud kitchen business is following the hygiene routine.
- To create a visually appealing, easy-to-navigate website that reflects the warmth and authenticity of Kaku's Kitchen.
- To provide detailed information about the menu and highlight the 100% vegetarian commitment.
- To make it simple for users to contact Kaku's Kitchen and place orders.
- To increase awareness of the cloud kitchen in the local community.
- To ensure the site is responsive and accessible across all devices.
-
User-Centered Design:
- Created a simple, intuitive layout with clear navigation to make it easy for users to explore the site.
-
Content Focus:
- Highlighted key information such as the menu, contact details, and the story of Kaku's Kitchen prominently.
-
Responsive Design:
- Used HTML, CSS and Bootstrap to ensure the website works seamlessly on desktops, tablets, and mobile devices.
-
Visual Appeal:
- Incorporated warm colors, high-quality images of food, and an inviting design to capture the essence of Kaku's Kitchen.
-
Fast Deployment:
- Deployed the site on GitHub Pages for easy access and updates.
Very less colors are used so that focus remains on images. Color Adobe to create the color pallete. contrast of color is good.
The font-families chosen are montserrat and Lora. For consistency I used montserrat for headings and titles and Lora was used for the text on the body and cards body.
Imagery plays a very important part in the design for this website. I chose bright colourful tempting food images that complimented each other on the page. I added a hoover effect on the images of home page to give it more life. Images are taken from StockAdobe. Images on the menu page are taken from the actual business called Kaku's Kitchen, based in Penarth.
Reason for design - I went with a basic yet responsive design that will be inviting to all users of the website aswell as giving out all the relevent information.
Favicon is added in the header of every page with the title.
Navigation bar is located at the top of every page, contains links to all the pages of the site to enable ease of navigation in one convenient location. it is fully responsive for all the devices as laptop, desktop, mobile and tablet. The logo is clickable with a link back to the home page for enhanced UX.
Desktop:
Mobile:
Navigation menu is converted to three vertical bars to save the space. which shows its responsiveness.
- Footer is available on each page and contain address, Email and phone no details along with social media links for Kaku's Kitchen. These links will open in a new tab for easy navigation for the user.
- The footer is designed to encourage the user to visit Kaku's Kitchen's social media sites to keep them connected and have the most up to date information.
Call to Order button is provided in the hero/header section for convenience. User can quickly make a call and place order just by clicking that button. This button is connected with the contact information in the footer at the moment.
Popular dishes images are added in the main section of home page. Images are high quality to make user tempting to buy food. hoover effect are added for better user experience.
I have added 5 star rating for user assurance and given reasons to choose the cloud kitchen.
Easy to read / navigate menu images are used. Prices and ingredients are clearly mentioned with individual food item. Phone number is mentioned in every menu card to make a quick call and place a order.
Mission and history is provided in about section.
Contact page contain a hero image same as home page and about page. In the main section Form has been added on the contact page, where all the validations has been applied.
- Call to order / Call to action button must make a call to the business phone number.
- In the contact page st click of form submit button there must be notification to the business with all the information provided in the form.
- Business should be able to make changes/ add more items in the menu and the prices on regular basis.
- I will add the testimonials /customer reviews either on the home page or about page.
Languages Used
- HTML - To create a basic site.
- CSS - To create a nice style and to stand-out.
Balsamiq - Used to create wireframes.
Github - To save and store the files for the website.
Google Fonts - To import the fonts used on the website.
Font Awesome - For the iconography on the website.
Bootstrap Version 5 - The framework for the website. Code for the navigation bar, carousel, cards and form were used and modified. Additional CSS styling was also implemented in style.css.
Favicon.io To create favicon.
Color Adobe To create the color pallete
StockAdobe - All the images are borrowed from Stock Adobe.
Image Resizer- For resizing images and compress them.
Compressor - To compress images.
Convertio - To covert images to WebP format.
Am I Responsive? To show the website image on a range of devices.
Webaim To test accesibility of the deployed website.
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling. Visual Studio Code is used as an editor to write code.
This site was deployed through GitHub Pages using the following steps:
- Log into GitHub.
- Locate the repository. In my case it is Deepika-Garg/Kaku's Kitchen
- Click the "settings" button.
- Then go to "Pages" tab in the left hand side sidebar.
- Once on the pages site I would ensure the following settings were applied
- Source would need to be set to ‘Deploy from branch’
- Branch will need to be set to main and then root.
- Click the save button.
The site has now been deployed, please note that this process may take a few minutes before the site goes live. 7. The page will update and at the top it will say: "Your site is ready to be published at https://deepika-garg.github.io/KakusKitchen/
To fork the repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, Deepika-Garg/Kaku's Kitchen
- Click the Fork button in the top right corner.
To clone the repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, Deepika-Garg/Kaku's Kitchen
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- In your IDE of choice, open 'Git Bash'.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
I tested my site throughout the entire build. I have gone through each page using google chrome developer tools to ensure that each page is responsive on different screen sizes and devices and troubleshoot any issues as I went along.
Please refer to Test Document for all information on testing Kaku's Kitchen.
Menu images in menu page and business owner image in about page have been taken from the actual business with permission. All the content has been written by developer/me. All the food images are taken from StockAdobe website. 404 page image is made from croping the image from dribble(source is mentioned in media section).
Code insitute - Inspiration from Love Running & Boaredwalk projects
Favicon.io To create favicon.
StockAdobe - All the images are borrowed from Stock Adobe.
Image Resizer- For resizing images and compress them.
Compressor - To compress images.
Convertio - To covert images to WebP format.
Am I Responsive? To show the website image on a range of devices.
404 Image- credit goes to this image.
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
Visual Studio Code is used as an editor to write code.
I would like to thank following people for the help and advise they have given me in this project.
- My mentor Precious Ijege for his guidence and feedback throughout this milestone project.
- Marco Tot our class cohort facilitator for his constant assistance and encouragement.
- Slack Community for their endless support.
- Kera Cudmore for telling how to create the structure of Readme document.
- Code institute for the outstanding course documentation and for providing opportunity to learn and develop this project.
- Finally, I would like to thank my friend to allow me to use her business details for this project.
This repository was originally forked from my previous GitHub account due to an issue with accessing Gitpod. After facing difficulties, I created a new account and continued the development here to complete the project. The work presented in this repository is entirely my own, and no external contributions were made to the source repository.