The Cocktail Lab

Milestone Project 1 - Static Front End Website

• DISCLAIMER: The Cocktail Lab is a fictional company. This website is for the developers portfolio and for the competition of the Code Institute milestone project 1.

Overview

The Cocktail Lab is a Dublin based company that educates and entertains in the skill of cocktail making. Located in the heart of Dublin, The Cocktail Lab hosts Masterclasses where groups or individuals can learn all the skills needed to be a Mixoligist. Our site is targeted towards either individuals who are looking to get in the Mixology industry or anyone that enjoys making cocktails. The Cocktail Lab is useful in upskilling and/or providing and entertaing experience for individuals or groups.

Features

Existing Features

Navigation Bar

• The Navigation Bar features at the top of the page and includes internal links to the Home, About Us, Gallery, Contact and Sign-Up sections of the website
• This Section will allow the user to easily navigate to different areas of the webpage without having to scroll continously, saving time and enhancing the User Experience.

Landing Page Image

• This is an image used to immedietly capture the users attention. The image is big and bold and should intrigue to user to continue on the site.
• The image is also relevant to The Cocktail Lab and is one of the signature cocktails, thus grabbing the users attention.

About Us

• The What Is The Cocktail Lab section will give a broad overview of what the user can expect from The Cocktail Lab. It informs the user who we are and what we do.
• This section has four subsections which makes it easy or the user to find the informtion he/she might need.
• This section also features a Signature Drinks heading with showcases The Cocktail Labs three marquee cocktails and their ingredients.

Gallery

• The Gallery section features a montage of photos from The Cocktail Lab Masterclasses.
• Each photo is relevant in telling its own story to the user and the photos have been specially selected to go with the colour palette of the website.

Contact Us

• This section features all the contact information a user would need to get in contact with The Cocktail lab including opening times, address and contact information such as email and phone number.
• This section also features a map where the user can find the location of the Cocktail Lab.

Sign-Up

• This section feature a form where the user can sign up to a weekly newsletter.
• The purpose of the newsletter is to ensure the user gets the most up to date news on relating to The Cocktail lab, including promotions and offers.
• the form is intentionally basic in nature as to encourgae the user to subscribe to the newsletter.

Footer

• The Footer section includes links to relevant social media sites. The links will open in a new tab to allow easy navigtion for the user.
• The footer is an essential part of the page as it allows to user to keep connected to The Cocktail Lab through various different Social Media platforms.

Future Features

• In the future The Cocktail Lab would like in implement new features for the website including a video section where users can physically see our Mixoligists prepare our signature cocktails.
• Another feature that The Cocktail Lab hopes to implement in the future is an online booking system to make it easier for the user to book masterclasses.

User Experience

User Stories

1. First Time Visitor Goals

• As a First Time Visitor, i want to understand the main purpose of the website.
• As a First Time Visitor, i want to know what the company does and is it what i am looking for.
• As a First Time Visitor, i want to be able to easily navigate to the section of the webpage i am most interested in.
• As a First Time Visitor, i want to be able to easily locate the companys social media links to find more information if needed.

2. Returning Visitor Goals

• As a Returning Visitor, i want to find information that provides contact details and the location of the company.
• As a Returning Visitor, i want to find any updates on the service the company provides.
• As a Returning Visitor, i want to view any media the website has.

3. Frequent Visitor Goals

• As a Frequent Visitor, i want to be able to sign up to a news letter to ensure i get up to date information on events and promotions.
• As a frequent Visitor, I want to be able to see if any new products or recipes have been added to the webpage.

Design

• Colour Scheme

  • The main colours used for The Cocktail Lab website where a shade of cream and dark grey, this invites warmth for the user when looking at the page.
  • The colours used were rgb(250, 238, 223), #383838

• Typography

  • The font used for the headings was Playfair Display and for paragraph content it was Lato. Sans Serif was used as a fallback in case of the Google Fonts link not working. Playfair was used to ensure a level of sophistication and attractivness. Google Fonts

• Imagery

  • Imagery is essential. The landing page image is designed to be eye catching and promote and element of desire for a cocktail, thus ensuring the user stays engages with the website.
  • The colour profile of the images is warm to ensure it goes with the overall colour palette of the webpage

Technologies Used

Languages Used

• HTML5
• CSS

Frameworks, Libraries and Programs Used

1. Google Fonts

   • Google fonts were used to import the 'Playfair Display' and 'Lato' font into the style.css file which is used on all pages throughout the project.

2. Font Awesome

   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

3. GitHub

   • GitHub is used to store the projects code after being pushed from Git.

Testing

• The W3C Markup Validator was used to validate the HTML. ]

• The W3C CSS Validator was used to validate the CSS.

• Lighthouse was also used to test the performance of the website.

• WAVE Accessibility Evaluation Tool was used to test accessibility.

• To test the responsiveness of the website i utilised Chrome DevTools to inspect the website at different screen sizes. I also tested on my mobile and mobile devices of family and freinds.

• Interactivity testing was done by clicking all links on the website and ensured they were functioning correctly.

Testing User Stories from User Experience (UX) Section

1. First Time Visitor Goals

A. As a First Time Visitor, i want to understand the main purpose of the website.

• Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the section of their choice. It was a single scroll website so every page was easy to locate.
• The Hero Image immediately caught my eye and the colours gave a sense of warmth.

B. As a First Time Visitor, i want to know what the company does and is it what i am looking for.

• Upon first entering the site, it is clear what the pmain purpose of the company and the website is. The visuals and About Us section make it very clear.
• The information given in the About Us section was highly informative and easy to understand.

C. As a First Time Visitor, want to be able to easily navigate to the section of the webpage i am most interested in.

• Upon entering the site, the navigation bar made it very easy to quickly navigate to the exact section in which i was looking.
• Being a single scroll page made it easy to seamlessly scroll through each differnt part of the page.

D. As a First Time Visitor, i want to be able to easily locate the companys social media links to find more information if needed.

• Upon visiting the site, it was very easy to locate the social media links as they where located in the footer which is common practice for a lot of websites. The icons were easily recognisable and the links work efficiently.

2. Returning Visitor Goals

A. As a Returning Visitor, i want to find information that provides contact details and the location of the company.

• Upon returning to the site, it was extremely easy and accessible to see the Contact Us section in the navigation bar. When i clicked the link i was taken to the part of the page that had all the contacyt information i was looking for.

B. As a Returning Visitor, i want to find any updates on the service the company provides.

• As a returning visitor, it was easy to locate the signature drinks section which had a variety of interchangeable drinks.

C. As a Returning Visitor, i want to view any media the website has.

• As a returning visitor, it was easy to locate the media on the webpage to the Gallery link on the navigation bar. This took me to the section which had photos which were related to the webpage and its activities.

3. Frequent User Goals

A. As a Frequent Visitor, i want to be able to sign up to a news letter to ensure i get up to date information on events and promotions.

• As a frequent visitor, it was essential to have a steady stream of information, the sign-up section provided this as i could sign up to a newsletter that gave weekly promotions and information on all things related to the company.

B. As a frequent Visitor, I want to be able to see if any new products or recipes have been added to the webpage.

• As a frequent visitor, the newsletter enabled me to see all new recipes and products and also the signature drinks page gets updated to have a constant flow of recipes to try.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Credits

Code

• W3Schools.com How To section greatly assited in the code for the Form ection of webpage.
• Code Institue "Love Running" project and Code Institute "Coders Coffeehouse" project provided assistance in assembling this webpage.

Content

• All content was written by the developer.

Media

• All images were got from Pexels, link of which is in the Media Elements of HTML Essentials module.

Acknowledgements

• My Mentor for the continuous feedback and invaluable help i recieved throughout the duration of my project.
• My peers on Slack for assistance on all queries i had.