(Developer: Lateefat Babalola)
- Project Goals
- User Experience
- Design
- Technologies Used
- Features
- Validation
- Bugs
- Deployment
- Credits
- Acknowledgements
- 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.
- 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
- 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
- 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
- I want to know the price on the menu
- I want to know where the menu is located
- I want to be able to visualise what it would be like to visit the cafe
- I want to know about previous customers’ experiences.
- I want to find the business on social media
- I want to leave a review
- I want to find a phone number for reservations
- I want to hire the venue
- I want to know more about the cafe
- I want to see opening and closing times
- I want users to see opening and closing times
- I want users to be able to contact us
- I want users to know about our extended hours
- I want users to be able to enquire about venue bookings
- I want users to be able to return to the homepage from a broken page
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.
To choose a colour scheme, I used a coolors to generate a palette
I mostly used web safe sans-serif font-families and serif fonts for the paragraphs.
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
Home
About
Menu
Gallery
Contact
404
- HTML
- CSS
- Balsamiq
- Github
- GitPod
- VSCode
- Bootsrap v5.1
- Coolors
- Font Awesome
- Favicon
This website consists of five pages and nine features.
- 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
- 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
- Featured on all pages
- Consists of three sections: contact information, opening hours and social media links.
- User stories covered: 5, 7, 11, 12, 13
- Highlighted on the about page
- Contains reviews from previous customers
- User stories covered: 4
- Separated in two sections: drinks menu and food menu
- Displays pricing of items
- User stories covered: 1, 9
- Images portraying the atmosphere of the cafe displayed in columns
- User stories covered: 3
- Provides necessary information for the cafe such as address, opening hours, email and phone number
- User stories covered: 7, 11, 12, 13
- Allows users to be able to leave reviews and enquire about venue hiring.
- User stories covered: 6, 8, 15
- Google maps embedded on contact page to show cafe location
- User stories covered: 8
The W3C Markup Validation Service was used to validate HTML, no errors found on all pages.
Home
About
Menu
Gallery
Contact
404
W3C Jigsaw CSS Validation Service was used to validate css style sheet. Errors found relating to root variables.
style.css
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
Google chrome's Lighthouse in Chrome Developer's Tools was used to test the performance of the site.
Home
About
Menu
Gallery
Contact
404
Website was tested on the following devices:
- Laptop: MacBook Air
- Mobile: Galaxy Z Flip 3, iPhone 8 Plus
- Tablet: iPad 7th generation
The website was tested on the following browsers:
- Safari
- Google Chrome
- Microsoft Edge
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
| 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 |
Website was deployed using the following steps:
- Go to settings tab in the GitHub repository
- From the menu on the left, select 'Pages'
- Select 'Branch: main'
- 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:
- Go to repository
- Click the fork button in the upper right corner of page
To clone repository:
- Go to repository
- Select the 'code' button above the list of files
- Choose between HTTPS, SSH, or GitHub CLI and copy URL.
- Open Git Bash
- Change current working directory to cloned directory
- Enter 'git clone' and past URL ($ git clone https://github.com/username/repository)
- Press 'enter' and create cloned repository.
Images not referenced below are owned by the developer.
In order of appearance:
- img1: Photo by Abdalla M on Unsplash
- img2: Photo by Kike Salazar N on Unsplash
- img3: Photo by Sung Jin Cho on Unsplash
- a-img1: Photo by John Arano on Unsplash
- a-img2: Photo by Thought Catalog on Unsplash
- g-img1: Photo by Nathan Dumlao on Unsplash
- g-img2: Photo by Nick Fewings on Unsplash
- g-img3: Photo by Kwon Junho on Unsplash
- g-img4: Photo by Kwon Junho on Unsplash
- g-img5: Photo by Alejandro Sotillet on Unsplash
- g-img6: Photo by Walter Lee Olivares de la Cruz on Unsplash
- g-img7: Photo by Kwon Junho on Unsplash
- g-img8: Photo by Kwon Junho on Unsplash
- g-img9: Photo by Brooke Cagle on Unsplash
- g-img10: Photo by Maria Avdeeva on Unsplash
- g-img11: Photo by Sérgio Alves Santos on Unsplash
- g-img12: Photo by frank mckenna on Unsplash
- g-img13: Photo by GC Libraries Creative Tech Lab on Unsplash
- c-img1: Photo by Hatfields London on Unsplash
- Responsive Navbar HTML Navbar with toggler was taken from Bootstrap v5.1 documentation.
- Footer HTML footer with divider was taken from Bootstrap v5.1 example documentation.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
