Welcome to the Pizza House! This Readme file provides an overview of our pizza shop and functionalities. Please read through this documents to familiarize everyone with shop's featues and guildlines.

This project is for educational purposes and can not be used as a template for a business use. Main aim is to build responsive website with HTML and CSS only.

• Pizza House
  • Table of Contents
• UX
  • Website owner business goals
  • User goals
    • New user goals :
    • Returning user goals:
  • User stories
    • As a business owner:
    • As a customer
  • Structure of the website
  • Wireframes
  • Surface
    • Colors
    • Fonts
    • Images
• Features
  • Navigation bar
    • Navigation bar is fixed on the top of the website.
  • Footer
  • Home
  • Menu
  • Contact Us
  • Technology Used
    • HTML 5
    • CSS
    • Font Awesome
    • Google fonts
    • GitHub
    • Wireframe.cc
    • Photoshop
• Testing
  • Functionality testing
  • Compatibility testing
  • User Stories testing
    • As a business owner:
    • As a customer
  • Issues found during site development
    • Mobile screen compatability
    • Horizontal scrolling bar on the bottom of the page
  • Performance testing
  • Code Validation
  • Deployment
• Credits
  • Code:
  • content:
  • Map location:
  • Icons:
  • Images:
  • Screenshot :

The main goals for this website is introduce new pizza brand to the market. Moreover increase sales,exploring new opportunities, etc.

• User can see our pizza ethos details
• User can see our pizza prices
• see our location

• See the pizza price
• check our locations

• I want to create more new online business.
• I would like to build and maintain relationship with new customers.

• I wish to find the pizza shop.
• I wish to order the pizza
• I can comment about the services, compliants, sugessions

The website is meticulously crafted to ensure a seamless and intuitive user experience across all types of devices. Whether accessed on a desktop computer, tablet, or mobile device, users can expect a phenomenal browsing experience with no discernible differences. Every element of the website is thoughtfully designed and optimized to deliver utmost user satisfaction and ensure that individuals can effortlessly navigate and interact with the site, regardless of the device they are using. The goal is to create a consistently outstanding user experience that transcends the boundaries of different devices.

I used wireframe.cc to create wireframes

Colors used in this project

• background-color : #2e2727
• frontend color : #ffffff
• hover color : orange
• active color : red

• for headings I used Lobster and body Oswald

• I used www.freepik.com for downloding images.

• This website has 4 pages. It ia accessable form navigation bar from top.

It's servves as a s crucial element for user experience. We can access pages from navigation menu. It is responsive and will adopt to mobile and ipads for a hamburger menu.

• Navigation scheme
  • On the left side there is a logo. And it can be used as a navigation link to menu page.
  • On the right side there are 4 links or hamburger menu. It contains
    • Home
    • Menu
    • Our Ethos
    • Contact us

It contains map on the left side and social media links on right side. And mobile it shows parallel.

• On top main image

• next is our pizza ethos section

• Address section with address and opening times

• List of items available in different sizes

• Address section with address and opening times

• It's one form to contact with shop comments and suggestions

Back to Table of contents

• As a structure language

• As a style language

• As an icon library for social media links

• As a font resource

• As a software hosting platform to keep project ina remote location

• As a wireframing tool

• As an Image editor

Back to Table of contents

I used Chrome developer tools and Microsoft Edge through out the project for testing and solving problems with responsiveness and style issues

Website was tested multiple virtual mobile aand tablet devices and browser.

• I want to create more new online business.
  • With online site it is easy
• I would like to build and maintain relationship with new customers.
  • Customer are able to find alinks to social media at the end the page

• I wish to find the pizza shop address.
  • customers can see address and map on the site
• I wish to see the pizza menu
• I can comment about the services, compliants, sugessions

I found many bugs when I use different size of mobile devices.

• Changing image size and font size of headings fixed the problems.

• Changing the map size and main image size controlled the problems.

I run Lighthouse tools to check performance of the website. I made many change to improve performance.

Final results

I used 2 website to validate

1. CSS Validator: https://jigsaw.w3.org/css-validator/
2. HTML Validator: https://validator.w3.org/

Back to Table of contents

The project was deployed on GitHub pages. I used codeanywhere as a development environment where I commited all changes to git version control system.

I used push command in codeanywhere to save changes into GitHub.

To deploy the project I had to :

• Log in to GitHub and click on repository to deploy Pizza House!
• Select settings and find GitHub pages section on the left side bar.
• From source select Deploy from a branch and then select main branch
• Click save and page was deployed after refresh

Site is published at https://naisepaul.github.io/html-css-project/

To complete this project I used Code institue student template: Gitpod full template

• My mentor

• All class mates especially Eby Chacko , Callum Dennis

• Ideas and knowledge library:

• w3schools.com

• css-tricks.com

• Flex : logrocket
• openai

• Ethos content from https://www.basewfp.com/

• maps.ie

• font Owsome version 4.7.0

• www.freepik.com

• Main Image :
• Ethos Images:
• Map- Social media link: