A Pizza Perfection is a website which gives the user information on the history of two main types of pizza, these being Neopolitan and Romana. The website will explain the differences between the two allowing the user to choose which they prefer and try them at home.

There will be a section for users to provide feedback and topping inspirational ideas.

Live Webpage

1. Project Goals
   1. User Goals
   2. Site Owner Goals
2. User Experience
   1. Target Audience
   2. User Requirements and Expectations
   3. User Stories
3. Style Choices
   1. Design
   2. Colour
   3. Structure
   4. Initial Framework
4. Technologies Used
   1. Languages
   2. Frameworks & Tools
5. Features
6. Testing
   1. Manual Testing
   2. Device testing
   3. Browser compatibility
   4. Testing user stories
7. Validation
   1. HTML
   2. CSS
   3. Lighthouse
   4. Accessibility
8. Bugs Fixed
9. Deployment
10. Credits
    1. Code
    2. Content
    3. Media

1. Provide information on pizza
2. Provide information on the two main types of pizza
3. Provide the user the main differences of the two main types
4. Provide a gallery of images
5. Conduct a survey on peoples favourite type of pizza
6. Provide a way to navigate around the site
7. Provide links to social networking

8. Provide a contact form
9. To provide a platform to introduce people to Romana and Neopolitan pizza
10. Promote Italian food primarily pizza
11. Promote Italian culture through food

• People looking into making homemade pizza
• People looking to learn about the origin of pizza
• People looking to understand the difference between a Romana and Neopolitan pizza
• People who enjoy cooking

• A easy to use navigation system
• Information that is relevant and easy to understand
• Functions and links that respond and work as expected
• Presentation and visual aesthetics regardless of screensize
• Accessibility

• Provide information on Romana and Neopolitan Pizza
• Provide user differences between the two pizzas
• Provide images to inspire the user
• Provide a method of voting for a favourite type of pizza

The webpage is designed to encourage people to learn about the origin and history of pizza, providing them a detailed account of the two main types. It has incorporated both a pizza feel and the Italian flag to reflect the culture and background of pizza.

For the colour of the Home page I used Coolors which allowed me to utilise the colour of the cheese/dough for a palette.

Colour Palette

Colour Palette

Before starting the website I used a framework design tool called Balsamic to mockup an initial design idea.

Index

History

Gallery

Contact Us

• HTML
• CSS

• Bootstrap v5.0
• Git
• GitHub
• Gitpod
• Compressor.io
• Paint.NET
• Balsamiq
• Google Fonts
• Coolors
• Font Awesome
• Favicon.io

• Navigation Bar

  • Featured on all three pages, the full responsive navigation bar includes links to the Logo, Home page, History, Gallery and Contact Us page and is identical in each page to allow for easy navigation.
  • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
  • User stories covered : 1

  

• The landing page image

  • The landing includes a photograph with text overlay to allow the user to see exactly which location this site would be applicable to.
  • This section introduces the user to A Pizza Perfection
  • User stories covered : 1, 2, 9, 10, 11

  

• The Footer

  • The footer section includes links to the relevant social media sites for A Pizza Perfection. The links will open to a new tab to allow easy navigation for the user.
  • The footer is valuable to the user as it encourages them to keep connected via social media
  • User stories covered : 8

  

• History

  • The history page is valuable to the user as it explains the main difference between the two different types of pizza.
  • Gives the main criteria for a pizza to be recognised as a Romana or Neopolitan.
  • User stories covered : 1, 2, 3, 7, 9, 10

  

• Gallery

  • The gallery will provide the user with supporting images to see what different types of pizza users have made.
  • This section is valuable to the user as it will inspire them to use new toppings and try new flavours.
  • User stories covered : 4, 7, 9, 10

  

• Contact Us

  • The history page is valuable to the user as it explains the main difference between the two different types of pizza.
  • Gives the main criteria for a pizza to be recognised as a Romana or Neopolitan.
  • User stories covered : 5, 6

  

• 404 Error Page

  • This gives a custom 404 error page so the user can return to the page they were looking for

  

• File upload so users can post their own pizza creations
• Add code to allow for a drop down navigation menu when on smaller screens

