Live link to deployed project (hosted on GitHub Pages)

Brew Barberista is a thriving independent coffee shop and barber in North Dublin. Opening its doors at the height of lockdown, the business has not only survived this period of uncertainty, it has established itself as a community hub, showcasing the best of local produce as well as selling art and literature from Dublin-based creatives.

While the company has made good use of social media (notably Instagram) throughout its early days, one thing the pandemic has brought home to business owners everywhere is the importance of building a robust and reliable online presence - something that can remain as a proverbial shop window for customers if and when physical premises might have to close their doors due to Covid restrictions.

At the time of writing, the company's existing site appears to be unfinished, while it is also displaying out-of-date information about opening hours etc. (last updated in December 2020). In addition, its design falls well short of being sufficiently responsive for today's mobile-first consumer landscape:

mobile	tablet	desktop
Home	Home	Home
Brew Coffee	Brew Coffee	Brew Coffee
Brew Barber	Brew Barber	Brew Barber

Brew Barberista old website screenshots

Add to all of this the ongoing #DeleteFacebook movement and growing public concern over the lack of privacy across SNSs, and there is clearly a need for Brew Barberista to consolidate its brand identity and ties to the community by creating a bright and engaging standalone website.

User Experience (UX)

This Brew Barberista rebuild is a fully-responsive frontend website, offering users a visually appealing overview of the business's services, local partnerships and core values. Both first-time and returning visitors will be impressed by the site's mobile-first design as well as its intuitive navigation and layout, while their knowledge of Brew Barberista's offerings and message will be enriched by the site's informative and regularly-updated content.

Project design

Colour scheme:

click to view

Typography:

click to view

• Primary font...

  • Family: Poppins
  • Weights: 300, 400, 500
  • Fallback: sans-serif

• Secondary (Heading) font...

  • Family: Lora
  • Weights: 600, 700
  • Fallback: serif

Wireframes:

click to view

Initial design inspiration for the project's layout and aesthetic came from this Frontend Mentor challenge spec

Features

Existing features:

• Navigation:

  • Fixed Navigation Bar:

  click to view

  mobile	tablet	desktop

  • There is a full-width nav bar fixed to the top of the viewport on all device sizes
  • The site's core navigation menu is hidden off-canvas initially to create a spacious feel across the landing area, where the user is greeted by the Brew Barberista .navbar-logo on the left-hand side and a .navbar-toggler button (aka 'hamburger icon') to the right (see screenshots above)
  • This logo is a modified version of the one featured in the nav bar of the business's existing website
  • The 'space cadet' dark blue and 'old gold' colours that make up this logo directly inform this project's primary palette. A lighter shade of 'queen blue' (featured throughout the current site's footer, for instance) is taken directly from the premises' brightly-painted shopfront.

  • (Off-Canvas) Navigation Menu:

  click to view

  mobile	tablet	desktop

  • The off-canvas navbar-nav menu mentioned above can be expanded by clicking on the .navbar-toggler button. This functionality has been enabled using custom JavaScript by listening for a relevant user click(s) and sliding the .navbar-nav into the viewport with CSS class toggling involving absolute positioning and appropriate transition effects. In addition, the icon comprising the .navbar-toggler button animates on click to produce a dynamic yet smooth transition that is both distinctive and pleasing to the eye.
  • The expanded polygon-shaped menu contains links to each of the website's six internal sections containing content (see below), as well as a seventh link entitled 'Press'.
  • Clicking on this triggers an additional absolutely-positioned submenu featuring external links to recent Brew Barberista media appearances. Each of these links opens in a new browser tab due to the <a> tag's target property being set to _blank.
  • The bottom 'Contact' link consists of a blue call-to-action button. In keeping with UX best practices, clicking on any of the links embedded in the .navbar-nav will cause the menu to revert to its default off-canvas location as the site navigates to the designated location. Smooth scrolling has been enabled to streamline the navigation experience through use of the scroll-behavior: smooth; CSS rule on the document's body element.
  • It's worth noting that one further section of the site, a tiled image gallery, is purely decorative, and so no anchor link was deemed necessary.

  mobile	tablet	desktop

• Header:

click to view

<header> HTML code snippet	.hero-header and .overlay CSS code snippets

mobile	tablet	desktop

