This is a website to attract clients and create an online presence for Pam’s Pop Cake business. It is a fully responsive design for fluid user navigation across various platforms and devices.

• User Stories

  • First Time Visitor Goals

    1. • As a First Time Visitor, I want to easily see the available design shapes and how to order
    2. • As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
    3. • As a First Time Visitor, I want to know if there are different flavours.
    4. • As a First Time Visitor, I also want to connect with the business on social media links.

  • Returning Visitor Goals

    1. • As a Returning Visitor, I want to find see new designs
    2. • As a Returning Visitor, I want to be able to contact the business to place orders
    3. • As a Returning Visitor, I want to find social media links.

  • Frequent User Goals

    1. • As a Frequent User, I want to check to see if there are any seasonal designs.

• Colour Scheme

  • The three main colours used are Pink, Blue and white.

• Typography

  • The Oxygen font, an attractive and common font, is the main font used throughout the website. Sans Serif is used as the fallback font in case for any reason, the font isn't being imported into the site correctly.

• Imagery

  • Imagery is bright and vivid with pictures to captivate users.

• Wireframes

  • Balsamiq:, a pen and sheets of paper was used to create wireframes.

• Features

  • Responsive on all device sizes Interactive elements

• HTML5

• CSS3

• Bootstrap 4:

  Bootstrap was used to assist with the responsiveness and styling of the website.

• Hover.css:

  Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.

• Google Fonts:

  Google fonts were used to import the 'Oxygen' font into the style.css file which is used on all pages.

• Font Awesome:

  Font Awesome was used on all pages throughout the website to add icons for aesthetic design and UX purposes.

• jQuery:

  jQuery came with Bootstrap to make the navbar responsive, also for the smooth scroll function in JavaScript.

• Git

  Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub:

  GitHub is used to store the project's code after being pushed from Git.

• Balsamiq:

  Balsamiq was used for wireframes during the design process.

1. W3C Markup Validator
2. W3C CSS Validator
3. Responsinator

The W3C Markup Validator and W3C CSS Validator Services were consistently used to validate every page of the project to ensure there were no syntax errors in the project. Responsinator was used to check the responsiveness across various devices.

• Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. • As a First Time Visitor,I want to easily see the available design shapes and how to order
       • Users are immediately greeted with a carousel slider displaying different styles, also each slide has an "order now" call to action button.
  2. • As a First Time Visitor, I want to be able to easily navigate throughout the site
       • User can easily access page from the Menu bar at the top-right.
  3. • As a First Time Visitor, I want to know if there are different flavours
       • User can see from the name of the styles the flavour if any.
       • User can also specify their preferred flavour when placing order for the bespoke pop-cakes..

• Returning Visitor Goals

  1. • As a Returning Visitor, I want to find/see new designs
       • User can see added designs on the slider and Pop-Styles sections
  2. • As a Returning Visitor, I want to be able to contact the business to place orders
       • User can navigate the website easily and use the "order-now" button to contact the business for their bespoke order - User can also contact the business using the call icon in the header-bar
  3. • As a Returning Visitor, I want to find social media links.
       • User can easily find, scroll to, and access the beautifully highlighted social media links at the bottom of the site.

• Frequent User Goals

  1. • As a Frequent User, I want to check to see if there are any seasonal designs.
       • The User can see designs on the designated section for seasona designs on the second page -popstyles.

• Further Testing

  • The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
  • The website was viewed on a variety of devices such as Desktop, Laptop, iPhones and androids.
  • A large amount of testing was done to ensure that all pages were linking correctly.
  • Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

• Known Bugs

  • A white gap was reportedly, occassionally seen to the right of the pages in the gallery
  • Performance on Lighthouse slightly impacted due to size of images

• GitHub Pages

  The project was deployed to GitHub Pages using the following steps...

  • Log in to GitHub and locate the GitHub Repository
  • At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
  • Scroll down the Settings page until you locate the "GitHub Pages" Section.
  • Under "Source", click the dropdown called "None" and select "Master Branch". The page will automatically refresh.
  • Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

• Forking the GitHub Repository

  By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:

  • Log in to GitHub and locate the GitHub Repository
  • At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  • You should now have a copy of the original repository in your GitHub account.

• Making a Local Clone

  • Log in to GitHub and locate the GitHub Repository
  • Under the repository name, click "Clone or download".
  • To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.

• CODE

  Bootstrap 4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

  MDN Web Docs For Pattern Validation code. Code was modified to better fit my needs to ensure correct validation.

• CONTENT

  All written content was by the client and developer.

• COLORS/MEDIA

  Pexels.com

  Pixabay.com

  Unsplash.com

• ACKNOWLEDGEMENTS

  • My Mentor Antonio Rodriguez for encouraging me, support and continuous helpful feedback.
  • Pamela Tom-Jack for sharing her business expansion ideas.
  • YOUTUBE- multiple random videos and tutorials to consolidate on lecture notes.
  • Code Institute Lectures