The Basra Coffeeshop page

Basra is a lively coffeeshop, located centrally in the city of The Hague, The Netherlands. For 30 years, it has provided quality cannabis products for its customers. The business currently has an outdated website, so it needs a new one.

Because of the legal restrictions regarding the promotion of cannabis products, the primary goal of the website will be providing the customer location and opening data at a first glance.

UX

• Balsamiq was used for the initial wireframe setup. Link to wireframes: https://balsamiq.cloud/s6hidiy/pwawtic/r2278?f=N4IgUiBcCMA0IDkoAZ4GEXwDJTiAQrvALJEgBaZA0lANoC6AvkA%3D

There has been an attempt to execute the exact wireframe layout plans, but the result differs for practical reasons. Instead, the information for the mobile view was "absorbed" in the grid to be responsively displayed in rows and columns.

<>

<>

• The follwing color scheme was used throughout the website: <>

• The following font-families were used throughout the website: 'Montserrat', sans-serif; & 'Big Shoulders Text', cursive;

• Link to live site: https://rhyl1.github.io/Basra-Coffeeshop/

Users

The users of the website include (international) consumers, looking for a local coffee shop. It is expected that these consumers will find the webpage after initially using search engines for results. On request of the owner en because of legal restrictions, the information provided will be general: this is also what the consumer expects. It is also imaginable that potential employees will visit the website for some information.

Features

Existing Features

• Navigation bar. -- The navigation bar indicates the active page (the active page is displayed in a white font color) and is translated for different language users. --The title in the left corner of the navigation bar also functions as a link to the default home page.
• Route button -- The route button in the address section allows users to plot a route via Google maps. -Picture slider --There are slides show of the interior
• Social links in the footer -- These links provide additional contact details if needed
• House rules page -- These pages display the house rules as they are stated on the physical location of the coffee shop. These pages are also accessible in English and french.
• Vacancy page --This page provides a section where interested employees can apply for a function as a bartender.

Features Left to Implement

• A feature idea is a (Voorlichting / Information) section. This section will show information about how to responsibly use the products sold at the coffee shop.

• Another feature idea is to expand the vacature (vacancy) page with an area the owner of the business can use to post vacancies when needed.

Technologies Used

This project uses:

• HTML - for structure
• CSS - for styling
• Google Chrome - for browser use and the use of development tools
• The Google search engine - was used for research.
• Links to Bootstrap CDN - for the Bootstrap and JavaScript functions
• Links to the FontAwesome CDN- for icons
• Links to Google Fonts - for custom fonts
• Links to Hover.css CDN - for cool hover effects and transitions (not yet implemented)
• Links to Google maps - for location details.
• GitHub - repository hosted on Github -Gotpod: was used as cloud IDE solution
• Git Pages - Website is hosted on Github pages
• Am I responsive - was used for testing responsiveness of the website
• Stackedit.io - was used to compose readme.md file
• https://validator.w3.org - was used to validate the css and html code used

Testing

• While constructing the website, the initial responsiveness was tested within the Gitpod IDE, which links to the Google Chrome browser, where development tools were used.
• After this, Am I responsive was used to test responsiveness.
• Also the html and css code was validated using; https://validator.w3.org. The outcome of this was resolved, exept for 1 error, that remains in the code, since it has the desired effect and I was not able to find a solution for it. The error that remains in the index.html files is as follows, and will be resolved in a next release:

The element button must not appear as a descendant of the a element. From line 68, column 14; to line 68, column 67

Deployment

• The pages where deployed by activating the GitHub pages on GitHub. This process makes the website accessible for user via the internet. To make this possible all the page and image file links needed to be adjusted, so they would display the intended content.

Credits

Content

• The text for the page "Huisregels/House rules" was copied from the bord at the physical location of Basra Coffeeshop. The text was translated using www.DeepL.com/Translator

Media

• The photos used in this site were obtained from pixabay.com and are free of copyright. The slider photo's, used on the index page where provided by a customer (o.o.hooi).

Acknowledgements

• I received inspiration for this project from the Code Institute "Whiskey drop tutorial" and by browsing for the websites of other local coffeeshops.
• Thank you Seun Owonikoko, Xavier_CI and fellow students for giving me direction and feedback.