(Developer: Deeksha Varma)
You can view the live site here - Oh Nuts! Donuts - Get Dunked On
- Introduction
- Project Goals
- User Experience
- Technologies Used
- Testing and Validation
- Bugs
- Deployment & Development
- Credits
Welcome to Oh Nuts! Donuts, your ultimate destination for heavenly treats and unforgettable flavors! We are thrilled to bring you a delightful assortment of artisanal donuts that will tantalize your taste buds and leave you craving for more. The goal of the website is to provide the user with a seamless and delightful online experience. The target audience are - Donut Enthusiasts, Foodies and Culinary Adventurers, Families and Friends, Gift Shoppers and Event Planners. The Oh Nuts! Donuts website aims to cater to their needs, providing a delightful online platform to browse, customize, and order exceptional donuts with convenience and ease.
- Discover and explore a wide variety of donut flavors and options.
- Easily navigate and find information about different donuts.
- Stay informed about special offers, promotions, and new flavors.
- Enjoy an engaging and visually appealing browsing experience.
- Receive prompt customer support if needed.
- Access the website seamlessly across various devices, including mobile phones and tablets.
- Increase online visibility and reach a wider audience.
- Foster customer engagement and interaction with the brand.
- Promote donut products.
- Increase sales and revenue for Oh Nuts! Donuts.
- Enhance brand perception and reputation.
- Provide customer support and address inquiries promptly.
- Donut Enthusiasts
- Foodies and Culinary Adventurers
- Families and Friends
- Gift Shoppers and Event Planners
- Kids
- User-Friendly Design and Navigation
- Simple intuitive design that allows the user to initiate action
- Menu and Product Information - easy access to a comprehensive menu that showcases the variety of donuts
- Links work as expected
- Easy was to contact the business
- Location and Contact Information
- Social Media Integration
- Visually appealing responsive design
- Accessibility
As a first time user, I want to ...
- ... easily navigate through the website and understand what are the treats being offered.
- ... find more information about the history of the business and their core values.
- ... expect a clear and intuitive navigation menu that allows me to explore the different categories of donuts.
- ... find the contact information and location of the business.
As a returning user, I want to ...
- ... easily provide feedback or share my experience.
- ... find social media links to connect with the business.
- ... find directions to the location of the business.
As the site owner, I want users to ...
- ... be able to explore the menu, place orders, and access information effortlessly, ensuring a positive and delightful browsing experience.
- ... be enticed by the mouthwatering visuals and descriptions leading them to place orders and indulge in the deliciousness of Oh Nuts! Donuts.
- ... provide feedback, share their experiences, and interact with the brand through social media integration fostering a loyal and engaged customer base.
- Website Design and Navigation: The website should have a simple design with intuitive navigation, ensuring easy access to different sections and a seamless browsing experience.
- About section: This section which will include information about the history of the business and it's core mission and values.
- Menu and Product Presentation: The menu should be visually appealing, showcasing the variety of donuts and treats available, along with detailed descriptions and enticing images that capture the essence of each flavor.
- Location Information and Contact Details: Users should easily find information about the physical locations of Oh Nuts! Donuts shops, including operating hours and contact details for inquiries or special requests.
- Social Media Integration: The website should integrate with the company's social media accounts, allowing users to stay connected and informed about updates and events.
In future expansion the site could include
- Promotions and Special Offers
- Customer Reviews and Testimonials
- Allergen Information and Dietary Considerations
- Newsletters
- Special offers and promotions
The structure of the initial site will include four pages:
- Home Page with navigation features in a header and footer, a hero section containing the hero title/caption with a button allowing the user to explore the menu.
- About Page giving a brief history of "where it all started" and the core mission of the business. This page will include the same header and footer as the main page.
- Menu Page providing a beautiful column layout of the different kinds of donuts served. Each item on the catalogue is depicted with a donut image and their corresponding names and descriptions. The images provide interactivity on hover.
- Contact Page that contains 3 sections - a form that includes name, email, phone number, dropdown to select the reason for writing. There will be a field for a text message as well. The next section on the top right will be a map view of the business. Bottom right section will contain information on the address and operating hours of the business.
-
Thank you Page - a simple thank you page that displays thank you message to the user on contact form submission is also included.
-
404 Page - a simple 404 Error page is also included.
As described in the previous section with the aid of wireframes, the website includes six pages, which all have a consistent header and footer. The home page includes a call to action button, which links to the menu page.
Screenshot of header on desktop
Screenshot of header on mobile
- Featured on all four main pages (also the Thank you page and 404 page).
- Includes the company name/logo and a menu with links to the Home page, About page, Menu page, Contact page.
- The header is fully responsive and changes to a hamburger menu on smaller screens.
- If a user hovers over a menu option in desktop mode an animated bar shows them which option they are choosing.
Screenshot of Footer on Desktop
Screenshot of footer on mobile
- Featured on all four main pages (also the Thank you page and 404 page).
- Includes links to the social media pages which the company maintains: Facebook, Instragram, and Twitter.
- All links open in a new window.
- Includes Copyrights Reserved text.
- Includes Contact Number of the business.
- The footer is fully responsive and changes to fill three lines on smaller screens.
Screenshot of Home page on Desktop
Screenshot of Home page on mobile
- Includes a hero image.
- A call to action button features on center of the hero image. It links to the menu page.
Screenshot of About page on Desktop
Screenshot of About page on mobile
- Features two images with information on the history of the business and their mission.
- The images have hover effect only in the Desktop view.
Screenshot of Menu page on Desktop
Screenshot of Menu page on mobile
- Features images with small description and price of each of the menu item in a column format.
- The images have hover effect on Desktop and tablet devices.
Screenshot of Contact page on Desktop
Screenshot of Contact page on mobile
- Features a contact form that a customer can submit to express concerns/provide feedback/request more information.
- Features an address info card with information about the business such as Address, Email ID of the business, Contact number, Owner info, Working hours.
- The address info card also features social media icons that link to the social media pages that the business uses such as Facebook, Instagram and Twitter. The icons have a hover effect.
- The map view of the business.
Screenshot of Thank you page on Desktop
Screenshot of Thank you page on mobile
- The thank you page (or confirmation page) is used to thank users and confirm to them what they did was successful.
- This page is to notify users who submit the contact form that their action was successful and their data has been collected.
- Features a green tick mark icon to indicate success.
- Includes a button to allow the user to navigate back to home page.
- Includes the header and footer.
Screenshot of 404 page on Desktop
Screenshot of 404 page on mobile
- The 404 error page is used to inform the user that they have arrived at the wrong address and provides a button to the user to navigate back to home page.
- Features a gif that represents 404 error.
- Includes the header and footer.
Features that could be implemented in the future is a gallery page, newsletters, customer testimonials in the about page, allergen information on the menu.
The design of the website focuses on depicting a playful and vibrant color theme. The visual image of donut with sprinkles is used as part of the logo branding. A background image of donut is used to grab visual attention of the user while also adding a touch of charm and playfulness to the design. Call-to-action button on the home page is used to establish a visual hierarchy to guide users' attention towards important elements such as the Menu page. A combination of playful and modern fonts that add personality to the design while ensuring readability were chosen.
The color scheme chosen needs to evoke a sense of playfulness, warmth, and deliciousness. With this idea in mind, a combination of bright and vibrant colors were used to capture attention and reflect the fun and joyful nature of donut indulgence. The highlight on the homepage is the hero image. A neutral base, such as a light cream is paired with a pop of hot pink on the other pages. This approach allows the colorful elements, like illustrations or images, to stand out while maintaining an overall clean and modern look.
'Lily Script One' is the font used for logo (the business name), text in the main body of the site and lowerlevel headings use 'Roboto Slab' font.
-
Roboto Slab is a clean and modern serif font that provides excellent readability. It has a straightforward and professional appearance, making it suitable for body text and general content.
-
Lily Script One is a handwritten script font with a playful and whimsical feel. Its flowing and casual letterforms add a touch of personality and creativity to logos, or decorative elements. Therefore aligning well with the delightful and handmade nature of Oh Nuts! Donuts.
- HTML5 - Provides the content and structure for the website.
- CSS3 - Provides the styling for the website.
- Git - Version Control System used to track the project development.
- Github - Used to host and edit the website.
- Balsamiq - Used to create wireframes.
- Google Fonts - Used to open source font-families for use in CSS.
- Font Awesome - Used for adding icons to the website.
- Coolors - Color contrast checker of text and background colors.
- Image Color Picker - useful to pick colors from images.
- I love Img - helps to resize images.
- Am I Responsive - mockup generator that checks for responsiveness across various device screen widths.
- The website has been thoroughly tested. All the code has been validated via the W3C HTML Validator and W3C CSS Validator. 2 minor errors were found on the pages - 404.html and thankyou.html. 1 error was found on the responsive.css page while running the css validator. These were fixed immediately and documented below.
The website was put through a11y to further test the contrast and found no issues.
The website was assessed for the following parameters using Chrome Dev Tools Lighthouse Testing:
- Performance - How the page performs whilst loading.
- Accessibility - Is the site accessible for all users and how can it be improved.
- Best Practices - Site conforms to industry best practices.
- SEO - Search Engine Optimisation. Is the site optimised for search engine result rankings.
All pages scored high on performance, best practices and SEO. The accessibility score for Contact page scored a little less and necessary code changes were made and is documented below.
Home
About
Menu
Contact
Thank you
404
-
The responsive design tests were carried out manually with Google Chrome DevTools and Responsive Design Checker.
The websites compatability was tested on the following browsers and no issues were found:
- Google Chrome
- Mozilla Firefox
-
In addition to the above tests, I have performed manual testing using the following use cases tabulated below to make sure everything works as intended.
-
Navigation Menu/Header
Feature Action Expected Result Actual Result Navigation Menu The donut icon on logo is clickable Redirects user to home page Works as expected Navigation Menu The nav links when clicked redirect user to the appropriate page User lands on the appropriate page Works as expected Navigation Menu Navigate across the nav links The nav links have the correct hover effect and correct color Works as expected Navigation Menu The active nav link is highlighted to the user The user should be able to see a black underline on the current active nav link. Works as expected Navigation Menu Inspect the page to see if navigation menu is responsive and transitions to a hamburger menu at 850px The user should be able to see the navigation links transition to a hamburger menu on screens smaller than 850px. Works as expected Navigation Menu Click on the hamburger menu The user is able to view the navigation menu as a dropdown Works as expected Navigation Menu Verify the position of the header The header stays on top of the page at all times whilst the user scrolls Works as expected -
Home page/Landing page
Feature Action Expected Result Actual Result Home page View the hero image and analyse its position and quality The hero image fits the page and does not appear pixelated or stretched Works as expected Home page View the hero text and its position on screens 952px wide and up The hero text indents to the right side on the hero image on screens of width 952px and up. Works as expected Home page View the second line of the hero text The hero text appears in 2 separate lines and the second line uses the same font as the logo text Works as expected Home page View the hero text and its position on screens 952px wide and down The hero text appears central to the hero image Works as expected Home page View the hero button The hero button appears central to the hero text Works as expected Home page Hover on the hero button The hero button has the correct hover effect and color and when clicked opens the menu page in a new tab Works as expected -
About page
Feature Action Expected Result Actual Result About page View the About page title/heading The About page has the title 'About Us' with a purple solid underline and is aligned to the top center of the page below the header. Works as expected About page View the two images The About page has two images that appear alongside the text in a diagonal fashion Works as expected About page Hover over the images The images have a zoom effect on hover Works as expected About page View the first text section on the page The first block of text is located to the left of the first image in a row and has the subtitle 'Sprinkling Happiness' Works as expected About page View the last line of the first text section on the page The last line of the first paragraph is italicised Works as expected About page Scroll down to the last section of the page The paragraph is titled 'Our Mission' and highlights important information as bold, italicized text. Works as expected About page View the ipad version of the page (less than 1024px wide) The page transitions to a column format and has the text followed by the images and the mission text. The images do not the hover effect Works as expected About page View the mobile version of the page (less than 768px wide) The page transitions to a column format and has the text followed by the images and the mission text. The images do not the hover effect Works as expected -
Menu page
Feature Action Expected Result Actual Result Menu page View the Menu page title/heading The Menu page has the title 'Our Menu' with a purple solid underline and is aligned to the top center of the page below the header. Works as expected Menu page View the menu page images Each item on the menu has a representing image enclosed in a circular border. Works as expected Menu page Hover over the images The images have a zoom effect on hover only in the Desktop and iPad version. Works as expected Menu page View the quality of the images The images should not appear pixelated to stretched and fit to the center. Works as expected Menu page View the menu page layout The menu is laid out in a tabular column layout. There are 3 columns to the menu. Each column has 4 menu items. A total of 12 items on the menu Works as expected Menu page View the menu page layout in Desktop The desktop version shows the three column layout with the donut title and pricing appearing on the same line with dashed underline effect. The item description appears to the right center of the image Works as expected Menu page View the menu page layout on ipad The ipad version shows the three column layout with the text indenting below the image Works as expected Menu page View the menu page layout on mobile The mobile version shows a single column layout with each item appearing one below the other Works as expected -
Contact page
Feature Action Expected Result Actual Result Contact page View the Contact page title/heading The Contact page has the title 'Contact & Inquiry' with a purple solid underline and is aligned to the top center of the page below the header. Works as expected Contact page View the Contact page subheading The Contact page has the subheading 'We'll get back to you shortly' aligned below the heading. Works as expected Contact page View the sections on the Contact page The Contact page has three sections - contact form, address card, google map view. Works as expected Contact page Locate the contact form Find and fill out contact form. Works as expected Contact page Locate the address info card Find information on the business and their social media links. Works as expected Contact page Locate the map view of the business Find the google map location of the business. Works as expected Contact page Hover over the social media icons on the address card The social media icons have a hover colour change effect. Works as expected Contact page View the layout on Desktop The desktop view shows the different sections in a grid layout. Works as expected Contact page View the layout on iPad The iPad view shows the different sections transitioning into a column layout in the order - form, address card, map. Works as expected Contact page View the layout on mobile devices The mobile view shows the different sections transitioning into a column layout in the order - form, address card, map. Works as expected -
Thank you page
Feature Action Expected Result Actual Result Thank you page View the Thank you page title/heading The Thank you page has the title 'THANK YOU!' in the correct color and is aligned to the top center of the page below the header. Works as expected Thank you page Locate the thank you icon The Thank you page has the green tick mark icon aligned central to the page title. Works as expected Thank you page Locate the thank you text The Thank you page has the thank you text aligned central to the icon. Works as expected Thank you page Locate the button The Thank you page has a call to action button that allows the user to redirect back to home page. Works as expected Thank you page Test responsiveness of the page The Thank you page elements have a column layout on all devices. Works as expected -
404 Error page
Feature Action Expected Result Actual Result 404 page View the 404 page title/heading The 404 page has the title in the correct color and is aligned to the top center of the page below the error icon. Works as expected 404 page Locate the 404 page error gif The 404 page has the 404 gif to represent the error code 404. Works as expected 404 page Locate the 404 page error info The 404 page provides the user with appropriate info text. Works as expected 404 page Locate the home button The 404 page has a call to action button that allows the user to redirect back to home page. Works as expected 404 page Test responsiveness of the page The 404 page elements have a column layout on all devices. Works as expected -
Footer
Feature Action Expected Result Actual Result Footer Click on the social media links The links should open in a new tab. Works as expected Footer Locate the copyright text The footer has the copyright text in the center. Works as expected Footer Locate the contact number of the business The footer has the contact number indented towards the right of the footer. Works as expected Footer Test responsiveness of the footer The footer resizes itself and spreads across 3 lines. Works as expected
-
-
After putting the website through HTML Validation, I was presented with the following common errors for the pages (404.html & thankyou.html):
-
The backslash was replaced with a forward slash on the href attribute. The button tag was not being used so the element was removed and the button class was applied directly to the anchor element, the validator then returned with no errors.
-
After running the website through W3C CSS Validator, I was presented with the following error:
-
The code was fixed with the correct values for the grid-template-columns and the validator then returned with no errors.
After running the website through Chrome Dev Tools Lighthouse Testing, I was presented with the following accessibility score for Contact page:
Contact
-
The code was fixed to include a title attribute on the iframe element and background color for the submit button of the contact form was changed to introduce more contrast ratio. After implementing these changes, the score then improved.
-
When inspecting the website with Google Chrome DevTools and opening console, the website showed the following error:
I found through StackOverflow that this issue is a cross-origin request issue and it is caused by various Chrome Extensions. After testing it in the incognito mode, the error didn't show up anymore.
The site was deployed to GitHub pages. The steps to deploy a site are as follows:
- In the GitHub repository, navigate to the Settings tab.
- Once in Settings, navigate to the Pages tab on the left hand side.
- Under Source, select the branch to master, then click save.
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link to the Github repository can be found here - add link here.
A copy of the GitHub Repository can be made by forking the GitHub account. This copy can be viewed and changes can be made to the copy without affecting the original repository. Take the following steps to fork the repository;
- Log in to GitHub and locate the repository.
- On the right hand side of the page inline with the repository name is a button called 'Fork', click on the button to create a copy of the original repository in your GitHub Account.
The method from cloning a project from GitHub is below:
- Under the repository’s name, click on the code tab.
- In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL copied from GitHub.
- Press enter and the local clone will be created.
- The font came from Google Fonts.
- The icons came from Font Awesome.
- The markdown syntax used to write README doc were referenced from Git Hub Doc.
- The donut names on the menu page were based out of creativity and for some Google was used as reference.
- This README file was adapted from the projects - Art School and Reflection.
- The text content for the About Page - history and mission were generated using ChatGPT.
- The inspiration for the menu page was taken from WIX.
- The inspiration for the about page layout/design was taken from the following Code Institute project.
- The inspiration for the contact page layout/design was taken from the following Code Institute project.
- The website landing page inspiration was taken from Dribble.
- Hero Image taken by Towfiqu barbhuiya from Pexels
- Donut logo icon were sourced from Flaticon
- About page images were sourced from Pexels and Pixabay
- Menu page images were sourced from the following -
- Banana Pudding, by filllvlad
- Chocolate Glam, by Nishant Aneja
- Devil's Chocolate, by Valeria Boltneva
- Why Nut, by Alena Shekhovtcova
- Pink Zebra, by Tima Miroshnichenko
- Rainbow Wheel, by Tima Miroshnichenko
- Exotic Strawberry, by Alexas_Fotos
- Nut O' Bear, by THE 5TH
- Holy Grail, by dohnalovajane
- Party Box, by cottonbro studio
- Mango Masti, by NoName_13
- Donutella, by congerdesign
- 404 error gif was taken from this Google Source
- Thank you page tick mark icon was taken from Google Source
- The website was inspired by the Love Running Walkthough project and some of the code from the walkthrough project was used and adapted.
- W3Schools was referred to for syntax lookups, form code and phone number validation.
- Responsive navigation for this project was implemented using Kevin Powell's video - Create a responsive navigation nav with no JS
- CSS flexbox implemented using this video from FreeCodeCamp.
- The document Setting Up a Custom 404 Page with GitHub Pages was referred to for creating 404 page in my website.
- The following resources were used to implement some of the features:
The site was developed as a part of a Full Stack Software Development Diploma Course at the Code Institute and is my first Portfolio Project.
I would like to thank -
- my mentor Mitko Bachvarov for his timely availability, feedback, guidance and support.
- my cohort facilitator, Kay for pointing me in the right direction during the course of the project. Also providing me with resources to bridge the gaps in my learning.
- My husband and son, without their support this could not have been possible. Thanks to their feedback.
Building this website has been a great learning curve for me. From designing the wireframes to thinking about design choices and implementing the vision I had, I feel happy, confident and proud as a developer to have come this far.
Deeksha Varma 2023.