Developed by, Dan Pearce

View the live site

KathyCakes is a site that helps to encourage people to bake and create their own versions of the popular dishes from the KathyCakes Cafe. The website is intended to be a hub of information about the cafe and is here to help people get in touch with the cafe. The site offers a range of recipes too to help encourage people to try it at home themselves!

The site is designed with ease in mind and is easy to navigate for all ages. With use of high-quality images to showcase the cafe and with the end goal purpose of attracting more sales.

1. Site Goals and Customer Experience
   • Customer Goals
   • Website Owner Goals
   • Target Audience
   • Customer Expectations
2. User Stories
   • User
   • Website Owner
3. Design
   • Structure
   • Wireframes
   • Colour
   • Fonts
   • Icons
4. Website Features
5. Technologies
   • Languages
   • Frameworks and Other
6. Validation and Testing
   • HTML Validation
   • CSS Validation
   • Accessibility Validation
   • Performance Validation
   • Device and Browser Compatibility
   • User Story Testing
7. Bugs and Errors
8. Deployment
9. Credits
   • Images
   • Recipes
   • Code
10. Acknowledgements

• Easily find information about the bakery
• Easily find information on how to find the bakery.
• Get in touch with the bakery.

• Provide an alternative way to allow customers to get in touch.
• Provide a source of information about the bakery.
• Provide recipes for customers to try at home.
• Increase profits in store.
• Increase awareness about the bakery.

• Regulars at the bakery.
• People who are looking to learn more about the bakery.
• People who are looking for new baking recipes.
• New customers who are looking to find the bakery.
• Customers looking to get in touch about an order/about placing an order.

• Easy to navigate with a functioning navigational bar.
• Consistent design throughout, including design on all types of screen sizes.
• Fully functioning links, and no pages that lead to errors or dead links.
• Accessibility throughout the website.

1. As a user, I want to easily find information about KathyCakes.
2. As a user, I want to easily navigate throughout the site.
3. As a user, I want to find information on how to find the bakery.
4. As a user, I want to find a way to get in contact with KathyCakes about an order.
5. As a user, I want to find a way to leave feedback to KathyCakes
6. As a user, I want to be able to find recipes that KathyCakes offers.
7. As a user, I want to find information about KathyCakes' social media.
8. As a user, I want to easily distinguish between different areas of information.

9. As an owner, I want to showcase products on sale at the bakery.
10. As an owner, I want to provide customers with information about the bakery.
11. As an owner, I want customers to easily find our bakery.
12. As an owner, I want customers to be able to get in contact with us.
13. As an owner, I want to provide customers with the featured recipes of the season.
14. As an owner, I want customers to be able to find all our recipes easily.
15. As an owner, I want customers to find out about how we started.
16. As an owner, I want customers to be able to navigate back to the home page if they access a link that does not exist on the site.

I wanted the structure of the site to be easy to navigate with clear headings and sections to split the pages up while also staying consistent with design. The website has a total of 11 pages 4 of which you always have access to using the navigation bar, 6 which are recipe pages and a 404 page.

These pages are what I would consider to be the 'most popular' pages, they include key information about the bakery.

• 'KathyCakes' index.html to provide about us information and featured recipes.
• recipes.html to provide a place to find all recipes featured on the site.
• find.html to provide a page to give location information for the bakery.
• contact.html to provide a page for customers to get in touch with KathyCakes.

The 6 individual recipe pages are each unique and provide information that is specifically for each recipe. They all include a detailed image and instructions on how to make each piece.

This page has been implemented to provide a fall back in case of input error to ensure the user can remain on the site easily.

Home Page

Recipes Page

Individual Recipe Page's

Find Us Page

Contact Us Page

The initial styling of colour comes from the header hero image of which the colour #3c4044 can be found amongst the background in some variation. I thought this would be a great colour to use as it's a charcoal grey which falls easily on the eyes. I also decided to go with #ecedf4 as the off white to counterbalance this colour. These two colours are used throughout the site and stay consistent with the theme.

I used WEBAIM.org to test the contrast of the two colours.

Colour Contrast

I have used three fonts in the creation of this website, Meow Script for the Logo, as this gives a more unique feel. Montserrat for the navigational sections in uppercase as this to me felt like it stood out. Finally, Nunito was used for the main body sections as I felt this made the site easy to read and not too harsh on the eye.

I used favicon.io to create the favicon icons for the site with the Meow Script font to stay consistent with styling. I also used icons from Font Awesome to add the logos for social media networks in the footer.

• The navigation and footer sections can be found on all pages. These are here for ease of access around the site and to always showcase social media sections.
• The nav bar is consistently placed at the top of the webpage for ease of access around the site. This is fixed into place no matter which page you visit! User Stories Implementation: 2, 7, 8, 9

• The Home/About Us Section is a key area to get information about the bakery.
• The section provides detail about how the bakery started and features a baked good at the top of the page.
• The section is intended to provide users with some background so they can get familiar with the KathyCakes. User Stories Implementation: 1, 10, 15

