GoodiesByBobo is a business that primarly sells home made cookies and cakes.I created a website for my friend's business because I believe in her passion and the quality of her products. As someone who has sampled her delicious cookies firsthand, I know that they are truly exceptional and deserve to be shared with a wider audience. I also believe that a website can help my friend's business stand out in a competitive market. With so many options for consumers to choose from, having a well-designed and user-friendly website can make all the difference in attracting new customers and building brand loyalty.
- Index – Table of Contents
- User Experience (UX)
- Features
- Design
- Technologies Used
- Testing
- Deployment
- Bugs
- Unfixed bugs
- Credits
- Acknowledgements
-
-
- As a first time visitor, I want to easily understand the main purpose of the site.
- As a first time visitor, I want to be able to easily navigate throughout the site to find content.
- As a first time visitor, I want to be able to easily view a gallery page.
- As a first time visitor, I want to be able to easily find how I can get in contact with the business owner.
-
- As a returning visitor, I want to be able to send a quick feedback to the business owner.
- As a returning visitor, I want to be able to check new products images.
- As a returning visitor, I want to be able to contact the business owner through email or phone.
-
- As a website administrator, I would like to easily update customer reviews
- As a website administrator, I would like to easily get contacted by email, phone or contact form.
-
-
- The navigation bar is an essential component of a website's user interface, as it helps users navigate the site and find the content they are looking for quickly and easily. The navbar consist of logo text and links to all three pages (home,gallery and contact).
- The navigation bar is an essential component of a website's user interface, as it helps users navigate the site and find the content they are looking for quickly and easily. The navbar consist of logo text and links to all three pages (home,gallery and contact).
-
- The footer is present on all three pages and consist of follow us text and four icons linked to the social media business accounts, providing users an easy access to the newest updates.
- The footer is present on all three pages and consist of follow us text and four icons linked to the social media business accounts, providing users an easy access to the newest updates.
-
- The home page inludes a hero image with a linear gradient to highlight the welcome text, the business purpose and a contact button to give the user the possibility to contact the business owner
- Product range can be seen right under the hero image and this section contains three collums with images and a short description for each type of product the business can offer.
- Homepage customer reviews section can be found under product range, they provide a valuabe feedback on the products. They help to establish trust with potential customers and can influence their purchasing decision.
- The home page inludes a hero image with a linear gradient to highlight the welcome text, the business purpose and a contact button to give the user the possibility to contact the business owner
-
- The gallery page has a simple design with a responsive layout using three breakpoints, starting with three collums for large devices like laptops and wide monitors, two collums for medium devices and one collum for smartphones
- The gallery page has a simple design with a responsive layout using three breakpoints, starting with three collums for large devices like laptops and wide monitors, two collums for medium devices and one collum for smartphones
-
- Contact form can be found on contact page. I have include a Contact us header with the following required fields: first name, last name, email address, message/feedback for the business owner and the send button which create a pull requested to the subbmited page after the form has been successfully submitted.
- Email, Phone Number and Address with gogole maps iframe can be found under the contact form. Features like mailto and tel have been used for an easy contact when using a smarthphone.
- Contact form can be found on contact page. I have include a Contact us header with the following required fields: first name, last name, email address, message/feedback for the business owner and the send button which create a pull requested to the subbmited page after the form has been successfully submitted.
-
- This page has been used as a confirmation for the contact form.
- This page has been used as a confirmation for the contact form.
-
- The business owner has requested blue, orange and yellow as main colors for the website. I used coolors.co to generate my colour palette.
- The business owner has requested blue, orange and yellow as main colors for the website. I used coolors.co to generate my colour palette.
-
- Google Fonts were used to import Montserrat into style.css
-
- Home page
Home page desktop
Home page mobile - Gallery page
Gallery page desktop
Gallery page mobile - Contact page
Contact page desktop
Contact page mobile - Submitted page
Submitted page desktop
Submitted page mobile
- Home page
-
- Google Fonts: was used to import the 'Monsserat' font into the style.css file
- Font Awesome: was used to add icons for social links.
- Git: was used for version control by utilising VSCode terminal to commit to Git and Push to GitHub.
- GitHub: was used as the repository for the projects code after being pushed from Git.
- Visual Studio Code was used as IDE editor.
- Balsamiq: was used to create the wireframes.
-
- Testing has been carried out on the following browsers :
- Chrome Version 111.0.5563.146 (Relase date: 2023-03-28) (64-bit)
- Firefox Version 109.0 (Relase date: January 17, 2023) (64-bit)
- Edge Version 111.0.1661.54 (Relase date: March 24, 2023) (64-bit)
- I could not test it on safari because I am using Windows
- Testing has been carried out on the following browsers :
-
| User Story | Screenshot |
|---|---|
| As a first time visitor, I want to easily understand the main purpose of the site. |  |
| As a first time visitor, I want to be able to easily navigate throughout the site to find content. |  |
| As a first time visitor, I want to be able to easily view a gallery page |  |
| As a first time visitor, I want to be able to easily find how I can get in contact with the business owner. |  |
| As a returning visitor, I want to be able to send a quick feedback to the business owner. |  |
| As a returning visitor, I want to be able to check new products images. |  |
| As a returning visitor, I want to be able to contact the business owner through email or phone. | |
| As a website administrator, I would like to easily update customer reviews |  |
| As a website administrator, I would like to easily get contacted by email, phone or contact form. | |
-
Page Device Screenshot Notes Home Mobile 
88 Performance due to time at which the first text or image is painted while on a 3G network Home Desktop 
Gallery Mobile 
84 Performance due to time at which the first text or image is painted while on a 3G network Gallery Desktop 
80 Performance due to having an image gallery Contact Mobile 
87 Performance due to time at which the first text or image is painted while on a 3G network Contact Desktop 
Submitted Mobile 
Submitted Desktop 
-
- The website was tested on Chrome, Mozilla and Edge browsers with no problems found. The website has been tested on different screen size using Google Chrome developer tool simulating devices like Iphone 12 Pro, Samsung S20 Ultra, Surface Pro 7 and Ipad Air.
- Iphone 12 Pro DevTool Screenshoot
- Samsung S20 Ultra Screenshoot
- Ipad Air Screenshoot
- Desktop Screenshoot
-
In the GitHub repository, navigate to the Settings tab, then choose Pages from the left hand menu
-
From the source section drop-down menu, select the Master Branch
-
Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment
-
Any changes pushed to the master branch will take effect on the live project
First bug was on the left image from home page because it had a smaller height than the other two. To solve the bug I had to set the paragraph text under the image to 14px. Second bug I had was because of the Facebook link from the footer was not opening in a new tab. To solve the bug I added taget="_blank" to the href Facebook social icon.
- There are not any bugs left that I am aware of.
- Photos downloaded from Pexels.com
- header-image.jpg by Pixabay
- cookie1.jpg by Nicole Michalou
- cookie2.jpg by Lina Kivaka
- cookie3.jpg by Nadin Trosh
- user1.jpg by ibadat singh
- user2.jpg by Anna Tarazevich
- rating.jpg downloaded from pixabay
- All other images from gallery page have been provided by the business owner.
- Code
- The code for responsive image gallery has been adapted from Terryl Brown youtube channel
- Contact form code has been adapted from w3schools
- I would like to thank Nathan Parry_4P_cohort_lead for looking at my project and idetifing the image and footer icon bug.
- I would like to thank Codeinstitute slack community for helping me during my studies and project creation.