Git Product home page Git Product logo

ci_pp1_honeycomb's Introduction

Honeycomb

(Developer: Lateefat Babalola)

Mockup image

Live website

Table Of Content

  1. Project Goals
    1. User Goals
    2. Site Owner Goals
  2. User Experience
    1. Target Audience
    2. User Requrements and Expectations
    3. User Stories
  3. Design
    1. Design Choices
    2. Colour Scheme
    3. Fonts
    4. Structure
    5. Wireframes
  4. Technologies Used
    1. Languages
    2. Frameworks & Tools
  5. Features
  6. Validation
    1. HTML Validation
    2. CSS Validation
    3. Accessibility
    4. Performance
    5. Device testing
    6. Browser compatibility
    7. Testing user stories
  7. Bugs
  8. Deployment
  9. Credits
  10. Acknowledgements

Project Goals

User goals

  • Finding a cafe/wine bar with an eccentric atmosphere, an affordable menu, venue-for-hire
  • To find relevant information about cafe such as location, opening times and pricing
  • Enquire about venue for hire
  • To gain a visual experience of the cafe and see customer’s reviews.

Site owner goals

  • To promote the cafe
  • To gain more customers and clients through venue for hire.
  • To provide essential information about the cafe to customers
  • To introduce new menu
  • To allow customers to be able to contact cafe via social media or email

User experience

Target audience

  • Locals looking for space to hire
  • Couples or groups looking for a nice spot to hang during the day or drink at night
  • People who like working at cafe
  • Coffee lovers

User requirements and expectations

  • Visually appealing design on all screens
  • Accessibility
  • Content that is simple and easy to follow
  • Functional links and intuitive navigation system
  • Clear and easy to find menu

User stories

First-time users

  1. I want to know the price on the menu
  2. I want to know where the menu is located
  3. I want to be able to visualise what it would be like to visit the cafe
  4. I want to know about previous customers’ experiences.

Returning users

  1. I want to find the business on social media
  2. I want to leave a review
  3. I want to find a phone number for reservations
  4. I want to hire the venue
  5. I want to know more about the cafe
  6. I want to see opening and closing times

Site owner

  1. I want users to see opening and closing times
  2. I want users to be able to contact us
  3. I want users to know about our extended hours
  4. I want users to be able to enquire about venue bookings
  5. I want users to be able to return to the homepage from a broken page

Design

Design Choices

The website was designed to have a uniform yet playful feel, with warm and rich block colours and accent colours dotted all over the web pages. This was done to portray the atmosphere that the user can expect when visiting the cafe.

Colour Scheme

To choose a colour scheme, I used a coolors to generate a palette

Colour scheme

Fonts

I mostly used web safe sans-serif font-families and serif fonts for the paragraphs.

Structure

The website consists of five separate pages:

  • A homepage with a brief introduction section and two columned section of news about the cafe.
  • An about page with customer reviews and a section about the owners.
  • A menu page
  • A gallery with images showcasing the atmosphere of the cafe
  • A contact page with general information such as opening times and contact details; a contact form for enquiries; and an embedded map

Wireframes

Home
About
Menu
Gallery
Contact
404

Technologies Used

Languages

  • HTML
  • CSS

Frameworks & Tools

  • Balsamiq
  • Github
  • GitPod
  • VSCode
  • Bootsrap v5.1
  • Coolors
  • Font Awesome
  • Favicon

Features

This website consists of five pages and nine features.

Logo and Responsive Navigation Bar

  • Featured on all pages, the navigation bar becomes a toggler on smaller screens.
  • The navbar includes fully functional links for the home, about, menu, gallery and contact pages.
  • It allows for easy navigation through the website.
  • The active page link is highlighted and a link that is hovered over is also highlighted in a different colour.
  • User stories covered: 2, 3, 10, 13

Logo and navbar

Logo and navbar

Homepage information

  • This section of the homepage contains news about the cafe that is meant to catch the user's attention such as the introduction of cocktails to the menu and venue for hire.
  • User stories covered: 8, 10, 14, 15

Homepage information

Footer

  • Featured on all pages
  • Consists of three sections: contact information, opening hours and social media links.
  • User stories covered: 5, 7, 11, 12, 13

Footer

Social media icons

Reviews

  • Highlighted on the about page
  • Contains reviews from previous customers
  • User stories covered: 4

Reviews

Menu

  • Separated in two sections: drinks menu and food menu
  • Displays pricing of items
  • User stories covered: 1, 9

Menu

Gallery

  • Images portraying the atmosphere of the cafe displayed in columns
  • User stories covered: 3

Gallery

Information

  • Provides necessary information for the cafe such as address, opening hours, email and phone number
  • User stories covered: 7, 11, 12, 13

Cafe Information

Contact Form

  • Allows users to be able to leave reviews and enquire about venue hiring.
  • User stories covered: 6, 8, 15

Contact Form

Map

  • Google maps embedded on contact page to show cafe location
  • User stories covered: 8

Map

Validation

HTML

The W3C Markup Validation Service was used to validate HTML, no errors found on all pages.

Home
About
Menu
Gallery
Contact
404

CSS

