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.
-
-
-
- As a First Time Visitor, I want to easily see the available design shapes and how to order
-
- 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 know if there are different flavours.
-
- As a First Time Visitor, I also want to connect with the business on social media links.
-
-
-
- As a Returning Visitor, I want to find see new designs
-
- As a Returning Visitor, I want to be able to contact the business to place orders
-
- As a Returning Visitor, I want to find social media links.
-
-
-
- As a Frequent User, I want to check to see if there are any seasonal designs.
-
-
-
- The three main colours used are Pink, Blue and white.
-
- 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 is bright and vivid with pictures to captivate users.
-
- Balsamiq:, a pen and sheets of paper was used to create wireframes.
-
- Responsive on all device sizes Interactive elements
-
Bootstrap was used to assist with the responsiveness and styling of the website.
-
Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
-
Google fonts were used to import the 'Oxygen' font into the style.css file which is used on all pages.
-
Font Awesome was used on all pages throughout the website to add icons for aesthetic design and UX purposes.
-
jQuery came with Bootstrap to make the navbar responsive, also for the smooth scroll function in JavaScript.
-
Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
GitHub is used to store the project's code after being pushed from Git.
-
Balsamiq was used for wireframes during the design process.
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.
-
-
- 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.
- As a First Time Visitor,I want to easily see the available design shapes and how to order
-
- 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.
- As a First Time Visitor, I want to be able to easily navigate throughout the site
-
- 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..
- As a First Time Visitor, I want to know if there are different flavours
-
-
-
- As a Returning Visitor, I want to find/see new designs
- User can see added designs on the slider and Pop-Styles sections
- As a Returning Visitor, I want to find/see new designs
-
- 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
- As a Returning Visitor, I want to be able to contact the business to place orders
-
- 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.
- As a Returning Visitor, I want to find social media links.
-
-
-
- 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.
- As a Frequent User, I want to check to see if there are any seasonal designs.
-
-
- 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.
-
- 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
-
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.
-
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.
-
- 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.
-
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.
-
All written content was by the client and developer.
-
- 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