• Mobile & Tablet (< 992px):

  • The site's above-the-fold real estate on mobile and tablet features a clean, soothing background image of a horizon out to sea. This was chosen due to Brew Barberista's prime location just off the Howth Road in Raheny and less than a kilometre uphill from the Dublin Bay coast road.
  • On page load this landing area is brought to life using animated hero icons: one of a takeaway cup of hot coffee, the other a silhouette of a man with a striking hairstyle. These icons have been enlarged and had a 'zoom-into-view' @keyframes icon-reveal animation effect applied to them in order to capture the visitor's attention and also hint at the services available at Brew Barberista.
  • There is also a gold-coloured downward-pointing chevron icon used to hook the user and encourage them to explore below the fold. This functionality has been enhanced by adding a gentle "bobbing" animation effect in the project's stylesheet

• Desktop (> 991px):

  • A decision was made to change the header area's aesthetic on desktop devices. In place of the background image with animated icons are two short complimentary video backgrounds: one showing a barista pouring a cup of coffee, the other featuring a close-up of a barber trimming a customer's hair.
  • Each of these video elements has had its opacity reduced to keep them from being seen to occupy the foreground (and/or overly distract the user).
  • There has also been an .overlay class applied to an absolutely-positioned div element that acts as a subtle filter in line with the site's prevailing colour palette
  • One more additional div with background-color set to semi-opaque blue has had a clip-path rule applied to it. This has the effect of creating a symmetrical pair of roughly triangular 'corner areas', each containing an icon and a heading, which act as navigation links to 'Brew Coffee' and 'Brew Barber', respectively.

