This website is about Tina's Bakery a family-owned company that bakes and sells cakes, bread, buns, pastries and other confectionery products. As a user,you can order baking and confectionery products online by filling in the contact information or by making a call. This website is a way to help the user to find out what range of bakes the bakery has to offer their customers. Users can also visit Tina's bakery to buy freshly baked products and have a good coffee with freshly brewed coffee.

My github pages

UX

• Site owner business objective

• User objective

  • New user objective

  • Returning user objective

  • Site owner business objective

  • User stories

  • Structure of the website

  • Wireframes

  • Surface

Features

Technology

Testing

• Functionality Testing
• Compatibility Testing
• Code validation
• User stories Testing
• Issues and bugs
• Perfomance Testing

Deployment

Credits

Acknowledgement

License

Screenshots

Contact

This website is a great opportunity for the owner to be seen online. The customers can place orders at any time.

The website allows the owner to reach the target group and the market.

The user gets the best possible visitor experience.

• User can easily find several options about their pastries products. The pastries include images, descriptionS and prices.
• User can use the contact form to fulfill order.
• User can design their wishes by adding a file.
• User can choose a delivery date.
• User can write an additional request.
• User can visit and eat at the shop.
• Customers recommend us to new customers

• Users can find new products with the new theme.
• User can navigate easily on the site.
• User can get discount.
• User can come with their wishes.
• User can write a review.

• I want to make sure that my customers can easily navigate the website without a problem.
• I would like my customers to be able to find what are they looking for.
• I want to give satisfaction to my customers from their additional request and their special order.
• I want the customers to be able to design or upload their requests.
• I want to give my customers compensation or discounts if a problem occurred.
• I hope that the customers will come back with a new order.
• I want to deliver the orders on time.

• I wish that I can find what I am looking for.
• I wish that it is not complicated to purchase an order.
• I wish that I can ask for help if I need it.
• I hope that I can get my order on time.
• I hope that it is tasty as it looks like.
• I hope that it is as perfect and nice as the images.
• I hope it is not that expensive.
• I wish the staff and personal are helpful and nice.
• I hope that they understand my needs.

• I wish that I can find my favorites.
• I hope they have something new and interesting to offer.
• I wish I can get a discount.

This is a responsive website which works on all type of devices. The majority of visitors can quickly find what they want, interactively or creatively way. The navigation menu is a great tool for the user to navigate the website easily.

I used Balsamiq wireframe for the skeleton.

View the wireframe here

Colors used on the project:

• body:
  • rgb(230, 231, 231)
• Menu-bar:
  • linear-gradient(purple, pink, white)
• Nav-link:
  • color: hsl(120, 3%, 8%)
  • hover: background-color: #fff
• h2, h3, h4, h6:
  • darkorchid
• h5: #0000ff
• container and cards:
  • #ffccff
• button, button1, button hover
  • lightblue
  • white
  • #cce6ff
• tables:
  • rgb(199, 225, 241)
• forms:
  • rgb(237, 222, 241)
• footer, footer p:
  • aquamarine
  • #990099
• social links:
  • #ff00ff

• I used Poppins, Arial and sans-serif.

• The images was borrowed from Canva, Pixabay and Besthqwallpapers.

Back to Table of contents

The website contains 7 pages. The navigation Menu is linked to a pdf file that opens to a separate window.

The navigation is placed on the left upper corner of the page. It is a responsive navigation bar, that works on all devices.

• The navigation bar contains 7 pages and a logo on the right side:
  • Home
  • Cakes
  • Bread
  • Gallery
  • Menu
  • About
  • Contact

The footer contains the copyright information and social links which connect webpages to a separate tab in a browser. The footer appears on all pages.

• The homepage includes two image sections.
• 1 image for decoration of the first section.
• 4 images represent the bakery's customer's favorite cakes and pastries with descritpions and prices.