• Manual Testing

  • I planned and carried out the below manual tests for the pages.

  • Manual Tests Conducted

    • Navigation Menu
      • Ensure that when the header is clicked it returns to the home page
      • Ensure that all navigation links correctly navigate to their respective pages when clicked
      • Ensure that all the :hover psuedo selectors work when using the navigation bar
      • Ensure the responsiveness of the navigation bar
    • Home/Landing Section
      • Ensure the hero image is not distorted
      • Ensure that the cover text is displayed correctly
      • Ensure that the paragraph and image are displayed correctly
      • Ensure the responsiveness of the page
      • Ensure that the font-style and size are visible and of good contrast
    • History Page
      • Ensure that the font-style and size are visible and of good contrast
      • Ensure that there are no spelling mistakes
      • Ensure that the images are not distorted
      • Ensure the responsiveness of the page
    • Gallery Page
      • Ensure that the gallery images all load
      • Ensure that the gallery images drops to a column count of 2 at less than 480px
      • Ensure the responsiveness of the page
    • Contact Us Section
      • Ensure that all required elements work
      • Ensure that the '@' symbol is required in the email address section
      • Ensure that the font-style and size are visible and of good contrast
      • Ensure that there are no spelling mistakes
      • Ensure that 'Submit' button provides an informational pop-up
      • Ensure that the drop down list shows correct selectors
      • Ensure the responsiveness of the page
    • Footer Section
      • Ensure that when you select a social media link it opens in a new tab
      • Ensure the responsiveness of the Footer

The website was tested on the following devices:

• MacBook Pro 13"
• MacBook Pro 13" with 17" monitor
• Iphone 7
• Iphone 11 Mini

In addition, the website was tested using Google Chrome Developer Tools Device Toggeling option for all available device options.

The website was tested on the following browsers:

• Google Chrome
• Safari

Validation completed by Free Formatter this was due to W3S website being down for multiple days and not available to use. This validator returned no errors for HTML.

Index Page

History Page

Gallery Page

Contact Us Page

Validation for CSS coding was completed by W3S CSS Validator and returned no errors for my CSS coding.

CSS

Lighthouse score was provided by Chrome Dev Tools and all scores were returned above 92.

Lighthouse Index

Lighthouse History

Lighthouse Gallery

Lighthouse Contact

Accessibility was tested using Wave Webaim and returned no errors.

Accessibility Index

Accessibility History

Accessibility Gallery

Accessibility Contact

• Spelt the rel - noopener incorrectly so was flagged on validation and corrected

No opener

• For both degrees fahrenhiet and degrees celsius the symbol was copied in. When validation this showed as an error. Replaced with HTML code which fixed the issue.

Degrees

1. Provide information on pizza

User Story 1

2. Provide information on pizza

User Story 2

3. Provide the user the main differences of the two main types

User Story 3

4. Provide a gallery of images

User Story 4

5. Conduct a survey on peoples favourite type of pizza

User Story 5

6. Provide a way to navigate around the site

User Story 6

7. Provide links to social networking

User Story 7

8. Provide a contact form

User Story 8

9. Provide the user the main differences of the two main types

User Story 9

10. Promote Italian food primarily pizza

User Story 10

11. Promote Italian culture through food

User Story 11

The website was deployed using GitHub Pages by following these steps:

1. On the GitHub repository select the Settings tab
2. Using the left hand sub-menu select Pages
3. When asked for the source select Branch: master
4. After the webpage refreshes automaticaly you will be shown a ribbon along the top saying: "Your site is published at https://4n4ru.github.io/CI_MS1_BodelschwingherHof/"

You can for fork the repository by following these steps:

1. Go to the GitHub repository
2. Click on Fork button in upper right hand corner

You can clone the repository by following these steps:

1. Go to the GitHub repository
2. Locate the Code button above the list of files and click it
3. Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
4. Open Git Bash
5. Change the current working directory to the one where you want the cloned directory
6. Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
7. Press the Enter key to create your local clone.

The live link can be found here - https://harryrhayden.github.io/CI_PP1/

• The gallery style code was taken from the Love Running project
• The Google Maps code was generated by Google Map

• The icons in the footer were taken from Font Awesome via Bootstrap 5.0 Bootstrap
• The images were compressed using Compressor IO

• The photos used on the site are from Pexels
• The colours used on the site are found on Coolors and Scheme Colour
• The favicon came from Favicon