• Main:

  • About section:

  click to view

  mobile	tablet	desktop

  • The site's first textual content appears in the area immediately below the header (referred to as the About section here for the sake of convenience). This section is in turn subdivided into two divs, Brew Coffee and Brew Barber, each accompanied by eye-catching background imagery and short, snappy summaries of the two sides of Brew Barberista's operations:

  • More Info section:

  click to view

  mobile	tablet	desktop

  • Each About subsection contains a 'More Info' hyperlink, which brings the user to the relevant follow-on subsection for that Brew Barberista service (Brew Coffee/[Brew Barber(https://loosenthedark.github.io/brew-barberista/#get-in-touch)]).
  • These two More Info subsections are stacked on mobile and tablet, and lie side by side on desktop
  • Each panel contains informative blurbs highlighting a variety of USPs offered by Brew Barberista. The text is set against carefully-positioned full-width and -height background images.
  • As screen width increases and space permits, several (initially hidden) elements are revealed across tablet and desktop devices. These include supplementary paragraphs of text and call-to-action buttons.
  • The 'OUR PARTNERS' CTA button (visible on desktop only) in the Brew Coffee div directs the user to the Our Partners section of the site, while the 'BOOK NOW' button (visible on tablet and desktop) beneath the 'Get in touch' Brew Barber heading causes the page to scroll right down to the footer, where the business's contact details can be found.

  • Customer Reviews section:

  click to view

  mobile	tablet	desktop

  • The Customer Reviews section boasts a selection of reviews from Brew Barberista customers, shining a light on what the business has to offer.

  • Each review consists of a customer avatar, excerpt from that customer's review, customer name and the source from which the review has been taken.

  • Semantic HTML elements have been used here: each review is wrapped inside a figure element, with nested img (avatar), blockquote (review body) and figcaption (name and review source) elements.

    <figure> HTML code snippet

  • As with several other sections, the layout has been achieved using a combination of CSS positioning and flexbox on smaller screens, with CSS grid rules applied on desktop.

  • Image gallery:

  click to view

  mobile	tablet	desktop

  • As stated previously, the (untitled) image gallery is for decorative purposes only
  • A flexible and fluid layout has been achieved with flexbox - more specifically, through use of the flex-wrap CSS property
  • The gallery displays as a 2x2 grid on mobile, 3x2 on tablet (two extra image divs having had their display property toggled from none to block) and a single row containing four images (each with a max-height rule applied when the screen width reaches 1440px) on desktop

  • Our Partners section:

  click to view

  mobile	tablet	desktop

  • A similarly fluid approach has been taken for the site's Our Partners section, which consists of a grid of logos belonging to companies/organisations that Brew Barberista has either championed or worked alongside
  • Each logo img is also a clickable link to the relevant company's website, with all of these external links opening in a new browser tab
  • Due to device width constraints, and in order to avoid generating a cluttered feel, two of the section's twelve figure elements are hidden on mobile

  • Location section:

  click to view

  mobile	tablet	desktop

  • The last main section before the footer is a full-width rendering of the business's location on Google Maps

  • This has been implemented using a straightforward script call to the Maps API just inside index.html's closing <body> tag

  • Map configuration and rendering is processed in a maps.js file located in the project's js subdirectory of the static directory

    maps.js file JS code snippet

  • A max-width value of 60rem has been set on the .map-container div across desktop devices to prevent the map from sprawling too far horizontally.

  • To create a bespoke and memorable user experience, the default Maps Marker image has been replaced by a miniature version of the dark blue and gold Brew Barberista circular logo

• Footer (aka #contact section):

click to view

The site's footer element is far from an afterthought, as it contains important contact information and social media links for Brew Barberista. There are three main ways the user might arrive here:

1. By simply scrolling manually through the entire website
2. By clicking the blue 'CONTACT' call-to-action button located at the foot of the off-canvas .navbar-nav navigation menu
3. By clicking the gold-coloured 'BOOK NOW' CTA button located at the foot of the second section#more-info > div on tablet and desktop

As outlined previously, the choice of a specific shade of blue as the background-color for this area was inspired by the actual coat of paint used on the facade of Brew Barberista's physical premises in D5 (cf. device mockups footer screenshots at the bottom of this README document).

• Dynamic 'back-to-top' button (on page scroll):

click to view

One other important UX feature is a fixed-position dark-blue button containing an upward-pointing chevron icon that becomes available to the user as a single-click avenue back to the top of the page when they have scrolled more than 500px vertically downwards. This functionality has been put in place by listening out for a window scroll event in the project's script.js file. The #btn-back-to-top element's display property is then toggled back and forth between none and block in order to show/hide the button in the bottom right-hand corner of the viewport.

script.js file event listener JS code snippet	#btn-back-to-top CSS code snippet

mobile	tablet	desktop

Potential future features:

click to view

• Favicon:

  The site's current favicon has been crudely created by simply cropping a circular cutout of the main Brew Barberista brand logo. A more professional-looking image (to be designed from scratch) would therefore give a more polished look.

• Opening hours:

  These may vary (e.g. Brew Coffee is open seven days a week, whereas Brew Barber is closed two of those days), and will need to be confirmed in consulatation with the owner. A couple of options for displaying these would be to place them in the footer or else maybe to make them viewable on click by toggling a modal from the site's navbar-nav menu.

• Contact/Booking form:

  At present, the user is unable to either contact Brew Barberista or make an appointment for a haircut from within the site itself - the Contact link in the navbar-nav just directs them to the footer, which list the company's contact details along with social media links. A more comprehensive UX would incorporate a native form for reaching out to Brew Barberista without having to open a separate tab/window. Again, a pop-up modal might be suitable for this purpose, or else the form could maybe fit alongside the .map-container div on wider screens.

• Price list(s)/Menu:

  One way of engaging the user further would be to display prices for all of Brew Barberista's products and services. This would likely necessitate building an additional page(s), as the current landing page is probably too long already to accommodate much more scrollable content.

• 'Meet The Team' section:

  One more potential feature to add would be a brief introductory profile section for each front-f-house member of the 'Brew Crew', as they're known. It would be best to maybe bring in a professional photographer if possible to take production-ready shots of the team at work. Together with a short, vox pop-style interview with each staff member, this would add a nice personal touch to the site and help to connect the business more tangibly to its customer base.

Technologies Used

Languages:

click to view

• HTML5: used for structuring the site
• CSS3: used for styling the site
• JavaScript: used for site logic and web page behaviour

Frameworks/Libraries, APIs, Programmes and Tools:

click to view

• Google Fonts: used to import the Poppins and Lora fonts into the project's stylesheets
• Font Awesome v5.15.3: used to add appropriate and visually appealing site icons
• Google Maps API used to provide a visual representation of Brew Barberista's location to site visitors
• Git: used for version control by utilising the Gitpod terminal to commit frequently to Git and push all commits to GitHub
• GitHub: used to compile and remotely store the project's codebase following successive local commits initiated from the command line
• Balsamiq: used to generate wireframes during the project's design phase
• Adobe Illustrator: used to convert both Shutterstock vector downloads from .eps to the more manageable .svg file format
• TinyJPG: used for image compression
• PicResize: used to crop and resize images
• Brackets (desktop app version) used to make coloration edits to SVG files
• Kapwing used as the project's go-to content editing resource, e.g. to shorten videos and customise Brew Barberista partner logos
• W3Schools HTML Color Picker used for generating on-the-fly colour pairings and modifications (lightening, darkening etc. of core project colours)
• WebAIM (contrast checker): / WAVE Web Accessibility Evaluation Tool used to ensure site foreground and background colour contrasts meet WCAG 2 accessibility requirements
• Editor.md used to format project Markdown in line with best practices
• Ray.so: used to create the code block images featured throughout this Markdown file

Testing

Validation:

click to view

• W3C's Markup Validation Service was used to test the validity of all HTML used in this project. The code was validated by direct input, and all suggested corrections were then made. As a result, all of the site's HTML source code now passes W3C validation with just a single warning message being returned, as is reflected in the following screenshot:

  • index.html validation

• Likewise, the website's custom CSS stylesheet was checked for errors using W3C's CSS Validation Service. Once again, validation by direct input was the preferred method selected, and all necessary changes were subsequently carried out. Consequently, the stylesheet now passes W3C validation with just a couple of warning/error messages concerning use of the backdrop-filter property being returned, as the following screenshot indicates:

  • static/css/style.css validation

• The issue surrounding the incompatibility of backdrop-filter with the W3C validator appears to be a well documented one. However, given that this property is present in the MDN Docs and endorsed by CSS-Tricks, it has been used in this project in spite of the validator's error messages. Its patchy browser support necessitated the use of a @supports query on line 698 of the project's custom stylesheet (with a reasonable fallback option of an opaque background), as suggested in this CSS-Tricks article

• In a similar manner, both of the site's custom JavaScript files were validated against JSHint's error-detection tool, which is available both as an online linter and a Gitpod/VS Code extension for real-time JS problem-solving. After heeding various warning and error messages, at the time of deployment each of these .js documents passed JSHint validation with no problems detected.

Responsiveness:

click to view

• All testing was performed manually, and on a near-constant basis as the project evolved. Google Chrome DevTools served as an indispensable resource throughout this testing process, allowing incremental adjustments to be made to the site's infrastructure and layout. Firefox Developer Tools was preferred when building out the grid layout on desktop, as this offers a broader suite of functionality than Chrome for grid. The site's responsiveness was also closely monitored and rigorously tested from start to finish using the bespoke developer-oriented Responsively browser.

• A variety of actual physical devices were used to test real-life responsiveness. These ranged in size from a Samsung Galaxy S5 (screen width 360px) right up to a 32" LED Android Smart TV (using this device's native Odin browser/ADK). Other devices used in testing included an Acer Aspire F 15 Windows laptop, a 13" MacBook Pro, the Moto G4 and Huawei P20 smartphones, and a Kindle Fire tablet.

• In addition to Chrome, Firefox and Odin, the site was also viewed numerous times in the Safari, Microsoft Edge and Amazon Silk browsers prior to completion.

Bugs:

Deployment

click to view

GitHub Pages:

This project has been deployed to GitHub Pages. The deployment process carried out was as follows...

1. Sign in to GitHub and locate the relevant repository. If you do not have a GitHub account, you may create one here.
2. At the top of the project repository page, select Settings.
3. On the Settings page, scroll down the menu flanking the left-hand side of the screen and select Pages near the bottom of the list of options.

This will open GitHub Pages....

4. Under Source, click the dropdown displaying Branch: None and select the master branch. Click Save.
5. The page will then automatically refresh and inform you that the site is now ready to be published, as well as indicating the https:// address to be used.
6. For reference purposes, a link to this newly-published site can be found in the Pages section of Settings (described above).

Forking the GitHub Repository:

It is possible to fork this GitHub repository to view and/or make changes without affecting the original. This is achieved by following these steps...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on Fork, located near the top right-hand corner of the repository page.
3. You will now have a copy of this project's repository in your own GitHub account.

Making a local clone:

It is possible to copy the repository to your local machine so that you can fix merge conflicts, add or remove files and push larger commits without affecting the original project code. Cloning a repository pulls down a full copy of all the repo data that GitHub has at that point in time. See the GitHub Docs for further information, and below for a brief summary...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on the Code dropdown next to the green Gitpod button. This will reveal the Clone option.
3. In order to clone the repository using HTTPS, select HTTPS and copy the link shown (there is a copy button to the right of the URL).
4. Next, open Git Bash (see here for an overview of download options, if required).
5. Change the current working directory on your local machine to the location where you want the cloning to be made.
6. Type git clone into your IDE terminal followed by the URL you copied in Step 3 above, i.e.

https://github.com/loosenthedark/brew-barberista.git

7. Press Enter.
8. Your local clone has now been created.

See the GitHub Docs for more information on all of the above processes.

Credits

Code:

Where code blocks/snippets/implementations have been incorporated from external sources into this project's code, these have been noted through the use of comments. Beyond this, the developer made use of the following articles, suggestions and learning resources while building the site:

click to view

• 'Bootstrap 4 simple back to top with smooth scroll' (BBBootstrap)
• 'Show div after 500px scroll' (JSFiddle)
• 'How to crop SVG file within HTML/CSS' (Stack Overflow)
• 'CSS Clipping Path with CSS Shapes' (CodePen)
• 'Create a Website With Video Background' (Traversy Media)
• 'How do I loop through multiple background videos?' (Stack Overflow)
• 'How to change the playing speed of videos in HTML5?'] (Stack Overflow)
• ’How can one display images side by side in a GitHub README.md? (Stack Overflow)
• '<details>: The Details disclosure element' (MDN Web Docs)
  • My mentor kindly alerted me to this means of making my README more compact and readable via his own demo implementation
• Morten Rand-Hendriksen's LinkedIn Learning courses on CSS, and in particular his advice on the principles of progressive enhancement proved especially useful when implementing a CSS grid layout for larger screens

Content:

click to view

• Most of the body text was composed by the developer, and is an extension of the content on Brew Barberista's existing site, along with relevant supplementary information found across the business's social media channels
• The customer reviews are legitimate - below are links to the original of each:
  • Tripadvisor review
  • Lovin Dublin quote
  • Google Review #1
  • Google Review #2

Media:

click to view

Media title/description	Media format	Credit	Link to original media source(s)
head
Brew Barberista circular brand logo	image	Brew Barberista	Brew Barberista website header
Brew Barberista owner press pic	photo	Frank McGrath	Independent.ie
nav
Brew Barberista main brand logo	image	Brew Barberista	Brew Barberista website header
gold hamburger icon	icon	Font Awesome	Font Awesome
gold coffee mug icon	icon	Font Awesome	Font Awesome
header
'Calm Sea Under Blue Sky'	photo	cottonbro	Pexels
'Fashion silhouette hipster style'	vector illustration	RomanYa	Shutterstock
'Paper mug with hot drink inside'	vector illustration	Agnieszka Karpinska	Shutterstock
'A Barista Making A Coffee Artistically'	video	Ketut Subiyanto	Pexels
main
'Cold Brew'	photo	Andrew "Donovan" Valdivia	Unsplash
'Anonymous barista pouring milk from jug into paper cup'	photo	Ketut Subiyanto	Pexels
barber's kit against orange background	photo	Sinval Carvalho	Unsplash
'Baked Pastries'	photo	Magda Ehlers	Pexels
'Brown Coffee Beans on Gray Textile'	photo	Liana Horodetska	Pexels
'Crop barista pouring milk froth in cappuccino for client'	photo	Ketut Subiyanto	Pexels
'Man in White and Black Stripe Shirt Holding Black Pen'	photo	cottonbro	Pexels
'White Ceramic Mug With Brown Liquid'	photo	Gareth Rees	Pexels
'Straight Razor Kit'	photo	Josh Sorenson	Pexels
'Set of disposable paper coffee cups'	photo	Ketut Subiyanto	Pexels
customer avatars	photos	UI Faces / Random User Generator	#1 / #2 / #3
Lovin Dublin avatar	image	Lovin Dublin	Lovin Dublin Twitter profile
Brew Barber customer black & white image	photo	Brew Barberista Facebook page	Facebook
3fe logo	logo	3fe	3fe website
Victoria Arduino logo	logo	Victoria Arduino	Jimmy's Espresso Services
Tartine Organic Bakery logo	logo	Tartine	Veganic
Pieman logo	logo	Pieman	Pieman website
Nic Gemma Cupcakes logo	logo	Nic Gemma Cupcakes	Nic Gemma Instagram page
The Raw Juice Company logo	logo	The Raw Juice Company	The Raw Juice Company website & Facebook page
Korina Bakery logo	logo	Korina Bakery	Korina Bakery Facebook page
Tonja Maguire Art logo	logo	Tonja Maguire Art	Tonja Maguire Art Facebook page
Conscious Cup Campaign logo	logo	Conscious Cup Campaign	Conscious Cup Campaign website
Pieta Darkness Into Light logo	logo	Pieta	Darkness Into Light 2021 website
St. Francis Hospice logo	logo	Saint Francis Hospice	Laimoon
Raheny Business Association logo	logo	Raheny Business Association	Raheny Business Association website
footer
'Gmail New 2020 Vector'	vector icon	IconApe	IconApe
'Dog Friendly sign'	image	SVGCraftLounge	Etsy

Acknowledgments:

• I've been fortunate enough to be paired with an incredibly helpful and approachable mentor in Tim Nelson. He has been on hand throughout this project's evolution to offer pointers, timely feedback and guidance. Cheers, Tim!
• My better half Ana deserves a medal, not just a mention, for all her constant support and encouragement. She also conducted plenty of ad hoc testing on a variety of devices, and it was she who suggested I speed up the background barista video above the fold on desktop 😁

Notice:

This site has been created for development purposes only.