• This page contains 12 images that are divided into different categories:
• 4 images for the wedding cakes category
• 4 images for the Birthday cakes category
• 4 images for the Valentine's day cakes category

• This page contains images of different kinds of bread with descriptions and prices.

• This page contains 10 different kinds of pastries and cakes images.

• The menu page contains only a Menu on pdf.

• This page contains three sections.
• The first section describes a lot of information about Tina's bakery.
• Second section contains carousel with three images.
• The hird section is about customer reviews.

• This page contains an image, phone number, address, email, and an order form. Users can purchase orders by filling this form.

• Improve the quality of the website by adding a Cart for direct order.
• Possibility to pay with bank cards and credit cards as VISA, Mastercard, and other cards.
• Details of all ingredients under the product names.
• Add popovers.
• User rating system and experience of our products.
• Add another page where customers can order present cards
• Implement newsletter function.

Back to Table of contents

• CSS used to style the site
• CSS gradient used to create the background color of the menu-bar.

• Bootsrap version 4.2.1.

• For the social links icon in the footer section.

• As a font resource.

• As a code hosting platform to store the project, the README file and to add, commit and push.

• As the main source to create the project.

• As a version-control system tracking.

• a wireframe to create the desktop and mobile wireframe.

w3 Jigsaw to validate CSS.

W3C Validatorto check HTML

Am I Responsive tool for previewing the site on different devices.

Back to Table of contents

• I used the W3 validator to check and find error and issues on the HTML code and CSS.

  • The result after running the final test on W3 HTML:

  Document checking completed. No errors or warnings to show.

  • Result after running the final check on W3 CSS:

  Document checking completed. No errors or warning to show.

• Chrome developers used to check the performance of the site.

Am I Responsive used to generate the site images on all devices such as desktop, tablet , mobile and laptop

The website was tested with different devices such as Motorola 6, Ihpone 8,Ihpone 7, Lenovo Thinkpad, MSI Laptop, Lenovo tablet, Huawei mobile.

The site was run by the following browsers:

• Google chrome
• Opera
• Firefox
• Microsoft edge

• Problem with overflow on the mobile view:

I solved it by adding: class="container-fluid" to all the sections and the footer to get rid of the overflow.

• Error 304 and 404 on my workspace. I googled what is this for code. After I deleled the browser history everything works fine again.

• After running the W3 Validator I got the following errors:

• CSS error: Too many values or values are not recognized.

I removed the line to fix the problem.

• Poor values of Alt on the images.

I gave the images the correct value.

• Section lacks heading.

I added heading elements between the sections.

<h3>Call us: Tel 0523-40 466</h3> and <h6>Fill the order form below</h6>

• After running performance those issues appeared:

  

  I soLved the problem by changing the image into jpg and resized the images by using compressor

  

  I solved it by adding <a rel="noreferrer" target="_blank" href="#"> for the social links.

  

  I resized the DOM size.

I shortened the text from we accept all orders, large or small, standard or special. We will do our best to satisfy our customers to Fill the form below

I added width and height on the images above

Final result of performance:

• I want to make sure that my customers can easily navigate the website without a problem.

Customers can use the navigation bar to search through the site.

• I would like my customers to be able to find what are they looking for.

Multiple choices of images will help customers through their purchasing.

• I want to give satisfaction to my customers from their additional request and their special order.

Customers can find information about the additiomal request on the contact page. Customers can easily fill in the request field.

• I want the customers to be able to design or upload their requests.

The possibility to send and upload a customer's file or picture can easily be done by filling in the order form.

• I hope that the customers will come back with a new order.

Customers can make new orders by surfing on the home page, cakes page, and bread page.

• I want to deliver the orders on time.

By choosing a date on the calendar on the contact form, customers can get their orders on time.

• I wish that I can find what I am looking for.

More information can new customers find on all pages.

• I wish that it is not complicated to purchase an order.
• I wish that I can ask for help if I need it.

