(Developer : Asma Aamir)

Live Webpage

1. Project Goals
   1. User Goals
   2. Site Owner Goals
2. User Experience
   1. Target Audience
   2. User Requrements and Expectations
3. Design
   1. Design Choices
   2. Colour
   3. Fonts
   4. Structure
   5. Wireframes
4. Technologies Used
   1. Languages
   2. Frameworks & Tools
5. Features
6. Testing
   1. HTML Validation
   2. CSS Validation
   3. Accessibility
   4. Performance
   5. Device testing
   6. Browser compatibility
   7. Testing user stories
7. Bugs
8. Deployment
9. Credits
10. Acknowledgements

• Find a bakery that offer cake of all kind of events.
• Find out what flavours of Cupcake and Brownies are baked daily.
• Find the location of the bakery

• Boots business reputation and sales
• Provide informtion about the business to new to returning users
• Giving user the accessbity to have a look what business has to offer them at their own time
• providng user to stay in contact with the business different ways.

• Users looking to hire someone to bake their Wedding Cake or birthday cake.
• User looking for last minute Cakes for birthday or any events.
• Walk in user having the option to chose cupcake, brownies and Cakes takeaway with them.

• Good presentation and a visually appealing design
• A simple and easy navigation system, where the user can easily find relevant information
• The content is efficient and accessible
• Links and funcation that work as expected

1. As first-time user, I want to know where I can find bakery contact number.
2. As first-time user, I want to know how to find the bakery address.
3. As first-time user, I would like to do cake test for my wedding before I place my order.
4. As first-time user, I want to know what kind on ingredient bakery uses.

5. As a returning user, I want to know where I could find daily freshly bakes flavours of cupcake and brownies.
6. As a returning user, I would like to alter my birthday cake order where do I do.
7. As a returning user, I want to know where can I find infromation about current or upcoming competition.
8. As a returning user, I want to when can I place Mother's Day cake order.

When design the webpage I kept the bakery and the logo in vision, giving its users experience of colour, happiness and comfort.

When choosing the colour scheme, I kept the colourful cakes and happiness one feel when they are eatting a cake. Also keeping the logo in mind so, I went for pink and bright colours.

When deciding on the font I kept the logo in mind and how the cake gives a smooth finish. So, I chose dancing script for my heading matching my logo and caveat so it's easy-to-read the content.

Upon arriving on the website, the user sees the logo with navigation bar which takes them to any of the pages they would like. However if the user wanted to go back to home page they could just click the logo on any page and would take the user back to home page. The website consists of four pages:

• A home page - that has a carousel and two section one for Daily Flavours and second section is for News about the bakery.
• A about us page - that tells user about the bakery, the ingredient the bakery uses and how everything is freshly made every day.
• A product page - that gives you option to choose from products cakes, wedding Cakes, Cupcakes and Brownies.
• A contact us page - that has a form allowing user to send bakery a message or enquiry, information on how contact bakery and a Map to find the bakery.

Home

About Us

Products

Contact Us

• HTML
• CSS

• GitHub
• GitPod
• Balsamiq
• Google Font
• Font Awsome
• Pexels
• Tinypng
• Favicon.io
• Bootstrap v 5.5

The Website consists old four pages and its consists of 15 features.

The logo and the navbar is featured on all four pages and is fully responsive thus, the navbar does change in to a toggler (humburger) on a smaller screen. Which inculdes links to all four pages. The logo on the left of the page is a link to home page is well, this allows the user to get back to home page quickly and effiently.

When the user open the webpage they are welcomed with a 4 slide show, thats gives them the option for them to navigate to the next slide or to previous slide.

Allowes the user to have a look what flavours that are avalibale for cupcakes and brownies that are baked fresh every-day.
User story covered: 5

Allowes the users to see upcoming events order deadlines and if we have any ongoing or coming competition, whihc allows them to enter and win a price.
User story covered: 7 and 8

The Footer is featured on all four pages and it contains contact information and social media links.
User stories covered : 1 and 2

This pages consists of three section the first section gives a description on what bakery do and where they located with a image of the front on the counter as you enter the store. Second section tell is a video, thats mute and with controlls showing you cake mixture being mixed. Third section has some informtion about our recipies and ingredient with a image between.
User story: 6

On this page users are able to see four section and Each section has four different flavour of that specific item and some information about what it contain's.
User stories: 3 and 6.
The four section are:

• Cakes

• Wedding Cakes

• Cupcake Flavours

• Brownies

User can use the form to contact the bakery to place orders or arrange a meeting for wedding cakes.
User stories: 2 and 3.

Provides the user with store locoation information and contact details.
User story: 1 and 2.

Shows the user where the store is locoated on embeded Googel Map.
User story: 2.

I used the W3C Markup Validation Service to validate the HTML of this website. All pages pass with no errors and no warning were shown.

Home

About Us

Products

Contact Us

I used the W3C Jigsaw CSS Valdation Service to validate the CSS of this website and it all passed. style.CSS

Home

About Us

Products

Contact Us

To test perpormace of the website Google Lighthouse in Google Developer Tools was used.

Home

About Us

Products

Contact Us

• Mac
• iPad
• iPhone 13 Max

In addition, to above devises I have also tested using Google Chrome Developer Tool Device Toggeling option for the most populer devices that are currenty available on the market.

I have tested the website on few different browser such as:

• Google Chrome
• Safari
• Microsoft Egde

1. As first-time user, I want to know where I can find store contact number

Story 1

2. As first-time user, I want to know how to find the store address.

Story 2

3. As first-time user, I would like to do a cake test for my wedding before I place my order.

Story 3

4. As first-time user, I want to know what kind on ingredient bakery uses.

Story 4

5. As a returning user, I want to know where I could find daily freshly bakes flavours of cupcake and brownies.

Story 5

6. As a returning user, I would like to alter my birthday cake order where do I do.

Story 6

7. As a returning user, I want to know where can I find information about current or upcoming competition.

Story 7

8. As a returning user, I want to when can I place Mothers Day cake order

Story 8

I followed the below steps to deploye this website using GitHub pages :

1. Go to GitHub repository navigation then setting
2. On the left hand side, you see Pages
3. Then on the middel of the page you see Source: there you will see branch and select Main
4. The select folder to be root and the save
5. It will take couple of mintues after refreshing your page you should see a light green ribbon on the top saying "Your site is published at https://asmaaaamir.github.io/CI_PP1_TSO/".

The HTML code for Navigation Bar [https://getbootstrap.com/docs/5.0/components/navbar/] was taken from Bootstrap v5.0. I did remove the search option from it and removed the colour in the background,The Carousel code was taken from Bootstrap is well [https://getbootstrap.com/docs/5.0/components/carousel/#with-indicators]. But i did add one more slide to the carsouel

The images and video are from two different website below I will tell in appearance of order;

• Home Page
  • All the four images in the carousle are from Pexels .
    • Image 1
    • Image 2
    • Image 3
    • Image 4
  • Image in background for daily flavour and News is from Annacakecouture.
    Also the images in these section are from there.
• About Page
  • Caked on display in a shop image is from Annacakecouture
  • The video is from Pexels
  • The last image on this page is from Crumbs and Doilies.
• Product Page
  • The Cake, Wedding Cake and Cupcake section images are from Annacakecoutre.
  • The Brownines images are from Crumbs and Doilies.

I would like to take this opportunit to thank :

• My mentor Mo Shami for his feedback , advise and guidance
• The two tutor who helped me solved two issue Alex and James.
• My mum Farida Liaqat for looking after my daughter and my daughter Zainab Rana for being very patient with me while I sit on computer all day.