cafekitten

The live website can be viewed here.

Introduction

The goal of this website is to use HTML and CSS to create an info page for a Cafe that will be used by a user to gather information.

User Experience (UX)

• User Stories

  1. As a user, I want to be able to find information about Cafe kitten.
  2. As a user, I want to be able to sign up for tasting events.
  3. As a user, I want to be able to see the menu and what items are offered.
  4. As a user, I want to be able to find contact information to Cafe Kitten.

Wireframe

Features

Cafe Kitten is a website that hopes to bring together coffee and cafe lovers. Cafe Kitten is targeted towards people who love coffee and a lovely atmosphere.

Navigation Bar

• A fully responsive navigation bar that includes links to Home, Our Coffee, Menu and Contact.
• It's identical on all four pages to ensure that navigating will be simple and that it will be easy to go from page to page.

Home page

• The home page includes a photograph of the cafe and two of the baristas, instantly giving the customer a feel for the atmosphere at Cafe Kitten.
• There is also some information about who Cafe Kitten are and what they want to offer for their customers.

Our Coffee page

• In the Our Coffee page there is further information about what makes Cafe kitten extra special and different. What the values are within Cafe Kitten and what Cafe Kitten is hoping to give.
• Sign up form, one can choose to sign up for a coffee tasting at Cafe Kitten. The options are either Saturday or Sunday.

The Footer

• The footer section includes links to the relevant social media sites for Cafe Kitten. 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

Future Features

• Shop section with checkout for pick up.

Technologies Used

Languages

• HTML was used to create the content of the website
• CSS was used to style the website

Programmes used

• Balsamiq was used to create the wireframe.
• Gitpod was used as an editior to write and run the code.
• Github was used as a software hosting platform to keep the project in a remote location.
• Chrome developer tools was used for troubleshooting and checking compability.
• Am I responsive was used to test if the website was responsive on different screen sizes.

Testing and Validation

I used the W3C Validator and W3C CSS Validator to validate my website.

• Home page

• Our Coffee page

• Menu page

• Contact Us page

Lighthouse

• Website was tested using Lighthouse, each page was tested separately

Devices

• Website was tested using Chrome and Safari.
• The website was tested on my iMac and Macbook pro.

Testing User Stories

1. As a user, I want to be able to find information about Cafe kitten. - There is information about Cafe Kitten in the home/landing page as well as in the "Our Coffee" page.
2. As a user, I want to be able to sign up for tasting events. - The user can sign up for tasting events through the "Our Coffee" page.
3. As a user, I want to be able to see the menu and what items are offered. - On the menu page the user will find a drink and pastry menu. The price of each item is also listed.
4. As a user, I want to be able to find contact information to Cafe Kitten. - Under the "Contact us" page the user will find information of how to contact the cafe, as well as where the cafe is located and when it's open/closed.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:

1. Log onto your GitHub and locate the GitHub repositor.
2. Navigate to the Settings, navigate to the left to the Pages
3. From the source section drop-down menu, select the main branch
4. Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

Credits

I took overall help from the Love Running project from Code Institute

• Code Institute provided a READ.me template as well that I have used
• I used tutorials from W3schools
• Flexbox

Content

• The text for the Our Coffee page was taken from Espresso House information page about sustainable coffee sourcing
• The form in our coffee are from W3school
• The icons in the footer and code are from W3schools

Media

The images and videos used for the home and our coffee page were taken from Pexel

• Home page image
• Video of coffee beans being grinded