Yellow Door Coffee is a website for a speciality coffee shop in Limerick. The coffee shop is unique because it offers its customers a choice of four different blends of coffee from around the world. Yellow Door Coffee recognizes that individuals have unique tastes; we cater for these tastes by offering a range of flavor notes in our coffee. We actively encourage customers to explore the wide variety of different blends we have on offer, and the minimalist design of our shops uses splashes of yellow to brighten our customer’s day; this style and colour theme has also been incorporated into the website.

Here is a link to the live website: Yellow Door Coffee

The website was designed with customers and potential customers in mind. The website required clear navigation and ease of use; it needed to be informative and also visually engaging. The images used through-out the site are in-keeping with the style of the cafe and have been selected to give users some sense of the Yellow Door Coffee experience.

• As a website user, I want clear navigation that stands out so that I can quickly visit the section that interests me.
• As a website user, I want to see visual images that give me a sense of what the site is about.
• As a customer, I want to see what variety of coffee is available, so that I can make an informed decision what to order
• As a customer, I want clear and precise details of opening hours and location, so that I can get to the cafe easily and at the right time.
• As a user of the site, I want to able to scroll through the different type of coffee, so that I can see each type and not be overloaded with information.
• As a user of the site, I want to see pictures from the cafe, so I get a sense of what to expect and can make a judgmenet regarding if its somewhere i’d like to go or not.
• As a website user, I want to see customer feedback, to see if it is inline with what the coffee shop is promising.

I designed the mock ups for the site using Figma. Mock ups for the website can be found in the following folder

Please find a list of features which are live on the website below:

The website has four pages: Home, Our Story, Our Coffee, Contact Details. Certain feautres are shared on all four pages while others are designed for each individual page.

• The navbar - allows users to achieve what section of the website to visit, by having them click on one of 4 options.
• Order Now Section – this section allows users to select a coffee to pre-order on the website so it is ready to collection
• Meet The Team – the meet the team section allows users to hoover over each team member to bring up links to their social media accounts and get to know them better.
• Customer Reviews – will allow users see a small image of previous customers along with a rating out of 5 stars and a comment about the cafe
• Find Us Section – this section includes a google map sp the cafe can be easily located and also has contact details
• Contact Us form – the form allows customers to send a message to the cafe once the include their name and email address, customers will be notified if they have forgotten either field when they hit the send button
• Our Coffee – this page provides striking images of each of the coffee beans along with informative test about the different flavours of coffee from each area
• The footer also enables users to visit various social platforms that the cafe has online.

The main feature left to implement is finsihing the Order Now section so that a module appears once a selection is made allowing the customer to complete their order. I hope to add this once I have completed the Javascript moule. I would also like to add animation through out the site, for example, making certain text move onto the page after an image has zoomed.

The following languages, frameworks and libraries were used throughout the design of this website to accomodate the design, structre and style:

• HTML – the project uses html as the main language to build the website
• Bootstrap – The bootstrap frame work is used to style and layout the website
• CSS – CSS is used to add individual style to the website
• Pixlr – Pixlr was used to resize images for use on the website
• Font Awesome – this site was used to add icons to the site.
• Canva – to make images

In order to assure that the webiste performs efficiently and the features carry out the functions that they are created to, I conducted several tests which are outlined below.

• I investigated the responsiveness of the website by utilizing the Google Chrome extension to establish that the site was receptive to all device sizes; mobiles, tablets and monitors. For certain sections such as the Our Coffee page, padding and margins were removed using media queries to allow the page to be viewed more effectively on smaller devices. Another tool I used to study the responsiveness of the site was responsivetesttool.com - a website that has almost every device listed from mobile phones to tablets and laptops, it allows you to examine what your site looks like across the specific screen sizes of numerous brands and devices. I found this tool particularly useful.

• I tested all the navigation links repeatedly to guarantee that they worked from each individual page.

• I loaded pages several times to verify that the images loaded perfectly every time, as well as establishing that images appeared zoomed if they were designed to do so.

• I confirmed that all buttons on the site performed the task that they were set out to, E.G; the find out more button on the homepage brings the user to the About Us page.

• For the Contact form, I tested it’s function by:

  1. Go to the “Contact Us” page
  2. Try to submit the empty form and verify that an error message about the required fields appears
  3. Try to submit the form with an invalid email address and verify that a relevant error message appears

Please find a summary of how the site was tested and the results in the table below:

I used GitPod to develop my project, this is where I wrote my code and ran it to assure it performed. On completion of each section I committed the work to GitHub. From the Github platform, I deployed the project to a hosting platform. The project is hosted on Github Pages; in order to make the project go live, I had to insure I had the correct settings employed in Github. There is a Github Pages section in the repository settings which needed to be activated. Once activated it advised me that my site was available at the following address: https://jadeosull93.github.io/my-full-template/ - it is critical to note that the homepage needs to be identified as index.html for Gitpages to find it and publish the site.

1. Navigate to 'Jadeosull93/my-full-template'
2. On the naviagtion bar at the top click 'settings'
3. Scroll to the GitHub Pages section
4. Select 'Master Branch' from the 'Source' dropdown menu
5. Click confirm my selection
6. Yellow Door Coffee should now be live on Github Pages

1. Navigate to 'Jadeosull93/my-full-template'
2. Click the 'Clone or Download' button
3. Copy the url in the dropdown box
4. Using your IDE of choice open up your preferred terminal
5. Choose your desired file location
6. Copy and paste the following code into your terminal to clone Yellow Door Coffee

git clone https://github.com/Jadeosull93/my-full-template.git

In addition to Github and Gitpod, I chose to run my code locally on an internal IP address within my home using an Apache web server running on Ubuntu. I used Windows Visual Studios to write the code and FireZilla to deploy the site to the internal webserver. This was benefical for testing code on different devices throughout the house without having to “push” the code each time I made a change.

The text for the Our Coffee page has been extracted and edited from the following sources:

• https://www.baristainstitute.com/blog/paulina-palaikyte/january-2018/african-coffee-bean-vivid-flavors-ethiopia-kenya
• https://espressocoffeeguide.com/gourmet-coffee/arabian-and-african-coffees/uganda-coffee/
• https://www.coffeestrong.org/ugandan-coffee/

The photos used in this site were obtained from www.unsplash.com which is a website of readily available free to use images

I received inspiration for this project from serveral different coffee websites inclusing somacoffee.ie, rift.ie and also from visiting cafes based in Limerick such as Rift, Duo and Canteen. I would also like to give a special thanks to my mentor Precious Ijege who was always happy to give excellent feedback and guide me in the right direction throughout the duration of the project. I would also like to thank my father John O' Sullivan, who gave up his time to give me guidence, support and encouragement.