• The Signature Recipes Section is here to highlight the bakery's featured recipes of the season.
• The section is featured on the index page and lets customers know which dishes we think they should try out! User Stories Implementation: 8, 9, 13

• The Recipes Page is the hub for all of the recipes that is offered on the site.
• The page styles according to screen size and offers users a range to choose from. User Stories Implementation: 6, 8, 9, 14

• The Individual Recipe Pages are all unique and there are six of them in total.
• The recipes are featured with their own unique hero image to really highlight the food on offer.
• These pages are designed with the user in mind to keep ingredients and instructions sectioned for ease of use. User Stories Implementation: 8

• The Map allows us to pinpoint where the bakery is right on a map which is featured on the user's device.
• The Map is using the most popular online map in the world by Google and features the address for more old school customers. User Stories Implementation: 3, 11

• The Contact Form has been implemented as a way for customers to get in contact with KathyCakes with ease.
• The form can be used to enquire about orders or to leave feedback to the bakery. User Stories Implementation: 4, 5, 12

• The 404 error page has been implemented as a fallback if a user inputs the wrong link on the site, or if the page on the site doesn't exist.
• This page features a button that navigates them back to the home page. User Stories Implementation: 16

• HTML
• CSS

• GitHub
• GitPod
• Font Awesome
• Balsamiq
• Google Chrome Developer Tools
• Google Fonts
• Favicon.io
• Tiny PNG

All the HTML pages were tested using the W3C Markup Validation Service in order validate the correct function of this site. All pages have passed with no errors or warnings.

Home Page

Recipes Page

Apple & Cinnamon Crumble Cupcakes Page

Banana & Pumpkin Seeded Muffins Page

Chocolate Chip & Peanut Cookies Page

Grandma's Signature Lemon Loaf Page

Pink Grapefruit Muffins Page

Raspberry Twist Cupcakes Page

Find Us Page

Contact Us Page

404 Page

The W3C Jigsaw Validation Service was used to validate the correct CSS of this website. The CSS has passed with no errors

CSS

The WAVE - Web Accessibility Evaluation Tool was used to test the accessibility function of the website, all pages have passed with no errors.

Home Page

Recipes Page

Apple & Cinnamon Crumble Cupcakes Page

Banana & Pumpkin Seeded Muffins Page

Chocolate Chip & Peanut Cookies Page

Grandma's Signature Lemon Loaf Page

Pink Grapefruit Muffins Page

Raspberry Twist Cupcakes Page

Find Us Page

Contact Us Page

404 Error Page

Lighthouse in the Google Chrome Developer Tools was used to test the performance of the website, most pages are awarded a green mark - with more time I would investigate the issues on the two pages that didn't quite meet the green mark. I used Tiny PNG to help fix most of the issues on my initial performance results.

Index

Recipes

Find Us

Contact Us

Apple & Cinnamon Crumble Cupcakes

Banana & Pumpkin Seeded Muffins

Chocolate Chip & Peanut Cookies

Grandma's Signature Lemon Loaf

Pink Grapefruit Muffins

Raspberry Twist Cupcakes

404 Error Page

The project was tested and viewed on numerous devices, all of which with no errors:

• iPhone 12 Pro
• Surface Pro 3
• MacbookPro 16-inch
• iPad Pro
• Tested on various sizes and screen types using Google Chrome Developer Tools

The project was tested and viewed on the following browsers with no errors:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari

1. As a user, I want to easily find information about KathyCakes.

• Information about KathyCakes can easily be found right on the index.html page, either by scrolling down slightly depending on screen size or right on the landing page without movement.

User Story 1

2. As a user, I want to easily navigate throughout the site.

• The navigation bar is at the top of the website and is fixed into place, this is for ease of access on all web pages and all screen sizes.

User Story 2

3. As a user, I want to find information on how to find the bakery.

• The Find Us page is dedicated for users to find the bakery; this is located in the nav bar for easy access.

User Story 3

Result

4. As a user, I want to find a way to get in contact with KathyCakes about an order.

• The Contact Us Page is dedicated for users to contact the bakery, located on the nav bar, this can be used for orders.

User Story 4

Result

5. As a user, I want to find a way to leave feedback to KathyCakes

• The Contact Us Page is dedicated for users to contact the bakery; this can be used for customer feedback.

User Story 5

Result

6. As a user, I want to be able to find recipes that KathyCakes offers.

• The Recipes page is located on the navigation bar and provides a home page for all recipes on the site.

User Story 6

Result

7. As a user, I want to find information about KathyCakes' social media.

• Social Media links can be found in the footer of the website, this is on every page and uses icons of the logos of the social media sites for easily recognition.

User Story 7

8. As a user, I want to easily distinguish between different areas of information.

• Different information areas can be found in several places on the website, the most detailed is on the individual recipe pages which highlights and separates the ingredients and instructions sections.

User Story 8

9. As an owner, I want to showcase products on sale at the bakery.

• All the images used are of products that are for sale in the bakery, this way highlighting them on all pages allows us to showcase them.

User Story 9

10. As an owner, I want to provide customers with information about the bakery.

