This is the website for Happy Dog Café, a small independently owned dog-friendly café in Cork city. The website serves as a point for both new and existing users to find out information such as café opening times, menu, history behind the café and its owners and allows them to sign up for the café's walking club through a form on the site.

The aim of the project is to build an easily navigatable, responsive website using HTML and CSS.

Live link to website

• As a user, I want to be able to view the café opening times, location, and contact details

• As a user, I want to be able to see testimonials from café customers

• As a user, I want to be able to see how to follow the café on social media

• As a user, I want to be able to view the café menu

• As a user, I want to be able to see a section about the café owners

• As a user I want to be able to sign up for the café's walk club

Before writing any HTML or CSS, I used Balsamiq to create wireframes for each of the 4 pages on the site.

• Home

• Menu

• About Us

• Walk Club

I used Coolors.co to choose a colour scheme that would be easily readable and visually appealing to users.

I used Google Fonts to select and import the fonts Amatic SC for main headers and the logo and Josefin Sans for body text.

These elements appear across every page of the website as the user navigates it.

• Logo and Navigation Bar

  • The logo and navigation bar appears on every page of the website. Both of these have been adapted to work on various screen sizes. The logo has a link to the homepage embedded and each of the links on the navigation menu brings the user to the correct page.

  

• Favicon

  • The favicon on the browser tab encapsulates the branding of the café

  

• The Main Image

  • The main image appears across the site with the text inside the box displaying what page the user is on to further allow for easy access. This image along with the text box are fully responsive and will resize in accordance with the size of the screen that the user is viewing the website on.

  

• The Footer

  • The footer displays across every page of the site and displays social media icons with links to the corresponding social media website to allow the user to stay up to date with the café on these platforms.

  

This is the landing page that the user will be brought to when first entering the site.

• Information Card
  • This card displays the café opening times, address, and contact information. The phone number and email address are both clickable to allow the user to either phone or email the café straight from the home page. The right-hand side of the card contains an image of a coffee cup with a dog on it to stick with the theme of the site. the card is adapted for smaller screens with the image appearing below the text on smaller devices.

• Testimonials
  • This section displays customer reviews, this is particularly useful for new users checking out the site who haven't visited the café before. This section is responsive with all 4 testimonials appearing on the same line on large screens, 2 across 2 lines on medium screens and individually on 4 lines for small screens.

This is where a user can find the café's menu along with prices.

• Café Menu
  • The menu shows the items on sale in the café along with each item's price. The menu is split into 4 sections covering hot drinks, cold drinks, food and items for your dog.

• Menu Image
  • Next to the café menu is an image of two people sat drinking coffee with their dog. This is responsive as on smaller screens the image appears below the menu so as that the menu doesn't appear too small to read.

This page allows the user to get a look into the background of the café and its owners. It adds a personal feel to the site.

• Meet the team
  • This section shows an image and short bio about the two café owners and their dog. It contains three cards across on large screens and reduces to single images on smaller screens so it remains easy to read on small devices.

• Our Journey Timeline
  • The timeline gives users an even deeper look into the background of the café and tells the story of how the owners set up the business. The timeline boxes appear on alternating sides of the screen on large devices and in a line on the same side of the timeline bar on smaller screens to make it easily readable.

• Embedded Video
  • A video showing the coffee making process to further entice website visitors to come to the café. The video stretches across the page in a 16:9 format regardless of screen size and automatically adapts as the screen size is reduced keeping it's aspect ratio.

This page allows users to see information and sign up for the café's thrice weekly walking club.

• Walk Club Introductory Section
  • The user is introduced to the walk club, it informs the user of days and times of the walks, distance and lets them know of a 50% discount on their drink if they partake in the club. This section covers 66% of the screen width on large screens but expands on smaller screens to remain looking good for the user.

• Walk Club Signup Form
  • The signup form lets the user join the club. They must enter their own name, number of dogs they plan on bringing, their dogs name(s), their email address and whether their dog is up to dates on their vaccine shots. There is a button for the user to submit the details. The form is fully responsive to look good on all screen sizes.

• Interactive Café Menu
  • I plan to make the café menu interactive using CSS animations.

The following is a list of the technologies I used on this project.

• HTML5
  • HTML5 was used to create the structure of the site.
• CSS3
  • CSS3 was used to add styling to the site.
• Font Awesome
  • Font Awesome was used to import icons used across the site.
• Google Fonts
  • Google Fonts was used to import the Amatic SC and Josefin Sans fonts for use on styles.css.
• Github
  • Github was used to store the project's code after being pushed from Git.
• Gitpod
  • Gitpod terminal was used to commit my code using Git and push it to Github.
• Git
  • Git was used for version control through the Gitpod terminal.
• Canva
  • Canva was used to design the favicon.
• Balsamiq
  • Balsamiq was used to design the wireframes for the project.

View testing here

The site was deployed to GitHub pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• From the source section drop-down menu, select the Main Branch, then click "Save".
• The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:

• git clone https://github.com/adamgilroy22/happy-dog-cafe.git

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

• Code for the main image was inspired from Code Institute's Love Running walkthrough project with some tweaks to fit this website.

• The footer code was also taken from the previously mentioned walkthrough project

• The timeline on the about us page was taken and modified from W3 Schools

• All website text content was created and written by me

• The two fonts used across the site, Amatic SC for headings and the logo and Josefin Sans for the content were imported from Google Fonts

• Wireframes were made using Balsamiq
• Colours were chosen and checked for readability through Webaim

• Favicon was designed by me with Canva

• All photos used on throughout the site are from and used under the Unsplash.com license