W3C Jigsaw CSS Validation Service was used to validate css style sheet. Errors found relating to root variables.

style.css

Accessibility

WAVE Web Accessibility Evaluation Tool was used to validate the accessibility of the site. Initially, the website displayed contrast errors, primarily between text colour and background colour. CSS was editted to meet validation criteria.

Home
About
Menu
Gallery
Contact
404

Performance

Google chrome's Lighthouse in Chrome Developer's Tools was used to test the performance of the site.

Home
About
Menu
Gallery
Contact
404

Device Testing

Website was tested on the following devices:

  • Laptop: MacBook Air
  • Mobile: Galaxy Z Flip 3, iPhone 8 Plus
  • Tablet: iPad 7th generation

Browser Compatibility

The website was tested on the following browsers:

  • Safari
  • Google Chrome
  • Microsoft Edge

Testing User Stories

  1. I want to know the price on the menu
Feature Action Expected Result Actual Result
Menu Go to menu page from navbar See price range works as expected
Screenshots
  1. I want to know where the menu is located
Feature Action Expected Result Actual Result
Navbar Go to navbar and click menu link menu page will display works as expected
Screenshots
  1. I want to be able to visualise what it would be like to visit the cafe
Feature Action Expected Result Actual Result
Gallery Go to navbar and click gallery link images showcasing the cafe will appear works as expected
Screenshots
  1. I want to know about previous customers’ experiences.
Feature Action Expected Result Actual Result
Reviews Select about from navbar reviews visible in section section of about page works as expected
Screenshots
  1. I want to find the business on social media
Feature Action Expected Result Actual Result
Footer Clink on social media links in footer social media page to open in new tab works as expected
Screenshots
  1. I want to leave a review
Feature Action Expected Result Actual Result
Contact Form enter name, email and message in form and press send message will be sent to server works as expected
Information navigate to contact page find email address works as expected
Screenshots
  1. I want to find a phone number for reservations
Feature Action Expected Result Actual Result
Footer Scroll to footer Find phone number in contact information works as expected
Information navigate to contact page find phone number works as expected
Screenshots
  1. I want to hire the venue
Feature Action Expected Result Actual Result
Homepage information Go to "venue for hire" section and clink "contact us" link Takes user to contact page with enquiry form works as expected
Screenshots
  1. I want to know more about the cafe
Feature Action Expected Result Actual Result
Homepage information locate text areas information provided about services offered works as expected
About page go to about in navbar read description of cafe as well as reviews from customers works as expected
Screenshots
  1. I want to see opening and closing times
Feature Action Expected Result Actual Result
Footer scroll down to footer opening hours information provided works as expected
Information go to contact page in navbar locate opening hours on page works as expected
Screenshots
  1. I want users to see opening and closing times
Feature Action Expected Result Actual Result
Footer scroll down to footer opening hours information provided works as expected
Information go to contact page in navbar locate opening hours on page works as expected
Screenshots
  1. I want users to be able to contact us
Feature Action Expected Result Actual Result
Footer scroll down to footer find phone number works as expected
Contact page go to contact page in navbar and locate contact locate phone number, email, address and contact form works as expected
Screenshots
  1. I want users to be able to locate the cafe
Feature Action Expected Result Actual Result
Map go to contact page from navbar and scroll to end of page find embedded map with address works as expected
Screenshots
  1. I want users to be able to enquire about venue bookings
Feature Action Expected Result Actual Result
Contact form Scroll to form section on contact page Find form for enquiry works as expected
Screenshots
  1. I want to be able to return to the homepage from a broken page
Feature Action Expected Result Actual Result
404 page Click on 'return to homepage' button on error page Link will return user back to web homepage works as expected
Screenshots

Bugs

Bug Fix
Toggle bar would not expand on menu page script blocking rendering removed
images appearing as their original size, too big on small screens targeted in css with object-fit
Contact form sticking to image on medium screens added flex attributes to position properly and media queries to set specific rules for different screens
form label input not aligned with textarea same width given in css
social media icons not showing on contact page footer font awesome script labeled correctly

Deployment

Website was deployed using the following steps:

  1. Go to settings tab in the GitHub repository
  2. From the menu on the left, select 'Pages'
  3. Select 'Branch: main'
  4. Weboage will refresh with the message "Your site is published at https://zee-37.github.io/CI_PP1_Honeycomb/" highlighted in green

To fork this repository:

  1. Go to repository
  2. Click the fork button in the upper right corner of page

To clone repository:

  1. Go to repository
  2. Select the 'code' button above the list of files
  3. Choose between HTTPS, SSH, or GitHub CLI and copy URL.
  4. Open Git Bash
  5. Change current working directory to cloned directory
  6. Enter 'git clone' and past URL ($ git clone https://github.com/username/repository)
  7. Press 'enter' and create cloned repository.

Credits

Images not referenced below are owned by the developer.

Images

In order of appearance:

Code

Acknowledgements

I would like to thank:

  • My friends for always being supportive
  • My mentor, Mo Shami, for his guidance
  • The tutors here at Code Institute for their patience

ci_pp1_honeycomb's People

Contributors

zee-37 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.