• Information about the bakery can easily be found right on the index.html page, either by scrolling down slightly depending on screen size or right on the landing page without movement.

User Story 10

11. As an owner, I want customers to easily find our bakery.

• Information on where to find the bakery can easily be found by using the nav bar, and going to find us, this brings you to find.html which showcases a map, and details the address.

User Story 11

Result

12. As an owner, I want customers to be able to get in contact with us.

• The contact us page which can be found by using the nav bar and clicking contact us provides a form for customers to get in contact with the bakery.

User Story 12

Result

13. As an owner, I want to provide customers with the featured recipes of the season.

• Scrolling down the index.html page will bring you to the Signature Recipes section, where key highlighted recipes can be found. These are decided on the season, with Christmas being the latest theme!

User Story 13

14. As an owner, I want customers to be able to find all our recipes easily.

• The recipes page located on the nav bar is always accessible and when clicked brings you to the page where all of the recipes are located.

User Story 14

Result

15. As an owner, I want customers to find out about how we started.

• On the index.html page, halfway through the about us section we can find information about how KathyCakes started. This information is easy to access as is right on the home page of the website.

User Story 15

16. As an owner, I want customers to be able to navigate back to the home page if they access a link that does not exist on the site.

• If you access a misspelt page or a page that doesn't exist on the site, you are brought to the 404-error page, this page features a link that navigates the user back to the home page.

User Story 16

• When I first ran the pages index.html and recipes.html through the validator the errors "Bad value 333px for attribute height on element img: Expected a digit but saw p instead." and "Bad value 500px for attribute width on element img: Expected a digit but saw p instead." were clear. This was because I didn't use styling within CSS for these elements. To fix this issue I simply added img {} to my CSS and styled accordingly.

HTML IMG Error

• When I initially deployed the site for live viewing the header hero images were not showing on the site, this was because I had their sources set to "assets/css/images/xfilename.png", this obviously would create an error as we were already in the CSS file. To fix this I simply changed the source to "../images/xfilename.png".

• The 404-error page includes a image of Kath, this was initially called "Kath.jpeg", when deployed to the live site, it didn't load so I changed the file name to "kath.jpeg" so it was all lowercase.

• The 404-error page didn't pass the first time in the validator as the 'error' class section didn't include a header, to fix this I included a header with some more description on the page.

HTML Header Error

• When initially running the contact.html page through the accessibility validator the were some errors due to a label being wrongly named in the email input section, to fix this I changed the label, and the page passed the test.

Form Error

• When initially running the 404.html page through the accessibility validator, there were errors due to contrast as I had forgotten to change the CSS for the 'error' section to change the colour. This was easily fixed by modifying the CSS slightly.

404 Error

This website was deployed using GitHub Pages by using the following steps:

1. I went to GitHub.com and from the left-hand side I clicked on this repository.
2. I navigated to the Settings section.
3. I scrolled down to the Pages section.
4. In the source drop down I selected main, and (root) and then clicked save.
5. This proceeds to generate a site using this repo.
6. I waited 10 minutes to allow the site to load, then after waiting a link appeared that brings us to the live site.

• muffins-tin.jpg by Foodie Girl with StockSnap Image on External Site
• lemon-loaf.jpg by Foodie Girl with StockSnap Image on External Site
• apple-cupcakes.jpg by Foodie Girl with StockSnap Image on External Site
• cookies.jpg by Foodie Girl with StockSnap Image on External Site
• muffins-dish.jpg by Foodie Girl with StockSnap Image on External Site
• grapefruit-muffins.jpg by Foodie Girl with StockSnap Image on External Site
• raspberry-cupcakes.jpg by Foodie Girl with StockSnap Image on External Site

• kath.png provided by Kath, my good friend who this site is dedicated to - who does not wish her profile information to be made public.

• Tiny PNG used to resize all images so they take less time to load.

All recipes were sourced from the internet, please find their references below:

• Apple & Cinnamon Crumble Cupcakes by Manali with site Cook With Manali find their recipe here.
• Raspberry Twist Cupcakes by Erin with site The Frozen Biscuit find their recipe here.
• Grandma's Signature Lemon Loaf by Emily Leary with site A Mummy Too find their recipe here.
• Banana & Pumpkin Seeded Muffins by Olive Magazine with site Olive Magazine.com find their recipe here.
• Chocolate Chip & Peanut Cookies by Kristen Anderson with site Taste.com.au find their recipe here.
• Pink Grapefruit Muffins by Kimberly Killebrew with site Daring Gourmet find their recipe here.

• HTML and CSS by Jon Duckett - used to help me understand floats more clearly.
• Mimo used to help me understand using flex in the nav bar.
• GitHub used to help me create a 404.html page for my site.
• Code Academy used to gain further knowledge in HTML and CSS.

I would like to thank:

• Mo Shami, my mentor throughout this project who has provided me valuable information in many aspects.
• Anybody on Code Institute's Slack who have provided valuable details over the last few weeks.
• Katherine Slinn, who this website is built for, for letting me create a website in her name.
• To my dear partner, Harry, who has been my rock throughout building this site and has given me so much space where I needed it.