A restaurant with all the Ugandan food you miss! Visit our website and check out our amazing dishes at good rates.

Project aims to sell Ugandan dishes to the people of Alicante, Spain while spreading the culture of the Ugandan people. With this, there will be an indirect boost in tourism by those who would like to visit Uganda and have an experience.

This site was designed to enable the users;

• make a choice of foods from the restaurant.
• access all pages easily even with poor internet connectivity.
• easily find contact information and social media pages of Kedi's restaurant on facebook, twitter, instagram and youtube.
• see the design of the restaurant on the homepage/ welcome screen.
• navigate through all kinds of foods that have been categorized with simplicity using the main image navigation bar.
• find their way to any page using constantly available links to all pages wherever they are.
• view all features of the website by carefully selecting colors, pictures, fonts and styles that will not obstract the view of the users while they navigate the site.
• report any disatisfaction with service to the owners of the restaurant using an easily accessible form in the header
• make requests through a contact form and schedule one-on-one engagements.
• to navigate the site with ease on any device and operating system as long as they have internet connectivity.

The site is organised with graphical content to aid new users in navigating the site with ease. The home page contains a visible header with navigation (A) to a contact form as well as the same home page incase the user is on another page. Below the Header, we have an image navigation bar (B) with links to all 4 categories of foods (Breakfast, lunch and dinner - having the same offers, and Events- parties or other ocassions) as shown in the images below.

On making a selection from the food categories in image navigation, the suer will be redirected to the detailed list of all listed foods. The details will include the name (D), image and description (C), and price (E) as shown below.

In case of any need of contacting the restaurant, there are contact details and social media links listed on the footer (G) section and a link to the contact form (F) on the header as well.

• Create shopping cart
• Enable sign-up and Login
• Integrate payment processor

Inspiration of the color scheme came from the uber website.

The site also uses google fonts for the text content

Additionally, font-awesome is used for social media icons in the footer

Wireframes were designed using Balsamiq wireframes Version: 4.5.5.

Sample screenshots on various screen sizes are shown below

DESKTOP PAGES

a) Home page

b) Food detail page

c) Contact Page

TABLET PAGES

a) Home page

b) Food detail

c) Contact Page

MOBILE PAGES

a) Home page

b) Food detail page

c) Contact Page

• The site is built on HTML and CSS.

All html elements where tested for intended functionality, all links where tested and the screen responsiveness was verified on mobile, tablet, and desktp screen resolutions.

The overall quality of the html, and css code was checked using the html validator and jigsaw online tools respectively.

Sample errors found on html code were fixed as shown below

Errors found on the css stylesheet were fixed as shown below

The site was tested on the browsers listed below

Sample test result images with screen resolutions and one physical mobile test on Nokia 9.0

Page loading performace was tested using Lighthouse. Results shown below

1. Log into GitHub and locate your repository.
2. On the top left corner, search for "kedi1991/project01" and select it from the results.
3. On the right hand side of the page select fork to create and copy of the original under your repository

To deploy the project using gitpod, run the command add . followed by git commit -m "descripton of code changes to push" Finally, run git push to push the changes to yout github repository.

1. While on the project root folder, go to settings .
2. Navigate to the pages tab on the left navigation panel.
3. Go to Build and deployment > Branch. Select main then click save.
4. At the top just below the GitHub Pages heading, you will be notified of successful deployment as shown in the image. This may take about 60 seconds to reflect. Incase It takes longer, try refreshing the page.

• Google lens for identification of image origin
• Windows Paint 3d
• Windows photos
• Balsamiq wireframes
• Google developer tools
• Gitpod
• Github
• Firefox, Google chrome and Edge
• Windows snipping tool
• https://websitemockupgenerator.com/
• https://www.img2go.com/
• Markdown tables generator

Images and recipe from:

• pinterest
• Top Ten Uganda
• Nnyonyi.com
• newvision.co.ug
• nilepost.co.ug
• Africa food Network
• alamy.com
• tourguideuganda.com
• https://sarasglobalcooking.blogspot.com/
• https://www.alamy.com/
• daily monitor uganda
• https://4foodssakeeat.wordpress.com/
• wikipedia
• https://www.tasteatlas.com/
• chillies.co.ug

Thanks to:

• CI personal mentor - Harry Dhillon for professional guidance
• The CI jul-2022-5p class and tutors
• My wife for letting me code in peace :)