Use the contact information by making a call, sending an email, fill the form, or coming for visit to the shop.

• I hope that I can get my order on time.

Customers can select the date of delivery.

• I hope that it is tasty as it looks like.
• I hope that it is as perfect and nice as the images.

Customers can have a look at the images.

• I hope it is not that expensive.

All the products are marked with prices.

• I wish the staff and personal are helpful and nice.

Customers can use the contact information.

• I hope that they understand my needs.

The additional request is for that. Customers can explain and write in detail their wishes.

• I wish that I can find my favorites.

Customers can scroll through the images.

• I hope they have something new and interesting to offer.

New theme for a different season.

• I wish I can get a discount.

Customers get a discount after the third order.

w3 Jigsaw to validate CSS.

W3C Validatorto check HTML

Back to Table of contents

To deploy the Github pages, I used the following steps:

• Before creating the repository, I used Code institute student full templalte link.
• Click on use this template and create my repository.
• Repository name
• From the settings, under the GithHub Pages, I choose master branch and clicked on the Save button.
• My github page is published at site name
• Back on the top of my repository pages, besides the green gitpod button. I wrote a short description of my project linked in with my github page. I added Tina's Bakery as topics.

Forking is making a copy of the repository:

Steps to fork the GitHub Repository

• Log in into your Github account.
• Find the Github repository with you'd like to fork.
• Go to the top of the repository page here.
• Click the Fork button on the upper right-hand side under your profile photo.
• Now, you have a copy of the repository on your Github account. Clone a repository:
• You have to determine the URL for the forked repository before you can clone it
• Copy the URL and then use it with git clone
• Remember that it is the copy you have to clone not the original repository.

Back to Table of contents

• These websites were a great help for me during this project:

  • W3 schools

  • Google search

  • Pixabay

  • Canva

  • Besthqwallpapers

  • Free logo design

  • stackoverflow

  • Google chrome

• Bootstrap: Hamburger menu
• W3s chools: Color of the navigation menu
• Bootstrap: Cards
• W3 schools: Jumbotron
• Bootstrap: Forms
• W3 schools: emoij
• W3 schools: Symbols
• W3 schools: Arrows
• Bootstrap: Carousel

The images were obtained from:

Free logo design used to create the logo.

canva

Besthq wallpapers

pixabay

• Logo for the Navbar. The logo is applied to all pages.

  • The logo

• Home images:

  • link to the image

  • birthday deluxe

  • cheese cake deluxe

  • fruit deluxe

  • wedding deluxe

• Cakes images:

  • wedding cake deluxe nr1

  • wedding cake deluxe nr2

  • wedding cake deluxe nr3

  • wedding cake deluxe nr4

  • birthday cake deluxe nr 1

  • birthday cake deluxe nr 2

  • birthday cake deluxe nr 3

  • birthday cake deluxe nr 4

  • valentine's cake deluxe nr 1

  • valentine's cake deluxe nr 2

  • valentine's cake deluxe nr 3

  • valentine's cake deluxe nr 4

• Bread images:

  • rye bread

  • rolls with chocolate

  • loaf

  • sport bread

  • coarse loaf

  • rolls with seeds

  • mini baguette

  • gluten free rolls

• Gallery Images:

  • cake 21

  • cake 19

  • cake 20

  • cake 16

  • cake 15

  • cake 10

  • cake 11

  • cake 23

  • cake 12

  • cake 24

• Menu pdf:

  • Link to the Menu

• About images:

  • bagery

  • cake26

  • bakery

• Contact images:

  • cake 17

    Back to Table of contents

  ---

• After speaking with my mentor about my idea, he suggests that I can use Nuts about cake as a source of inspiration. Thanks to him, I managed to fulfill this project.

• Student slack support.

• No license needed. All the images are free.

Home Cakes Contact

• Author: Sojasmine Gjerstad. Student at Code Intsitute,2021.

  Project link: My github pages

Back to Table of contents